uniapp创建企微在ios端wx.config 以及wx.agentConfig问题的完美解决

分类：uni-app

uniapp

之前写过一篇解决的文章但是后续发现还是有那么一点问题就是ios 在调用 agentConfig的API 的时候会发现 agentConfig 找不到是 undefined。

https://developer.work.weixin.qq.com/community/article/detail?content_id=16288602254668494166

之前的文章，通过后学的摸索，终于完美解决了。

步骤一：创建项目

我们知道官方然我们在项目中需要建立一个 index.html 文件用于引入企微的SDK。我发现及时在index.html中引入了，uniapp在打包的时候还是会占用wx这个类，说明uniapp内部还是一个异步的过程。因此我们需要动态引入，而不是在index中引入。

<head>  
        <meta charset="utf-8">  
        <meta http-equiv="X-UA-Compatible" content="IE=edge">  
        <meta name="viewport"  
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">  
        <title>  
            <%= htmlWebpackPlugin.options.title %>  
        </title>  
        <script>  
            document.addEventListener('DOMContentLoaded', function() {  
                document.documentElement.style.fontSize = document.documentElement.clientWidth / 20 + 'px'  
            })  
            window.wx = null;  
        </script>  
        <link rel="stylesheet" href="<%= BASE_URL %>static/index.<%= VUE_APP_INDEX_CSS_HASH %>.css" />  
        <!-- 企业微信h5授权 config注入 -->  
        <!-- <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> -->  
        <!-- 调用 wx.agentConfig需要引入 jwxwork sdk -->  
        <!-- <script type="text/javascript" src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js"></script> -->  
        <!-- 用于调试所用 -->  
        <script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.3.0/vconsole.min.js"></script>  
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/mobile-detect@1.4.5/mobile-detect.min.js"></script>  
        <script type="text/javascript">  
            delete window.wx;   

        </script>  
<head>

因此在index中我们只引入 vconsole 就行了不要引入企微的SDK。后续我们通过动态引入

二：动态引入sdk 并注册

我们可以在工程中建立一个专门的企微的工具库，我的工程是放在一起的没有分开。你可以根据自己的逻辑来建立库我的库为 ESUtils.js 并将企微的方法全放在了 wxUntils中

我们动态引入SDK，动态引入

createdScript: function(callback) {  
            // window.wx = null;  
            let userInfo = ESUtils.ESDB.getLoginInfo(); //自己存的相关缓存  
            const script1 = document.createElement("script");  
            script1.setAttribute("type", "text/javascript");  
            script1.setAttribute("referrerpolicy", "origin");  
            script1.setAttribute("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.setAttribute("type", "text/javascript");  
                script2.setAttribute("referrerpolicy", "origin");  
                script2.setAttribute("src", "https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js");  
                document.head.appendChild(script2);  
                script2.onload = () => {  
                    callback && callback(userInfo)  
                }  
            }  
        },

注册 config


initJssdk: function(callback) {  
            this.createdScript((userInfo) => {  

                ESUtils.network.request({  
                    url: userInfo.server,  
                    data: {  
                        method: "Work_WXInitJSSDK", //初始化SDK  
                        userId:userInfo.userId,  
                        url:userInfo.url,  
                        cropId:userInfo.cropId  
                    },  
                    success: res => {  
                        if (res.data.response.code == 200) {  
                            let info = res.data.body;  //需要判断 ios 还是 安卓   
                            if (/(iPhone|iPad|iPod|iOS|macintosh|mac os x)/i.test(ESUtils.wxUntils.system)) {  
                                wx.config({  
                                    beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题  
                                    debug: false, // 开启调试模式  
                                    appId: info.appId, // 必填，企业微信的corpID  
                                    timestamp: info.timestamp, // 必填，生成签名的时间戳  
                                    nonceStr: info.nonceStr, // 必填，生成签名的随机串  
                                    signature: info.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法  
                                    jsApiList: [  
                                        'chooseImage',  
                                        'scanQRCode',  
                                        'previewImage',  
                                        'getLocation',  
                                        'previewFile',  
                                        'openLocation',  
                                        'uploadImage',  
                                        'getLocalImgData',  
                                        'downloadImage',  
                                        'startRecord',  
                                        'stopRecord',  
                                        'onVoiceRecordEnd',  
                                        'playVoice',  
                                        'pauseVoice',  
                                        'stopVoice',  
                                        'onVoicePlayEnd',  
                                        'uploadVoice',  
                                        'downloadVoice',  
                                        'translateVoice'  
                                    ]  
                                });  
                                wx.ready((res) => {  
                                    callback && callback(info);  
                                })  
                                wx.error((err) => {  

                                });  
                            }else{  
                                jWeixin.config({  
                                    beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题  
                                    debug: false, // 开启调试模式  
                                    appId: info.appId, // 必填，企业微信的corpID  
                                    timestamp: info.timestamp, // 必填，生成签名的时间戳  
                                    nonceStr: info.nonceStr, // 必填，生成签名的随机串  
                                    signature: info.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法  
                                    jsApiList: [  
                                        'chooseImage',  
                                        'scanQRCode',  
                                        'previewImage',  
                                        'getLocation',  
                                        'previewFile',  
                                        'openLocation',  
                                        'uploadImage',  
                                        'getLocalImgData',  
                                        'downloadImage',  
                                        'startRecord',  
                                        'stopRecord',  
                                        'onVoiceRecordEnd',  
                                        'playVoice',  
                                        'pauseVoice',  
                                        'stopVoice',  
                                        'onVoicePlayEnd',  
                                        'uploadVoice',  
                                        'downloadVoice',  
                                        'translateVoice'  
                                    ]  
                                });  
                                jWeixin.ready((res) => {  
                                    callback && callback(info);  
                                })  
                                jWeixin.error((err) => {  

                                });  
                            }  
                        }  
                    }  
                });  
            });   
        },  

