vue项目 微信公众号调用weixin-js-sdk 实现 微信扫一扫

该方法需引入微信js-sdk ，先npm安装

npm install weixin-js-sdk

html

<div class="login_div">
<mt-button id="wxsys" type="primary" v-on:click="sys_click()">{{qsa}}</mt-button>
</div>

js代码

import wx from 'weixin-js-sdk'
export default {
data(){
return {
qsa:'qwe'
}
},
methods : {
sys_click : function()
{
this.qsa = 'qqq'

this.$axios({
method: 'post',
url: 'xxxxxx',

}).then((res)=>{
// 认证
wx.config({
debug: true, // 开启调试模式,
appId: res.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
timestamp: res.timestamp, // 必填，生成签名的时间戳
nonceStr: res.nonceStr, // 必填，生成签名的随机串
signature: res.signature,// 必填，签名，见附录1
jsApiList: ['scanQRCode','checkJsApi'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
})

// 错误时
wx.error(function (res) {
alert("出错了：" + res.errMsg);//这个地方的好处就是wx.config配置错误，会弹出窗口哪里错误，然后根据微信文档查询即可。
});

// 成功时
wx.ready(function () {
wx.checkJsApi({
jsApiList: ['scanQRCode'],
success: function (res) {

}
});

wx.scanQRCode({
needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
success: function (res) {
var result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
alert("扫描结果："+result);
window.location.href = result;//因为我这边是扫描后有个链接，然后跳转到该页面
}
});

});
}

},
created(){

},
mounted(){

}

}