H5如何拉起微信扫一扫

扫一扫功能

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

拉起方法

官方的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不存在需要在当前页刷新的问题（迷）
• 公众号切换确认是否配置安全域名，因为产线公众号只能配一个安全域名

推荐阅读

其他相关报错请移步：
http://blog.youkuaiyun.com/xc765926174/article/details/45227609