一、引入
? ? 1、?在新建的uniapp 项目根目录下面创建一个html文件,我这里直接叫index.html;然后在manifest.json中的h5配置中,配置这个html文件。
1.1、在index.html中引入(我就用这种方式,其他没有)
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
?2、初始化sdk配置?
? ? ? 这里需要特别注意的是在企业微信官方文档里调用api的前缀都是wx,但是在uniapp框架已经内置了wx这个对象,这个给开发微信小程序使用的,但是在这里使用的话就会有冲突,所以官方提供了“jWeixin”’对象;但是在我开发过程中发现,在Android端用“jWeixin”’,的确没问题,但是ios就不起作用了,经过我测试才发现还是得用“wx”才行,原因嘛,还没找到!!!,为了方便我直接写在main,js。
if (/(Android)/i.test(navigator.userAgent)) {
Vue.prototype.sdk=jWeixin
}
if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) {
Vue.prototype.sdk=wx
}
?
?2.1、封装配置:
initsdk() {
let url = window.location.href.split("#")[0]
uni.request({
url: "与后端协商好的请求地址"+"?url="+encodeURI(url),//可能还需要其他参数,请自己与后端协商,这里是为了获取的各种配置项,后端都会处理好,前端只需要使用就可以了
method: "GET",
success: (res) => {
if (res.data.Status == true) {
let WXConfig = res.data.ResData
this.sdk.config({
beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: WXConfig.appId, // 必填,企业微信的corpID
timestamp: WXConfig.timestamp, // 必填,生成签名的时间戳
nonceStr: WXConfig.nonceStr, // 必填,生成签名的随机串
signature: WXConfig.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
jsApiList: ['scanQRCode'] // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来
});
this.sdk.ready(function(re) {
console.log('re', re)
// config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});
this.sdk.error(function(err) {
console.log('err', err)
// config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});
} else {}
},
fail: (err) => {
console.log(err)
}
});
},
2.2、在需要的页面调用封装好的方法后,就可以调用相关的apil ,
官网链接:https://open.work.weixin.qq.com/api/doc/90001/90144/90547
注意:
1,要使用的接口,一定要提前配置好!
2,配置好后,请重新运行项目,不然不起作用,反正我这里是这样的!
?
|