微信JS-SDK介绍
官方文档地址:mp.weixin.qq.com/wiki?t=reso…
微信JS-SDK使用,以扫一扫为例:
1.在需要调用JS接口的页面引入如下JS文件,(支持https):
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: 1, // 默认为0,扫描结果由企业微信处理,1则直接返回扫描结果,
scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码(一维码),默认二者都有
success: function(res) {
const result = res.resultStr; //返回结果
},
error: function(res) {
if (res.errMsg.indexOf("function_not_exist") > 0) {
alert("版本过低请升级");
}
}
});
}
复制代码