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
                    }  
                }  
            }

 




posted @ 2022-09-14 17:18  奔跑吧前端(李钊)  阅读(4309)  评论(0编辑  收藏  举报