介绍
这篇文章主要讲解了vue如何实现微信扫一扫功能,内容清晰明了,对此有兴趣的小伙伴可以学习一下,相信大家阅读完之后会有帮助。
第一步:安装weixin-js-sdk和jquery包<代码> npm安装weixin-js-sdk jquery代码
第二部:配置<代码>天气。配置>
代码如下
从“进口wx weixin-js-sdk”;
从“进口美元jquery”;
goSao () {//这里【url参数一定是去参的本网址】,请求后端接口换取签名//(兼容安卓和ios)
让url=按怠?
让ua=navigator.userAgent.toLowerCase ();
如果(ipod/iphone ipad | |/test (ua)) {
这一点。newUrl=window.location.href.split (“#”) [0];
}else if (/android/test (ua)) {
这一点。newUrl=window.location.href;
}//传值为了去掉#
$ . get(“后台需要的路径=$ {this.newUrl}’,
函数(响应){
wx.config ({//开启调试模式,调用的所有api的返回值会在客户端提醒出来,若要查看传入的参数,可以在pc端打开,参数信息会通过日志打出,仅在pc端时才会打印。
调试:假的,//必填,公众号的唯一标识
appId: response.data.appId,//必填,生成签名的时间戳
时间戳:response.data.timestamp,//必填,生成签名的随机串
nonceStr: response.data.nonceStr,//必填,签名
签名:response.data.signature,//必填,需要使用的JS接口列表,所有JS接口列表
jsApiList (“scanQRCode"):
}）;
console.log(响应)
}
);
wx.error(函数(res) {
alert(“出错了:“+ res.errMsg);//这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
}）;
让_t=这
wx。准备好(函数(){
wx.checkJsApi ({
jsApiList: [& # 39; scanQRCode& # 39;],
成功:函数(res) {
}
}）;
wx.scanQRCode ({
needResult: 1、//默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: [“qrCode"]//可以指定扫二维码还是一维码,默认二者都有
成功:异步(res)=祝辞{
结果var=res.resultStr;//当needResult为1时,扫码返回的结果
alert(结果)
}
}）;
}）;
}, 已测,可以使用
注:只能微信浏览器使用,其他浏览器不可
看完上述内容,是不是对vue如何实现微信扫一扫功能有进一步的了解,如果还想学习更多内容,欢迎关注行业资讯频道。
