微信 JS-SDK 接口调用 #41
Description
需求描述
随着业务需求的不断增加，微信 JS-SDK 接口的调用就成了必然。因为只有合法调用了微信 JS-SDK 接口，才能使用相关功能，比如自定义微信内转发链接的样式等等。
方案调研
整体流程
- 基于Node.js的微信JS-SDK后端接口实现：前后端都有，很齐全
- 微信JS-SDK说明文档
接口权限
公众号接口权限说明：在开发业务之前，一定要先来这里看看，当前用于开发的公众号是否有对应的权限！
- 接口配置信息：这里设置的接口 URL 用于返回
echostr，所以应当填写abc.com/wx这样的接口地址而不只是域名。 - JS接口安全域名：用来调用后端接口的域名，所以应当只填写域名，以便网站下的所有服务均可使用接口。
设置安全域名
用于调用后端服务的前端页面，所属域名必须在公众号的 JS接口安全域名 的列表之中。
设置 ⇒ 公众号设置 ⇒ 功能设置 ⇒ JS接口安全域名，在这里将前端页面所属域名添加进来。
另外在设置界面提供下载的 txt 文件，必须能够通过指定的域名直接访问到，否则也会设置失败。
接入平台
先接入微信公众平台：接入指南
重点是第二步，在自己的服务器上要编写后台服务，将微信服务器所发送的 GET 请求中的 echostr 原样返回，这样微信服务器才能验证成功，平台就正式接入了。
注意：即使所有设置都不变，每次提交服务器配置时，微信服务器所发送的 GET 测试请求中的各项参数也会变化。
再注意：本次提交服务器配置的时间，如果和上一次提交隔了几分钟以上的话，初次提交会超时，再次提交就 OK 了，不知道是不是自己的代码写得还不够完善。
示例代码：
router.get('/wx', function (req, res, next) {
res.send(req.query.echostr);
});设置后端服务 IP 的白名单
设置了 IP 白名单之后，自己的服务器才能获取到 access_token 和 jsapi_ticket 。
开发 ⇒ 基本配置 ⇒ 公众号开发信息 ⇒ IP 白名单 ⇒ 查看 ⇒ 修改
接口调试工具
微信公众平台接口调试工具：用于验证指定的 appId 和 appSecret 能否成功获取 access_token
微信 JS 接口签名校验工具：用于验证签名算法是否正确
获取 access_token
let APPID = ""
let APPSECRET = ""
let accessTokenUrl = "https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=" + APPID + "&secret=" + APPSECRET获取 jsapi_ticket
let ACCESS_TOKEN = ""
let jsApi_Ticket = "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + ACCESS_TOKEN + "&type=jsapi"注意：确认一下发送到后端的 URL 是否需要先用 encodeURIComponent() 编码。
签名
通过接口获取到 access_token 再获取到 jsapi_ticket 之后，要用 jsapi_ticket 进行签名。这时签名所用的 timestamp 和 noncestr ，必须和前面第一步接入平台验证 echostr 时所用的 timestamp 和 noncestr 相同。也就是说每次在公众号的“开发 ⇒ 基本配置 ⇒ 服务器配置”中更新了 timestamp 和 noncestr 之后，也要在后台的签名代码中对应更新。
这么说的话，在每次验证服务器配置的时候，把 timestamp 和 noncestr 写入数据库或者缓存不就好了？
前端调用
- SF 关键字：
vue 微信 转发 - vue先hash 模式部署项目，然后开启histroy模式 ，引发的几个问题以及histroy模式的开启方式、优点：主要讲 history 模式的注意事项，文中也提到了另一篇文章，讲的前端如何调用微信 JS-SDK。
测试账号
提供给开发者的测试账号，似乎可以不受限制地进行转发？上网查了查，测试帐号好像也没什么特殊的限制，写代码测试了一下，的确可用。不过为了保险起见，还是用正式的账号吧。
配置信息
- 设置 ⇒ 公众号设置 ⇒ 功能设置 ⇒ JS 接口安全域名
- 开发 ⇒ 基本配置 ⇒ 全部设置
应用过程
此处将实际的业务代码补充进来。
要点总结
研究这个微信 JS-SDK 的调用真是个大工程，印象中搞了两个星期才弄好？要踩的坑实在是太多了。
注意事项
开发者工具控制台输出结果
用微信开发者工具测试微信 JS-SDK 接口的调用情况时，启动开发者工具之后，首次打开调用了接口的页面时，控制台显示的“当前页面通过 wx.config 获取到的 JSSDK 权限如下”的结果为空，需在不关闭开发者工具的前提下，刷新一下页面，这里显示的结果才有对应的值。
经过测试，发现这个问题在 Windows 和 Mac 上的微信开发者工具中均会出现。