第一步:引入 weixin-js-sdk

办法1:静态 html 引入

直接在 html 文件内,利用 script 引入:

<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>办法二:vue 单页面

// 可以在主入口文件 index.html 内引入<script src="https://res2.wx.qq.com/open/js/jweixin-1.6.0.js"></script>// 利用页面通过 window.wx 办法访问 wx 模块

或者

html调用微信扫一扫手把手教你挪用微信扫一扫三分钟包会 Python

// 安装npm install weixin-js-sdk //引入import wx from &#39;weixin-js-sdk'

第二步:权限验证配置

wx.config({ debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: 'xxxx', // 必填,公众年夜众号的唯一标识 timestamp: 'xx', // 必填,天生署名的韶光戳 nonceStr: 'xx', // 必填,天生署名的随机串 signature: 'xx',// 必填,署名 jsApiList: ['scanQRCode'] // 必填,须要利用的JS接口列表});

timestamp,nonceStr,signature 主要信息请根据自己的"大众号信息去获取。
须要把稳的是 debug 调试的时候,设置为 true ,会自动弹出配置成功或失落败信息,调试时可以借助它。

第三步:调用扫一扫接口

我们在须要的按钮处,点击事宜处开始调用扫码接口,如:

scaneMethod() { var ua = navigator.userAgent.toLowerCase() var isWeixin = ua.indexOf('micromessenger') !== -1 if (!isWeixin) { alert('请用微信打开连接,才可利用扫一扫') } window.wx.scanQRCode({ needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有 success: function (res) { // 扫码成功,跳转到二维码指定页面(res.resultStr为扫码返回的结果) // location.href = res.resultStr; var scan = res.resultStr alert(scan) } }, error: function (res) { if (res.errMsg.indexOf('function_not_exist') > 0) { alert('当前版本过低,请进行升级') } }, })}

做了一个判断处理,检讨只有微信浏览器,其他浏览器不可以调用:

var isWeixin = ua.indexOf('micromessenger') !== -1 if (!isWeixin) { alert('请用微信打开连接,才可利用扫一扫') }

第四步:真机测试

先声明一下,我的项目是 vue 单页面。

真机测试的时候,一贯在提示:

errMsg:config:invalid signature

中文叫做署名无效。

查找缘故原由是由于我的署名获取来和官方 微信 js 接口署名校验工具获取来的数据不一样,很明显获取的署名有问题,是由于我的 url 配置和前端调起接口的 url 不一致造成的。

第五步:苹果手机测试

苹果手机真机测试,提示缺点信息为:

the permission value is offline verifying

翻译为中文:权限值正在脱机验证

这个缺点缘故原由是 config 没有精确实行。

又连续去检讨署名的问题,末了创造是后台接口字段写错了,欲哭无泪,总之还是署名信息缺点。

第六步:安卓正常,苹果点击无反应

用安卓测试的时候,竟然好了,完美展示扫码结果,以为要好了。
利用 ios 测试的时候,竟然创造点击的时候没有任何反应。

找了半天缘故原由,是由于 window.location.href 不同造成的。

alert(window.location.href)

测试结果:

安卓:https://hp..net/

IOS:https://hp..net//

IOS 手机便是由于 url 与署名配置处的 url 不同,以是导致 config 实行失落败。
究其缘故原由是由于我的 vue-router 是 hash 模式。

办理方案:把我的 hash 模式换成 history 模式。
记得后台也须要配置 nginx 。

第七步:IOS 扫码无反应

当 IOS 能调起接口的那一刻,我以为要成功了,哪知道它便是要与 安卓 分歧凡响,扫码之后没有任何反应,但是如果你快速地连续多扫几次就会涌现结果。

你就说要命不?网上查找了半天,瞥见有的人说有延时,末了想干脆加个延时算了。

let isAndriod = ua.indexOf('andriod') !== -1window.wx.scanQRCode({ needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果, scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有 success: function (res) { // 扫码成功,跳转到二维码指定页面(res.resultStr为扫码返回的结果) // location.href = res.resultStr; var scan = res.resultStr if (isAndriod) { _this.$router.push({ path: '/exam_car', query: { id: scan } }) } else { setTimeout(() => { _this.$router.push({ path: '/exam_car', query: { id: scan } }) }, 500) } }, error: function (res) { if (res.errMsg.indexOf('function_not_exist') > 0) { alert('当前版本过低,请进行升级') } },})

果真加了延时之后就好了。

第八步:扫码结果处理

可能存在问题:

1、iOS设备扫码正常,Android设备扫码后没反应2、Android设备扫码正常,iOS设备扫码后没反应

缘故原由:微信开拓文档并没有说清楚,其实在微信后台可能是掩护了2个接口, 或者是对设备类型进行了差异,总之在回调函数中返回的结果封装工具并不是同一个, 以是这哀求我们也进行相应的处理, 不然就会涌现上面这种默认奇妙的问题。

IOS 返回结果:

{ err_Info: 'success', resaultStr: 'XX', errMsg: 'scanQRCode:ok' }

Android 结果:

{ resaultStr: 'XX', errMsg: 'scanQRCode:ok' }

第九步:修正途由

本以为 苹果安卓手机都能够正常扫码,没问题了。
但是领导换需求了,之前是扫码放到外边,可以匿名扫。
现在要修正成登录之后才可以扫码。

我就把路由修正了一下,先在登录页登录成功之后,再进入扫码页,后台也同步修正了 url 地址,修正完测试创造:

安卓的统统正常。

苹果手机坏了!

奔溃了,看看缺点提示:noPermissionJsApi:[],errMsg:"config:ok"。

确定之后有一个缺点提示。

errMsg:scanQRCode:the perssion value is offline verifying

一顿百度猛如虎,半天原地打转转!

有前边一次履历教训,我就又去找地址的缘故原由。
末了创造是竟然 $router.push 的跳转影响了我的 url ,在 IOS 上的 push 跳转不能写入浏览器的地址栏,但是安卓可以,导致安卓和 ios 跳转之后的地址不同,以是 ios 失落败了。

办理办法:

$router.push('/i') //修正成了 window.location = window.location.protocol + '//' + window.location.host + '/i'

此时就正常运行了。
这下知足项目哀求了,不会再出什么幺蛾子了!

微信官方开拓文档:https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html#4