vue公众号h5掉微信扫一扫三步搞定
程序员文章站
2022-05-02 12:26:20
配合https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 官方文档...
vue公众号h5掉微信扫一扫(三部曲)
配合官方文档https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115 ,了解简单流程
一.第一步绑定域名,就是你在公众号登录之后要设置域名,token令牌等,还有白名单,这个叫后端弄好先。
二.安装js-sdk的或者weixin-jsapi包,这有个坑点就是项目如果是vue你要用weixin-jsapi,用js-sdk会有别的坑问题
(用npm 或yarn安装npm install weixin-js-sdk --save 或者npm install weixin-jsapi --save)import wx from “weixin-jsapi” 在main.js里面引入;
三.配置微信wx.config文件,调用官方api就OK了(代码可复制,图片上有注意细节)
// 设备二维码掉摄像头解析
EquCode() {
this.wxScanCode();
},
async wxScanCode() {
let result = await apiWxConfig({
url: window.location.href.split("#")[0], // 获取当前扫码界面的url,url后面不能携带任何参数及#号,所以在此进行分割
});
console.log("result", result);
console.log("rresult.data.timestamp", result.data.timestamp);
if (result.code == 200) {
// 后端返回的参数
var timestamp = result.data.timestamp;
var noncestr = result.data.nonceStr;
var signature = result.data.signature;
var appId = result.data.appId;
console.log("rresult.data.timestamp", result.data.timestamp);
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
// debug : true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: appId, // 必填,公众号的唯一标识
timestamp: timestamp, // 必填,生成签名的时间戳
nonceStr: noncestr, // 必填,生成签名的随机串
signature: signature, // 必填,签名,见附录1
jsApiList: ["checkJsApi", "scanQRCode", "chooseWXPay"], // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
}); // 错误时
wx.error(function (res) {
alert("出错了:" + res.errMsg); //这个地方的好处就是wx.config配置错误,会弹出窗口哪里错误,然后根据微信文档查询即可。
});
let tant = this;
wx.ready(function () {
wx.checkJsApi({
jsApiList: ["scanQRCode"],
success: function (res1) {
wx.scanQRCode({
needResult: 1, // 默认为0,扫描结果由微信处理,1则直接返回扫描结果,
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是一维码,默认二者都有
success: function (res) {
var result = res.resultStr;
// 当needResult 为 1 时,扫码返回的结果
// location.href=res.resultStr;//扫描结果传递到的处理页面,跳转到这个页面
// alert(result);
// location.href=res.resultStr;//扫描结果传递到的处理页面,跳转到这个页面
// sessionStorage.setItem('saomiao_result',result);
//其它网页调用二维码扫描结果:
// var result = sessionStorage.getItem("saomiao_result");
setTimeout(() => {
if (result != "" && result != undefined) {
setToken("No", result);
tant.scanCode = getToken("No");
} else {
alert("未扫到编号");
}
}, 2000);
},
error: function (res) {
alert("出错了", +res);
console.log(res);
},
});
},
});
});
} else {
this.$toast.fail("js-sdk,微信配置失败");
}
},
希望对各位会有帮助吧,大家取其精华,去其糟粕哈,写博客也写得不是很好,大家多包含
本文地址:https://blog.csdn.net/weixin_45575933/article/details/109355036