我们知道H5页面经常需要将用户导流到APP,通过下载安装包或者跳转至应用宝市场/Appstore等方式进行导流。但是由于小程序嵌套webview时需要校验域名,因此跳转到第三方应用市场和Appstroe无法实现导流。那怎么办呢?
只能说道高一尺魔高一丈,看看微博小程序是怎么导流的:
曲线救国的方式,利用小程序的在线功能可以打开H5的方式,去进行下载引导。
于是,就引出了这次文档的主题,小程序在线客服自动回复功能。
阅读本文档之前,最好已经了解过小程序客服信息官方的相关文档:
这次开发做在线客服功能也踩了不少坑,网上也查阅不少资料,但大部分的后台都是基于php或者python,java开发,node.js开发的较少,因此将这次开发的流程记录一下,供大家参考,避免大家踩坑。可能会有一些错误地方欢迎指正交流。
另外,我们用的node框架是基于koa自行封装的,在一些细节实现上和其他框架会有区别,不必纠结。
需求描述
小程序中点按钮跳转在线客服界面,根据关键词自动回复
客服回复判断条件,支持cms配置key,及 respond
respond 支持配置以下类型,及回复内容:
type
内容
text
text=文本回复内容
link
title=标题 description=描述 url=跳转链接 thumb_url=图片地址
image
imageurl=图片地址
配置后用户需要精准匹配回复条件才可收到自动回复
可支持配置多个key,及对应respond
除了配置的key以外的回复,可配置默认的自动回复
开发流程
写个跳转客服的按钮吧
index.wxml
<button open-type="contact">转在线客服</button>
后台配置
登录小程序后台后,在「开发」-「开发设置」-「消息推送」中,管理员扫码启用消息服务,填写服务器地址(URL)、令牌(Token) 和 消息加密密钥(EncodingAESKey)等信息。
1.URL服务器地址
URL: 开发者用来接收微信消息和事件的接口 URL。开发者所填写的URL 必须以 或 https:// 开头,分别支持 80 端口和 443 端口。
务必要记住,服务器地址必须是线上地址,因为需要微信服务器去访问。localhost,IP,内网地址都不行的。
不然会提示 '解析失败,请检查信息是否填写正确'。
那么问题来了,不同的公司都有一套上线流程,总不能为了调试URL是否可用要上到线上去测试,成本太大,也不方便。
这就要引出内网穿透了,简单来说就是配置一个线上域名,但是这个域名可以穿透到你配置的本地开发地址上,这样可以方便你去调试看日志。
推荐一个可以实现内网穿透的工具。(非广告)
NATAPP 具体不详细介绍,免得广告嫌疑。
简单说,NATAPP有免费和付费两种模式,免费的是域名不定时更换,对于微信的推送消息配置一个月只有3次更改机会来说,有点奢侈。不定什么时候配置的域名就不能访问,得重新配置。而付费的则是固定域名,映射的内网地址也可以随时更改。楼主从免费切到付费模式,一个月的VIP使用大概十几块钱吧。
2.Token
Token自己随便写就行了,但是要记住它,因为你在接口中要用的。
3.EncodingAESKey
随机生成即可。
4.加密方式和数据格式
根据自己喜欢选择,楼主选择的安全模式和JSON格式。
不同的模式和数据格式,在开发上会有不同,自己衡量。
既然这些配置都清楚,那开始码代码。
验证消息的确来自微信服务器
配置提交前,需要把验证消息来自微信服务器的接口写好。
server.js
/* * https://developers.weixin.qq.com/miniprogram/dev/framework/server-ability/message-push.html * 验证消息的确来自微信服务器 * 开发者通过检验 signature 对请求进行校验(下面有校验方式)。 * 若确认此次 GET 请求来自微信服务器,请原样返回 echostr 参数内容, * 则接入生效,成为开发者成功,否则接入失败。加密/校验流程如下: * 将token、timestamp、nonce三个参数进行字典序排序 * 将三个参数字符串拼接成一个字符串进行sha1加密 * 开发者获得加密后的字符串可与signature对比,标识该请求来源于微信 */ const crypto = require('crypto'); async wxCallbackAction(){ const ctx = this.ctx; const method = ctx.method; //微信服务器签名验证,确认请求来自微信 if(method === 'GET') { // 1.获取微信服务器Get请求的参数 signature、timestamp、nonce、echostr const { signature, timestamp, nonce, echostr } = ctx.query; // 2.将token、timestamp、nonce三个参数进行字典序排序 let array = ['yourToken', timestamp, nonce]; array.sort(); // 3.将三个参数字符串拼接成一个字符串进行sha1加密 const tempStr = array.join(''); const hashCode = crypto.createHash('sha1'); //创建加密类型 const resultCode = hashCode.update(tempStr, 'utf8').digest('hex'); // 4.开发者获得加密后的字符串可与signature对比,标识该请求来源于微信 if (resultCode === signature) { console.log('验证成功,消息是从微信服务器转发过来'); return this.json(echostr); }else { console.log('验证失败!!!'); return this.json({ status: -1, message: "验证失败" }); } } }
验证接口开发完毕,后台配置可以去点提交了。配置成功会提示如下:
接收消息和推送消息