h5实现扫一扫功能_taro实现微信扫一扫功能

公司一个项目是内网，要实现扫一扫功能，taro扫码功能只能在微信公众号才有效，做的过程中也遇到各种坑，现在在这里总结一下：

第一步：

先安装微信jdk依赖：

npm install weixin-js-sdk -S

安装好后在需要调取扫一扫的页面引入或者全局引入：

第二步：

去微信公众平台注册一个测试号https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

使用微信jdk只需要配置安全域名就行了，其他的不用配置

本地测试，需要做内网穿透，这里用的是natapp，把你的前端地址映射出来：比如你前端地址是127.0.0.1:8888，用natapp映射出来的是http://vwb627.natappfree.cc，只需要把测试号的安全域名设置成http://vwb627.natappfree.cc即可：

第三步：

接下来就是去后端拿签名了，后端代码官网有示例，里面有php,node,java，这里值得注意的是：

后端获取签名的链接url，必须是前端的地址，并且最后要带“/”:

所以这个url要么前端获取后给后端，要么后端去获取：

比如前端调取扫码的url如下：

http://vwb627.natappfree.cc/#/pages/retrospective/index

那么传给后端的url应该为http://vwb627.natappfree.cc/，千万要注意，最后要有“/”，不然一直会配置不成功，我之前一直卡在这里，是没有仔细看官网的后果，前端代码具体如下：

至此，微信jdk本地调试流程以及taro开发H5使用微信扫一扫就完了