微信开发中,有很大部分场景涉及到识别用户完成业务操作。公众号页面本身提供的功能有限,很多业务场景需要引导用户进入网页内来实现。微信提供了JSSDK来使我们网页能实现更强大的功能。这次记录一下个人接入JSSDK开发的过程以及一些经验。
使用步骤
1.参照官方使用指南,第一步为绑定 JS安全接口域名。本人使用的是测试账号开发,ngrok服务映射本地目录,有一个很重要的一点是域名需要填写正确,不包括协议头。(ngrok使用提供的外网域名,nodejs配置相关配置好之后建议重新设置一次)
2.第二步为引入JS文件,因为签名需要在服务端生成,我选择在视图模板中引入。 http://res.wx.qq.com/open/js/jweixin-1.0.0.js
3.配置config
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见附录1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});
签名的生成官方提供了示例代码 <a href="http://demo.open.weixin.qq.com/jssdk/sample.zip">这里下载</a>
官方的加密功能使用了 jssha 的包,如果不想额外安装包可以使用 crypto 包来实现(因为其他地方加密也需要用到 crypto)
crypto的用法类似这样
let string = 'string' //需要加密的字符串,参照官方代码排序即可
let shasum = crypto.createHash('sha1');
shasum.update(string)
return shasum.digest('hex')
签名需要使用的 jsapi_ticket,和 access_token 类似,需要缓存在服务器端,照着改一遍就好了。
这么总结起来好像也没什么难点,只是开发时碰到几次报 invalid signature错,发现自己 ticket的方法都没有写好,最后检验完签名没问题后报 url domain 的错误,尝试本地地址和ngrok地址都无法解决,最后重新设置了一下JS安全域名(ngrok提供的地址),就可以了。
完毕~