微信 JS-SDK 接口调用

[Dream4ever]

需求描述

随着业务需求的不断增加，微信 JS-SDK 接口的调用就成了必然。因为只有合法调用了微信 JS-SDK 接口，才能使用相关功能，比如自定义微信内转发链接的样式等等。

方案调研

整体流程

• 基于Node.js的微信JS-SDK后端接口实现：前后端都有，很齐全
• 微信JS-SDK说明文档

接口权限

公众号接口权限说明：在开发业务之前，一定要先来这里看看，当前用于开发的公众号是否有对应的权限！

• 接口配置信息：这里设置的接口 URL 用于返回 echostr ，所以应当填写 abc.com/wx 这样的接口地址而不只是域名。
• JS接口安全域名：用来调用后端接口的域名，所以应当只填写域名，以便网站下的所有服务均可使用接口。

设置安全域名

• 公众号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

参考链接：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421140183

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 上的微信开发者工具中均会出现。