手把手教你调用微信扫一扫,三分钟包会
这是我第一次公众号开发,本以为看着微信官方文档直接复制粘贴就好了,没想到是我天真了,爬过一个坑又入一个坑!就这么一个简单的事,竟然搞了一下午,所以写了这篇文章,希望可以帮到大家!
第一步:引入 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 模块
或者
// 安装
npm install weixin-js-sdk //引入
import wx from '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') !== -1if (!isWeixin) {alert('请用微信打开连接,才可使用扫一扫')}window.wx.scanQRCode({needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有success: function (res) {// 扫码成功,跳转到二维码指定页面(res.resultStr为扫码返回的结果)// location.href = res.resultStr;var scan = res.resultStralert(scan)}},error: function (res) {if (res.errMsg.indexOf('function_not_exist') > 0) {alert('当前版本过低,请进行升级')}},})
}
做了一个判断处理,检查只有微信浏览器,其他浏览器不可以调用:
var isWeixin = ua.indexOf('micromessenger') !== -1if (!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') !== -1
window.wx.scanQRCode({needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有success: function (res) {// 扫码成功,跳转到二维码指定页面(res.resultStr为扫码返回的结果)// location.href = res.resultStr;var scan = res.resultStrif (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
手把手教你调用微信扫一扫,三分钟包会相关推荐
- asp源码爱好者福利,asp调用微信扫一扫代码,用asp写的调用微信内置扫一扫功能源码下载
接到一个用户的需求,要在他的手机版网页里实现扫一扫功能,扫出他的产品编号入库,这太简单了,花了几分种时间给他实现一下. 微信扫一扫必须使用微信内置浏览器访问此页面才能查看效果: 程序功能: 通过微信J ...
- 实例:用C#.NET手把手教你做微信公众号开发(20)--使用微信支付线上收款:jsapi方式
在做线上.线下销售时,可以使用微信便捷支付,通过微信公众号收款有很多种收款方式,如下图: 今天我们来讲一下jsapi支付,场景就是在微信内打开某个页面,完成在线支付,同样一个网页,使用微信打开就是js ...
- 实例:用C#.NET手把手教你做微信公众号开发(21)--使用微信支付线上收款:H5方式
在做线上.线下销售时,可以使用微信便捷支付,通过微信公众号收款有很多种收款方式,如下图: 今天我们来讲一下H5场景支付,使用手机浏览器打开就是H5方式,最常见的推广是短信内置链接,这种场景需要调用微信 ...
- 不求人,手把手教你学会微信WIFI!
前言:好吧,这是作者开博的第一篇文章,在如今朋友圈文章泛滥的时代,再看过了那么多"心灵鸡汤"."技术神贴"之后,作者也在思考,自己能不能写点什么,也许过上一百年 ...
- 手把手教你做微信公众号
手把手教你做微信公众号 微信公众号可以通过注册的方式来建立. 1.进入微信公众平台 首先,在浏览器中搜索微信公众号,网页第一个就是,如下图所示,我们点进去. 2.注册微信平台账号 进入官网之后,如下图 ...
- 手把手教你制作微信十周年专属勋章头像
本文图文手把手教你制作微信十周年专属勋章头像. 首先扫码打开"微信十年 时空隧道"小程序,微信浏览的长按可识别小程序码. 打开小程序后先不用操作,也不用担心以为中毒了乱刷屏
- 手把手教你开发微信小程序中的插件
继上次 手把手教你实现微信小程序中的自定义组件 已经有一段时间了(不了解的小伙伴建议去看看,因为插件很多内容跟组件相似),今年3月13日,小程序新增了 小程序**「插件」 功能,以及开发者工具新增 「 ...
- 手把手教你逆向微信之朋友圈小视频转发(下)
接上篇<手把手教你逆向微信之朋友圈小视频转发(上)> 代码编写及重签名打包安装 (下篇) 小视频的转发支持4个功能,转发至朋友圈.转发至好友.保存到本地相册.拷贝小视频链接到粘贴板.如果小 ...
- 手把手教大家搭建微信公众号查题功能
手把手教大家搭建微信公众号查题功能 本平台优点: 多题库查题.独立后台.响应速度快.全网平台可查.功能最全! 1.想要给自己的公众号获得查题接口,只需要两步! 2.题库: 题库:题库后台(点击跳转) ...
- android 自动化 微信,C#手把手教你玩微信自动化
原标题:C#手把手教你玩微信自动化 转自:初久的私房菜 cnblogs.com/MrChuJiu/p/13959383.html 介绍 本文主要讲的内容是 C# + Appium 自动化玩微信. Ap ...
最新文章
- 如何在 Windows 中检查计算机正常运行时间
- 两个晶体管组成的混沌电路
- linux安装python3.6_Linux环境下安装python3.6
- Bootstrap全局css样式_辅助类
- DP~数塔(hrbustoj1004)
- Python之模块与包(下)
- 静态页面 调用php数据,静态html页面如何更新点击数
- 三、Oracle学习笔记:DDL数据定义语句
- HTML5基础知识习题 一
- php网上商城系统下载,php网上商城系统 v3.0 rc6
- xnb转png_xnb exporter插件下载
- 职场:因抢一个月饼,惨遭阿里开除,如今他把生活过成这样
- 深信服Python笔试
- 微信、支付宝分账~进行中
- python中怎么打印出表格_Python 表格打印
- IPFS 深入浅出:从《黑镜》说起
- [SMOJ2116]诺诺的队列
- Spark数据分析之第4课
- jupyterlab:Failed to load the jupyterlab-git server extension问题如何解决?
- 大二芯TS、大三芯TRS及卡侬头音频接口的使用