如何调用微信扫一扫（手把手教你调用微信扫一扫！三分钟包会）
如何用微信扫，教你叫微信扫！三分钟一揽子会议
这是我在微信官方账号的之一次开发。我以为直接复制粘贴微信官方文档就好了，我没有 万万没想到，我太天真了，又爬进了一个坑！It 这么简单的一件事，花了一个下午，所以写了这篇文章，希望能帮到大家！
之一步引入 weixin-js-sdk
模式一静态html直接引入html文件，使用脚本引入
脚本src= https://res2.wx.qq.com/open/js/jweixin-1.6.0.js/脚本模式vue的单页//Script src= ；3359res2.wx.qq.com/open/js/jweixin可以进入主入口文件index.html。
//安装npm安装weixin-js-sdk //从 微信- -SDK ；第二步权限验证配置.
Wx.config({ debug: true，//开启调试模式，所有被调用API的返回值都会在客户端预警出来。如果想查看进来的参数，可以在pc端打开，参数信息会通过日志打出来，日志只会在pc端打印出来。AppId:xxxx //必填，微信官方账号 的独特标志timest: xx //必需，nonce str : xx 对于签名生成，//必需，随机字符串签名3360 xx 对于签名生成，//必需， API列表3360[ ；时间戳，非中心，签名重要信息，请根据自己的微信官方账号信息获取。需要注意的是，调试时设置为true会自动弹出配置成功或失败的信息，可以用于调试。
第三步调用扫一扫接口
我们需要按钮，点击事件开始调用代码扫描界面，比如
scane method(){ var ua=navigator . user agent . to lower case()var is weixin=ua . index of( ；微信使 ) !==-1如果(！IsWeixin){ alert( ；扫描前请使用微信打开连接 )} window . wx . scan QR code({ need result : 1，//默认值为0，扫描结果由微信处理，1直接返回扫描结果，ScanType 3360[ ；二维码和。 条形码 ]，//可以指定扫描二维码还是一维码。两者默认都有success: function (res) {//扫码成功，跳转到二维码的指定页面(res.resultStr是扫码返回的结果)//location . href=RES . resultstr；var scan=RES . resultstr alert(scan)} }，error : function(RES){ if(RES . errmsg . index of( ；函数不存在。)0){ alert( ；当前版本太低，请升级。)}}}做了判断，只查。
var is weixin=ua . index of( ；微信使 ) !==-1如果(！IsWeixin){ alert( ；请使用微信打开连接，然后才能使用扫描 )}第四步真机测试
声明一下，我的项目是vue的一页。
真机测试，已提示
errMsg:config:invalid签名无效
It 中文叫无效签名。
搜索的原因是我的签名和官方微信js接口签名验证工具得到的数据不一样。很明显，获取的签名有问题，是我的url配置和前端接口的url不一致造成的。
第五步苹果手机测试
苹果手机真机测试，提示错误信息是
权限值正在脱机验证
翻译成中文权限值正在离线验证。
该错误的原因是config没有正确执行。
我接着检查签名问题，发现后台界面字段写错了，想哭。简而言之，签名信息有误。
第六步安卓正常，苹果点击无反应
用安卓测试的时候，竟然好了，完美展示扫码结果，以为要好了。使用 ios 测试的时候，竟然发现点击的时候没有任何反应。
找了半天原因，是因为 window.location.href 不同造成的。
alert(window.location.href)
测试结果
安卓https://hp..net/
IOShttps://hp..net//
IOS 手机就是因为 url 与签名配置处的 url 不同，所以导致 config 执行失败。究其原因是因为我的 vue-router 是 hash 模式。
解决方案把我的 hash 模式换成 history 模式。记得后台也需要配置 nginx 。
第七步IOS 扫码无反应
当 IOS 能调起接口的那一刻，我以为要成功了，哪知道它就是要与 安卓 与众不同，扫码之后没有任何反应，如果你快速地连续多扫几次就会出现结果。
你就说要命不？网上查找了半天，看见有的人说有延时，想干脆加个延时算了。
let isAndriod = ua.indexOf(#39andriod#39) !== -1window.wx.scanQRCode({ needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果， scanType: [#39qrCode#39, #39barCode#39], // 可以指定扫二维码还是一维码，默认二者都有 success: function (res) { // 扫码成功，跳转到二维码指定页面（res.resultStr为扫码返回的结果） // location.href = res.resultStr var scan = res.resultStr if (isAndriod) { _this.$router.push({ path: #39/exam_car#39, query: { id: scan } }) } else { setTimeout(() =gt { _this.$router.push({ path: #39/exam_car#39, query: { id: scan } }) }, 500) } }, error: function (res) { if (res.errMsg.indexOf(#39function_not_exist#39) gt 0) { alert(#39当前版本过低，请进行升级#39) } },})
果然加了延时之后就好了。
第八步扫码结果处理
可能存在问题
1、iOS设备扫码正常，Android设备扫码后没反应2、Android设备扫码正常，iOS设备扫码后没反应
原因微信开发文档并没有说清楚，其实在微信后台可能是维护了2个接口， 或者是对设备类型进行了区别，在回调函数中返回的结果封装对象并不是同一个， 所以这要求我们也进行相应的处理， 不然就会出现上面这种默认奇妙的问题。
IOS 返回结果
{ err_Info: #39success#39， resaultStr: #39XX#39, errMsg: #39scanQRCode:ok#39 }
Android 结果
{ resaultStr: #39XX#39, errMsg: #39scanQRCode:ok#39 }
第九步修改路由
本以为 苹果安卓手机都能够正常扫码，没问题了。领导换需求了，之前是扫码放到外边，可以匿名扫。现在要修改成登录之后才可以扫码。
我就把路由修改了一下，先在登录页登录成功之后，再进入扫码页，后台也同步修改了 url 地址，修改完测试发现
安卓的一切正常。
苹果手机坏了！
奔溃了，看看错误提示noPermissionJsApi:[],errMsg:#34config:ok#34。
确定之后有一个错误提示。
errMsg:scanQRCode:the perssion value is offline verifying
一顿百度猛如虎，半天原地打转转！
有前边一次经验教训，我就又去找地址的原因。发现是竟然 $router.push 的跳转影响了我的 url ，在 IOS 上的 push 跳转不能写入浏览器的地址栏，安卓可以，导致安卓和 ios 跳转之后的地址不同，所以 ios 失败了。
解决办法
$router.push(#39/i#39) //修改成了 window.location = window.location.protocol + #39//#39 + window.location.host + #39/i#39
此时就正常运行了。这下满足项目要求了，不会再出什么幺蛾子了！
微信官方开发文档https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/ -SDK.html#4
手把手教你微信扫一扫功能 微信扫一扫背后的技术