微信公众号开发 - 微信JS-SDK使用(vue)

微信JS-SDK介绍
官方文档地址：mp.weixin.qq.com/wiki?t=reso…
微信JS-SDK使用，以扫一扫为例:
1.在需要调用JS接口的页面引入如下JS文件，（支持https）：
res.wx.qq.com/open/js/jwe…
2.js-sdk的签名权限,这个权限是由后台提供的,前端只需要把签名权限注入到wx.config中就可以了，下面是我们项目的写法，我对请求进行了封装,参数拼接用了qs插件
wxConfig([ //调用获得签名和授权的方法
“checkJsApi”,
“scanQRCode”,
],
{
success: data => {
alert(“微信验证权限成功”);
alert(data);
}
}
);

export const wxConfig = async (jsApiList, { success }) => {
const data = {
url: location.href.split(’#’)[0], //当前路径
appType: appType //这个参数是我们项目后台需要的
}
const url = ‘/wx/getJsSdkPermission?’ + qs.stringify(data); //获取签名
await http.get({ url, data }, {
success: (data) => {
wx.config({
beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: “XXXXXXXXXX”, // 必填，企业号的唯一标识，此处填写企业号corpid
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.noncestr, // 必填，生成签名的随机串
signature: data.sign, // 必填，签名，见附录1
jsApiList // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});
wx.ready(function(data) {
alert(‘微信权限成功’);
success && success(data);
// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
})
wx.error(function(res){
console.log(res);
});
}
});
}
复制代码这里需要注意的地方debug在上线后要改为false,jsApiList里要填你要使用的接口,不然没有作用，我现在用scanQRCode接口，授权成功后，才可以使用api里的方法
3.给扫一扫按钮添加点击事件,调用 wx.scanQRCode方法，
注意：因为这块是需要用户触发的，所以不必放在wx.ready()方法中，若需要页面加载时就执行的话，如分享接口，就必须放在wx.ready()方法中执行
handelScan() { //调起企业微信扫一扫接口
wx.scanQRCode({
desc: “scanQRCode desc”,
needResult: 0, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，
scanType: [“qrCode”, “barCode”], // 可以指定扫二维码还是条形码（一维码），默认二者都有
success: function(res) {
alert(“调用成功”);
},
error: function(res) {
if (res.errMsg.indexOf(“function_not_exist”) > 0) {
alert(“版本过低请升级”);
}
}
});
}