uniapp、Vue、React、引入企业微信jssdk(含agentConfig)

4,974 阅读2分钟

引入企业微信jssdk

今天写这篇文章,主要是面向工作中在企业微信里引入jssdk的人。其实企业微信jssdk和微信公众号的jssdk是差不多的,但这里面有很多需要注意的地方,也可以让大家少走很多弯路。

调用普通接口:引入jweixin-module包,导入jweixin-module,进行config配置,使用。

调用需要agentConfig的接口:引入jweixin-module包,引入jwxwork sdk,进行config配置,进行agentConfig配置,使用。这里注意的是从企业微信3.0.24及以后版本(可通过企业微信UA判断版本号),无须先调用wx.config,可直接wx.agentConfig.这里UA可以尝试看看,如果不太想弄的话就先调用config就行。

1.jssdk包

这里我推荐微信公众号和企业微信可以一起使用的包jweixin-module,亲测有效!

npm install jweixin-module --save

2.配置jssdk

这里配置时注意jsApiList里要填对应的接口

const jweixin = require("jweixin-module");

initWxWorkJssdk: function(callback) {
        // jssdk配置,跟后端配合请求对应的签名接口,这里的appid是企业微信的appid
        Vue.prototype.$api.yzhshopAdmin.commonA1
            .jssdkConfig({
                sign_url: window.location.href.split("#")[0],
                type: 1,
                shop_id: uni.getStorageSync("UserInfoData").shop_id || {},
            })
            .then((res) => {
                if (res.code === 200) {
                    jweixin.config({
                        beta: true, // 必须这么写,否则wx.invoke调用形式的jsapi会有问题
                        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                        appId: res.data.appId, // 必填,企业微信的corpID
                        timestamp: res.data.timestamp, // 必填,生成签名的时间戳
                        nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
                        signature: res.data.signature, // 必填,签名,见 附录-JS-SDK使用权限签名算法
                        jsApiList: [
                            "onMenuShareAppMessage",
                            "updateAppMessageShareData",
                            "selectExternalContact",
                            "launchMiniprogram",
                            "openUserProfile",
                            "shareAppMessage",
                            "onMenuShareAppMessage",
                            "onMenuShareWechat",
                            "shareWechatMessage",
                            "scanQRCode",
                            "openEnterpriseChat"
                        ]
                    });
                    // 配置完成,再执行分享等功能
                    if (callback) {
                        callback(res.data);
                    }
                }
            })
            .catch((err) => {});
    },

3.使用对应方法接口

 scanQRCode: function(shop_id) {
        uni.showLoading({
            title: '正在加载'
        });
        this.initWxWorkJssdk(function() {
            jweixin.ready(function() {
                jweixin.scanQRCode({});
            });
        });
     }

4.引入jwxwork sdk

这里的jwxwork sdk我建议先用官方的open.work.weixin.qq.com/wwopen/js/j…
实在不行就这个包res.wx.qq.com/wwopen/js/j…
或者有更好的npm包的朋友可以提供一下,官方的包好像没有agentConfig。第二个包是社区提供的。

代码

首先需要先成功调用上面的config接口,然后在wx.ready里继续调用agentConfig

   this.initWxWorkJssdk(function() {
             jweixin.ready(function() {
                 Vue.prototype.$api.yzhshopAdmin.commonA1
                     .jssdkConfig({
                         sign_url: window.location.href.split("#")[0],
                         type: 2,
                     })
                    .then((res) => {
                        if (res.code === 200) {
                            wx.agentConfig({
                                debug: true,
                                corpid: res.data.corpid, // 必填,企业微信的corpid,必须与当前登录的企业一致
                                agentid: res.data.agentid, // 必填,企业微信的应用id (e.g. 1000247)
                               timestamp: res.data.timestamp, // 必填,生成签名的时间戳
                              nonceStr: res.data.nonceStr, // 必填,生成签名的随机串
                                signature: res.data.signature, // 必填,签名,见附录-JS-SDK使用权限签名算法
                                jsApiList: [
                                    "scanQRCode"
                                 ], //必填
                                 success: function(res) {
                                  	  wx.invoke('launchMiniprogram', {
                                          "appid" : "wx062aaa5507909631", // 需跳转的小程序appid
                                          "path" : "pages/home/index.html", // 所需跳转的小程序内页面路径及参数。非必填
                                          }, function(res) {
                                              if(res.err_msg == "launchMiniprogram:ok") {
                                                  // 正常
                                              } else {
                                                  // 错误处理
                                              }
                                          }
                          				    );
                                 },
                                 fail: function(res) {
                                   console.log(res);
                                    uni.showToast({
                                         title: res,
                                         duration: 2000,
                                     });
                                     if (res.errMsg.indexOf("function not exist") > -1) {
                                         alert("版本过低请升级");
                                    }
                                 },
                             });
                         }
                     })
                     .catch((err) => {});
             });
         });

适用接口

跳转小程序,如果开发这个功能的需要注意了,这个只限于自己企业H5跳转到自己企业开发的小程序。

最后注意事项

如果你用的是普通的jssdk接口,就只用引入jweixin-module这个包即可了,重点观察接口下方有没有提示需要使用agentConfig 而真的需要使用agentConfig接口的小伙伴,首先需要尝试使用官方提供的jssdk,如果不行,导入文章中的第二包,最后不行联系客服,整个过程参考官方的demo来做

最后如果调用成功了,要同时测试安卓和苹果。有任何问题也可以再下方留言,我看到会给你回复。感谢你看到最后,谢谢!

参考链接

企业微信jssdkdemo(官方)

企业微信文档

企业微信巨坑:wx.agentConfig is not a function

企业微信客服二维码