Uniapp使用企业微信API的方法（企业微信自建应用集成企业微信JS-SDK）

七月的余烬
4,031 阅读4分钟

1、业务需求

使用uniapp打包的H5应用，要集成企业微信的js-sdk。在用户点击分享的时候，自定义分享的内容。

2、需求难点分析

  • uniapp关于企业微信jweixin全局对象的引入。
  • wx.config获取对应配置的数据需要后端高度配合。
  • wx.config注册后使用对应企业微信API的调用方法。
  • api和代码的修改需要实时部署，不然无法调试。

上述难点主要集中在全局注册企业微信jweixin对象和后端签名算法。

3、实现需求：自定义企业微信转发

参考企业微信文档： developer.work.weixin.qq.com/document/pa…

  1. 引入js-sdk

    • npm install jweixin-module --save

      全局下载jweixin模块。因为只在自建应用中使用，所以要使用条件编译引入。

    • // #ifdef H5
const jweixin = require("jweixin-module");
const env = uni.getSystemInfoSync().platform;
console.log("env, 当前环境", env)
if (env === "ios") {
  Vue.prototype.wx = jweixin;
//   Vue.prototype.jweixin = wx;
} else {
  Vue.prototype.jweixin = jweixin;
}
// #endif

      在H5环境下动态引入jweixin对象。因为IOS端全局对象自带wx对象，所以要用jweixin覆盖。

    • <script src="https://open.work.weixin.qq.com/wwopen/js/jwxwork-1.0.0.js" type="text/javascript"></script>

      在index.html中引入企业微信相关依赖；

    2、通过config接口注入权限验证配置

    • wx.config({
    beta: true,// 必须这么写，否则wx.invoke调用形式的jsapi会有问题
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: '', // 必填，企业微信的corpID
    timestamp: , // 必填，生成签名的时间戳
    nonceStr: '', // 必填，生成签名的随机串
    signature: '',// 必填，签名，见 附录-JS-SDK使用权限签名算法
    jsApiList: [] // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
});

      上面appId后面的参数都是由后端包装后通过接口返回。特别注意signature签名的生成需要使用企业的corpID生成，而且timestamp时间戳必须是数字类型。

    3、通过ready接口处理成功验证

    • wx.ready(function(){
    // config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中。
});

      在config信息验证成功后，就在ready方法里面调用相关的接口。

    4、通过error接口处理失败验证

    • wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

4、接口封装，接口调用

  1. 封装一个请求接口，因为每一个页面调用的API都用时效性，出了这个页面就没法调用。所以需要封装一个灵活的方法来在不同的页面动态引入注入权限验证配置。

    import qyGetUserTag from "../api/user.js";
export function getWxConfig(qyApi, params) {
  return new Promise((resolve, reject) => {
    qyGetUserTag({
      pageUrl: window.location.href.split("#")[0],
    }).then((res) => {
      const { data: data } = res.data;
      const wxConfig = data
      console.log(window.location.href, "当前调用的页面");
      console.log(wxConfig, "wxConfig内容");
      this.jweixin.config({ // jweixin是全局注册的企业微信api对象
        beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
        debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId: wxConfig.corpid, // 必填，企业微信的corpID
        timestamp: wxConfig.timestamp, // 必填，生成签名的时间戳
        nonceStr: wxConfig.noncestr, // 必填，生成签名的随机串
        signature: wxConfig.signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
        jsApiList: [qyApi], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
      });
      this.jweixin.ready(() => {
        console.log("ready初始化完成");
        this.jweixin[qyApi](params);
        resolve(data);
      });
      this.jweixin.error(function (error) {
        console.log(error, "打印错误信息");
        reject(error);
      });
    });
  });
}

  2. 调用接口的时候，传入两个参数，需要调用的方法，和方法传入的参数。我这里使用了企业微信分享功能：

    wx.onMenuShareAppMessage({
    title: '', // 分享标题
    desc: '', // 分享描述
    link: '', // 分享链接；在微信上分享时，该链接的域名必须与企业某个应用的可信域名一致
    imgUrl: '', // 分享图标
    success: function () {
        // 用户确认分享后执行的回调函数
    },
    cancel: function () {
        // 用户取消分享后执行的回调函数
    }
});

    方法引入和调用：

    import { getWxConfig } from "../../utils/wx_init.js"; // 方法引入
​
async getWxData() { // 方法定义
    let res = await getWxConfig.call(this, "onMenuShareAppMessage", { // 绑定到当前页面
        title: this.qy_postMessage.title, // 分享标题
        desc: this.qy_postMessage.summary, // 分享描述
        link: this.qy_postMessage.href, // 分享链接；在微信上分享时，该链接的域名必须与企业某个应用的可信域名一致
        imgUrl: this.qy_postMessage.imageUrl, // 分享图标
        success: function () {
            console.log("分享成功");
            // 用户确认分享后执行的回调函数
        },
        cancel: function () {
            console.log("分享失败");
            // 用户取消分享后执行的回调函数
        },
    });
    console.log(res, "微信返回的值。webview 测试");
},
 mounted() { // 方法调用
      // #ifdef H5
     const origin = "https://qyhtest.citic.com";
     window.addEventListener(
          "message",
          (e) => {
              if (e.origin === origin) {
                  const { arg: data } = e.data.data;
                  this.qy_postMessage = data;
                  this.qy_postMessage && this.getWxData();
              }
          },
          false
      );
      // #endif
  },
avatar
文章
阅读
粉丝