微信H5网页调用扫一扫功能(vue)
微信H5网页调用扫一扫功能(vue)
·
// 扫一扫按钮
<button type="button" @click="onScan">扫一扫</button>
// 引入weixin-js-sdk
import wx from 'weixin-js-sdk';
//点击上传扫描二维码
onScan() {
this.getCofig();
const that = this;
wx.ready(function() {
wx.checkJsApi({
// 需要使用的JS接口列表,在这里只需要用到scanQRCode
jsApiList: ['scanQRCode'],
success: function(res1) {
if (res1.checkResult.scanQRCode) {
// 当scanQRCode可使用时
wx.scanQRCode({
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ['qrCode', 'barCode'], // 可以指定扫二维码还是一维码,默认二者都有
success: function(res2) {
let result = res2.resultStr;
console.log(res2.resultStr, '扫描的结果~');
window.location.href = result;
// 也可以对扫描结果处理过之后再使用
// 比如可以这样使用:
// window.location.href = result.split('?')[0] + '/detail?' + result.split('?')[1]
},
error: function(response) {
that.$toast(response);
},
});
}
},
});
});
},
getCofig() {
const that = this;
let url = '';
let ua = navigator.userAgent.toLowerCase();
if (/iphone|ipad|ipod/.test(ua)) {
url = window.location.href.split('#')[0];
} else if (/android/.test(ua)) {
url = window.location.href;
}
console.log(window.location.href, '这个是获取当前扫描的完整url~');
// GetWeixinScan 后端提供
let WxAuthUrl = GetWeixinScan + '?url=' + url;
this.$get(WxAuthUrl, {}, header)
.then((res) => {
if (res.data.code == 0) {
// console.log(res.data.data, '这个是获取调用扫描返回的参数?~~');
//微信的配置~~
that.wxConfig(
res.data.data.appId,
res.data.data.timestamp,
res.data.data.nonceStr,
res.data.data.signature
);
} else {
that.$toast(res.data.message);
}
})
.catch(function(error) {
console.log(error);
});
},
//wx.config的配置
wxConfig(appId, timestamp, nonceStr, signature) {
wx.config({
debug: false, // 开启调试模式,
appId: appId, // 必填,企业号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: nonceStr, // 必填,生成签名的随机串
signature: signature, // 必填,签名
jsApiList: ['scanQRCode', 'checkJsApi'], // 必填,需要使用的JS接口列表
});
wx.error(function(res) {
alert('出错了:' + res.errMsg); //wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
});
},
更多推荐
已为社区贡献2条内容
所有评论(0)