uniapp开发企业微信h5应用时wx或jWeixin无法使用的问题,及解决方案
方案一
1.首先你开发企业微信h5必定使用官方的sdk如下
<script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script>
2.当然在uniapp中可以在根目录下的 template.h5.html 引入相关sdk,其中template.h5.html这个需要在manifest.json中的h5中配置index.html的模板路径
3.由于uniapp在转H5的过程中在内部编译的时候会将全局变量wx给用掉来适应微信公众号,wx对象就无法使用了就想到可以使用jWeixin这个对象来替代(企业微信的sdk返回了两个对象一个wx一个jWeixin)。但是在我们实际的使用的时候会发现jWeixin这个对象在ios中居然不生效无法获取
4.解决问题如下,在main.js中添加如下代码
if (uni.getSystemInfoSync().osName=='android') { Vue.prototype.lzWeixin=jWeixin uni.lzWeixin=jWeixin }else{ Vue.prototype.lzWeixin=wx uni.lzWeixin=wx }
5.使用方式
function getJsapiTicket(jsApiList){ let local = window.location.href.split('#')[0] console.log('local',local); uni.$u.get(store.getters.api.GLOBAL_applet_signature,{url:encodeURIComponent(local)}).then(res=>{ if(res.code==200&&res.data){ let config=res.data.config uni.lzWeixin.config({ beta: true,// 必须这么写,否则wx.invoke调用形式的jsapi会有问题 debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: qywx.appId, // 必填,企业微信的corpID timestamp:config.timestamp, // 必填,生成签名的时间戳 nonceStr:config.nonceStr, // 必填,生成签名的随机串 signature:config.signature,// 必填,签名,见 附录-JS-SDK使用权限签名算法 jsApiList:['agentConfig'].concat(jsApiList) // 必填,需要使用的JS接口列表,凡是要调用的接口都需要传进来 }); uni.lzWeixin.ready(function(){ let agentConfig=res.data.agentConfig console.log('初始化成功--正在注入AgentConfig',agentConfig); // uni.lzWeixin.agentConfig({ // corpid: 'ww952f1f2b6c40d419', // 必填,企业微信的corpid,必须与当前登录的企业一致 // agentid: '1000015', // 必填,企业微信的应用id (e.g. 1000247) // timestamp:agentConfig.timestamp, // 必填,生成签名的时间戳 // nonceStr:agentConfig.nonceStr, // 必填,生成签名的随机串 // signature:agentConfig.signature,// 必填,签名,见附录-JS-SDK使用权限签名算法 // jsApiList, //必填,传入需要使用的接口名称 // success: function(res) { // // 回调 // console.log(res); // }, // fail: function(res) { // if(res.errMsg.indexOf('function not exist') > -1){ // alert('版本过低请升级') // } // } // }); }) uni.lzWeixin.error(function(res){ console.error('error',res); uni.showToast({ title: res, icon:"none" }); }); } }) }
方案二
使用npm i wecomjsdk
npm i wecomjsdk
使用
import jWeixin from 'wecomjsdk' Vue.prototype.lzWeixin=jWeixin
方案三
由于使用npm i wecomjsdk后 通讯录展示组件将无法显示敏感信息,所有弃用
使用在app.vue中引入官方的cdn 在onLaunch中使用下面方法
addScript() { const that = this window.wx = null const script1 = document.createElement('script') script1.type = 'text/javascript' script1.src= 'https://res.wx.qq.com/open/js/jweixin-1.2.0.js' document.head.appendChild(script1) script1.onload = function() { const script2 = document.createElement('script') script2.type = 'text/javascript' script2.src= 'https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js' document.head.appendChild(script2) script2.onload = function() { Vue.prototype.lzWeixin=wx uni.lzWeixin=wx } } }