注册 agentConfig  

//agentConfig必须是 config注册成功后才能 注册  
initJssdkAgent: function(callback) {          
            ESUtils.wxUntils.initJssdk((info) => {  
                if (/(iPhone|iPad|iPod|iOS|macintosh|mac os x)/i.test(ESUtils.wxUntils.system)) {  
                    setTimeout(()=>{  
                        wx.agentConfig({  
                            corpid: info.appId, // 必填，企业微信的corpid，必须与当前登录的企业一致  
                            agentid: info.angetId, // 必填，企业微信的应用id （e.g. 1000247）  
                            timestamp: info.timestamp, // 必填，生成签名的时间戳  
                            nonceStr: info.nonceStr, // 必填，生成签名的随机串  
                            signature: info.signature1, // 必填，签名，见附录-JS-SDK使用权限签名算法  
                            jsApiList: [  
                                "selectEnterpriseContact",  
                                "getContext",  
                                "getCurExternalContact",  
                                "openUserProfile",  
                                "getCurExternalChat",  
                                "selectExternalContact",  
                                "selectPrivilegedContact",  
                                "createChatWithMsg",  
                                "sendChatMessage",  
                                "openExistedChatWithMsg",  
                                "shareToExternalContact",  
                                "shareToExternalChat",  
                                "setShareAttr",  
                                "getShareInfo",  
                                "shareAppMessage", //自定义转发发到会话  
                                "shareWechatMessage", //自定义转发到微信  
                                "openEnterpriseChat"  
                            ],  
                            success: res => {  
                                callback && callback(res)  
                            },  
                            fail: err => {  
                                callback && callback(err)  
                            }  
                        });   
                    }, 1000);  
                }else{  
                    setTimeout(()=>{  
                        jWeixin.agentConfig({  
                            corpid: info.appId, // 必填，企业微信的corpid，必须与当前登录的企业一致  
                            agentid: info.angetId, // 必填，企业微信的应用id （e.g. 1000247）  
                            timestamp: info.timestamp, // 必填，生成签名的时间戳  
                            nonceStr: info.nonceStr, // 必填，生成签名的随机串  
                            signature: info.signature1, // 必填，签名，见附录-JS-SDK使用权限签名算法  
                            jsApiList: [  
                                "selectEnterpriseContact",  
                                "getContext",  
                                "getCurExternalContact",  
                                "openUserProfile",  
                                "getCurExternalChat",  
                                "selectExternalContact",  
                                "selectPrivilegedContact",  
                                "createChatWithMsg",  
                                "sendChatMessage",  
                                "openExistedChatWithMsg",  
                                "shareToExternalContact",  
                                "shareToExternalChat",  
                                "setShareAttr",  
                                "getShareInfo",  
                                "shareAppMessage", //自定义转发发到会话  
                                "shareWechatMessage", //自定义转发到微信  
                                "openEnterpriseChat"  
                            ],  
                            success: res => {  
                                callback && callback(res)  
                            },  
                            fail: err => {  
                                callback && callback(err)  
                            }  
                        });   
                    }, 1000);  
                }  

            });  
    },  

现在我们就已经解决了 初始化及注册的问题了，然后我们将我们需要用到的 API 进行二次封装  

