扫一扫功能

项目开发中有很多场景需要拉起微信扫一扫,在这里主要记录下开发过程中遇到的一些问题,以及解决方案。仅供参考

拉起方法

官方的sdk文档关于使用方法写的很详细
http://qydev.weixin.qq.com/wiki/index.php?title=%E5%BE%AE%E4%BF%A1JS-SDK%E6%8E%A5%E5%8F%A3
基本上对照官方文档的做法都能完成


问题记录

1.签名失效
2.首次加载签名失效,刷新正常
3.ios 首次进入签名正常,permission denied,刷新无效


问题解决方法及原因

首先说明H5项目开发的框架是VUE SPA单页面应用

1。 签名失效

– 首先利用js校验工具
http://mp.weixin.qq.com/debug/cgi-bin/sandbox?t=jsapisign 去校验下签名是否正确

– 再确认页面url是否正确(location.href.split(‘#’)[0]),包括’http(s)://’部分,以及’?’后面的GET参数部分,但不包括’#’hash后面的部分

– appId是否正确,config 中的 appid 与用来获取 jsapi_ticket 的 appid
以上是签名失效的检查顺序,并且要确保项目开发的安全域名已经在公众号内配置。
我这里检查完都没有问题,最后发现是因为安全域名配置引起的。
因此当问题阻塞时,还是从头理清楚
2。spa单页面应用,服务端渲染index页面返回客户端,本地页面切换不存在服务端刷新,因此,在需要调起扫一扫的页面传递的url与服务端url不一致,当强制刷新页面时,服务端的url与当前页面一致,因此可以成功获取。
解决方法 再进入该页面后强制刷新一次(reload)
当然要要标记下首次进入才需要刷新,否则会造成很对不必要的刷新
3。ios的签名要在入口页获取,解决了签名失效的问题

其他

  • 安卓在当前页面注入config,获取签名
  • 如果需要在完成注入后立即调用函数需要放在we.ready()中,而用户操作后的行为不需要
  • ios不存在需要在当前页刷新的问题(迷)
  • 公众号切换确认是否配置安全域名,因为产线公众号只能配一个安全域名