首页 > 技术文章 > vue 实现扫码,获取信息

xzhce 2020-07-02 09:12 原文

------------恢复内容开始------------

vue 中安装

cnpm install --save weixin-js-sdk

 

 

------------恢复内容结束------------

sao() {
let that = this;
// 点击扫码开始执行函数// 向后台请求
getWxConfig({
orgId: sessionStorage.getItem("orgId") || "1",
url: window.location.href.split("#")[0] // url必须是本页面的地址
}).then(res => {
if (res.data.code == 1) {
let data = res.data.data;
var tiem = data.timestamp;
wx.config({
debug: false,
appId: data.appId, // 必填,公众号的唯一标识
timestamp: data.timestamp, // 必填,生成签名的时间戳
nonceStr: data.nonceStr, // 必填,生成签名的随机串
signature: data.signature, // 必填,签名
jsApiList: ["scanQRCode", "checkJsApi"] // 必填,需要使用的JS接口列表
});
wx.error(function(res) {
alert("出错了:" + res.errMsg); //这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
});

wx.ready(function() {
// config信息验证成功后会执行ready方法,所有接口调用都必须在config接口获得结果之后
// config 是一个客户端的异步操作,所以如果需要在页面加载时调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行.对于用户触发是才调用的接口,则可以直接调用,不需要放在ready函数中
wx.checkJsApi({
// 判断当前客户端版本是否支持指定JS接口
jsApiList: ["scanQRCode"],
success: function(res) {
// 以键值对的形式返回,可用true,不可用false。如:{"checkResult":{"scanQRCode":true},"errMsg":"checkJsApi:ok"}
if (res.checkResult.scanQRCode === true) {
wx.scanQRCode({
// 微信扫一扫接口
desc: "scanQRCode desc",
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function(res) {
if (res.resultStr.indexOf(",") > -1) {
that.patientCode = res.resultStr.split(",")[1];
} else {
that.patientCode = res.resultStr;
}
}
});
} else {
alert("抱歉,当前客户端版本不支持扫一扫");
}
},
fail: function(res) {
// 检测getNetworkType该功能失败时处理
alert("检测getNetworkType该功能失败" + res);
}
});
});
/* 处理失败验证 */
wx.error(function(res) {
// config 信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名
alert("配置验证失败: " + res.errMsg);
});
}
});
},

推荐阅读