//扫一扫的 API   
scanCode: function(callback) {  

                if (/(iPhone|iPad|iPod|iOS|macintosh|mac os x)/i.test(ESUtils.wxUntils.system)) {  
                    wx.scanQRCode({  
                        desc: 'scanQRCode desc',  
                        needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，  
                        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有  
                        success: function(res) {  
                            callback && callback(res);  
                        }  
                    });  
                }else{  
                    jWeixin.scanQRCode({  
                        desc: 'scanQRCode desc',  
                        needResult: 1, // 默认为0，扫描结果由企业微信处理，1则直接返回扫描结果，  
                        scanType: ["qrCode", "barCode"], // 可以指定扫二维码还是条形码（一维码），默认二者都有  
                        success: function(res) {  
                            callback && callback(res);  
                        }  
                    });  
                }  

        },  

//获取进入H5页面的入口环境  
getContext: function(callback) {  
            if (/(iPhone|iPad|iPod|iOS|macintosh|mac os x)/i.test(ESUtils.wxUntils.system)) {  
                wx.invoke('getContext', {}, (res) => {  
                    callback && callback(res)  
                });  
            }else{  
                jWeixin.invoke('getContext', {}, (res) => {  
                    callback && callback(res)  
                });  
            }     
        },  
// 选择外部联系人  
selectEContact: function(callback) {  
                if (/(iPhone|iPad|iPod|iOS|macintosh|mac os x)/i.test(ESUtils.wxUntils.system)) {  
                    wx.invoke('selectExternalContact', {  
                        "filterType": 0, //0表示展示全部外部联系人列表，1表示仅展示未曾选择过的外部联系人。默认值为0；除了0与1，其他值非法。在企业微信2.4.22及以后版本支持该参数  
                    }, (res) => {  
                        if (res.err_msg == "selectExternalContact:ok") {  
                            callback && callback(res, 1);  
                        } else {  
                            callback && callback(res, 0);  
                        }  
                    });  
                }else{  
                    jWeixin.invoke('selectExternalContact', {  
                        "filterType": 0, //0表示展示全部外部联系人列表，1表示仅展示未曾选择过的外部联系人。默认值为0；除了0与1，其他值非法。在企业微信2.4.22及以后版本支持该参数  
                    }, (res) => {  
                        if (res.err_msg == "selectExternalContact:ok") {  
                            callback && callback(res, 1);  
                        } else {  
                            callback && callback(res, 0);  
                        }  
                    });  
                }     

        },  

上述为一部分的API封装  

三：页面的使用  

做完所有的准备工作后，我们就需要进行项目的建立了 首先我们需要在页面中进行引入。  

index.vue。  

这个有一个非常重要的信息，我最开始 也是 这样然后再页面引入了但是我通过console 发现 当第一次进入的时候 在ios中无法识别出 agentConfig，一次偶然的时机我通过刷新一次页面后发现就能抽取出来，但是 动态引入只能引入一次，因此我决定更具这个情况进行曲线救国策略。  

在index.vue中  

onload(option){  
      var url = document.location.href;  
      let value = ESUtils.fn.getQueryString("eventType");  
      //每次进入index的我们让他自动刷新一次  
      if(url.indexOf("refreshed=") == -1){  
            var time = new Date();  
            window.location.href=url+"&refreshed="+time.getTime();  
      }           

      this.$nextTick(()=>{  

            let cropId = ESUtils.ESDB.getLoginInfo().cropId;  
            let userId = ESUtils.ESDB.getLoginInfo().id;  
            let url = window.location.href;  
            ESUtils.wxUntils.initJssdkAgent(res=>{  
                //引入并注册SDK  
                WWOpenData.bind(document.querySelectorAll('ww-open-data'));  
                ESUtils.wxUntils.getContext(result=>{  //这是判断是否 从快捷栏进入的 从而跳转指定的页面 并将入口的参数传过去  
                    var loginInfo = ESUtils.ESDB.getLoginInfo();  
                    if(url.indexOf("refreshed=") != -1){  
                        if(option.eventType && option.eventType != ""){  
                            var push = ESPush[option.eventType];  
                            var params = '?pushEventId=' + option.eventId + "&workWX=" + result.entry;    
                            let page = "";  
                            if(ESUtils.ESDB.getLoginInfo().isJava == 1){  
                                page = push.page_java;  
                            }else{  
                                page = push.page;  
                            }  
                                push && uni.navigateTo({  
                                    url: page + params  
                                });  
                            }  
                        }  
                    });  
                })                    
            });     
     }  

通过这样 我们就可以发现  在ios 和安卓中我们都可以进行兼容了 ，不会出现  wx.config 或者 wx.agnetConfig 为undefined的问题了。注意 其他的界面最好不要再调用 initJssdkAgent()方法了  
如果 其他的朋友还有更好的解决方法，可以多多交流

0 赞关注分享

0 个评论

要回复文章请先登录或注册

uniapp创建企微在ios端wx.config 以及wx.agentConfig问题的完美解决

0 个评论

目录

公告

相关问题