前端接企业微信sdk (#137) · Issues · FE / treasure

前端接企业微信sdk

1、域名配置

所有的JS接口只能在企业微信应用的可信域名下调用(包括子域名)，且可信域名必须有ICP备案且在管理端验证域名归属。验证域名归属的方法在企业微信的管理后台“我的应用”里，进入应用，设置应用可信域名。

由于企业微信有绑定企业域名，所以接入企业微信sdk的一级域名需要为linhuiba.com

如图所示，可信域名需要找vp特夫在企业微信平台配置

且调试只能部署后调试，本地启的服务http://192.168.88.65:8002 或者 http://localhost:8002 都无法调用微信sdk，因为后端需要拿到url进行鉴权

2、企业微信域名验证文件

找有企业微信后台配置权限人（ssc）所要
将 WW_verify_XXXXXX.txt 文件放置 public 目录下，这样打包后文件会在dist下，https://ie-resource-service-wap.linhuiba.com/WW_verify_BKCpaEGtbCU9XKk9.txt 部署后如链接所示可打开。文件存放如图所示

3、script引入js文件

 // 项目的index.html文件内
 <!-- 异步引入企业微信js -->
          <script>
            function setScript(url, cb) {
              var callback = cb || new Function();
              var script = document.createElement('script');
              if (script.addEventListener) {
                script.addEventListener('load', callback, false);
              } else if (script.attachEvent) {
                script.attachEvent('onreadystatechange', function() {
                  var target = window.event.srcElement;
                  if (
                    target.readyState == 'loaded' ||
                    target.readyState == 'complete'
                  ) {
                    callback.call(target);
                  }
                });
              }
              document.getElementsByTagName('head')[0].appendChild(script);
              script.src = url;
            }
            var loaded = new Promise(function(res) {
              setScript(
                '//res.wx.qq.com/open/js/jweixin-1.2.0.js',
                function() {
                  res();
                }
              );
            });
            window.$QyWxPromise = loaded;
          </script>

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

所有需要使用JS-SDK的页面必须先注入配置信息，否则将无法调用（同一个url仅需调用一次，对于变化url的SPA（single-page application）的web app可在每次url变化时进行调用）。

import { Toast } from 'antd-mobile';
import { getWxConfig } from '../api/login';

// 在这里注册需要用的api
const jsApiList = [
  'onMenuShareAppMessage',
  'onMenuShareWechat',
  'onMenuShareTimeline',
  'hideOptionMenu',
  'showOptionMenu',
  'getLocation',
  'openLocation',
];

export async function initConfig(callback) {
  const url = encodeURIComponent(window.location.href.split('#')[0]); // 必须这么写
  const result = await getWxConfig({ url });
  await window.$QyWxPromise;
  const wx = window.wx;
  wx.config({
    beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
    debug: process.env.NODE_ENV === 'development', // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
    appId: result.appId, // 必填，企业微信的corpid，必须与当前登录的企业一致
    timestamp: result.timestamp, // 必填，生成签名的时间戳
    nonceStr: result.nonceStr, // 必填，生成签名的随机串
    signature: result.signature, // 必填，签名，见附录-JS-SDK使用权限签名算法
    jsApiList,
  });
  wx.error(function (res) { // 可在这进行打印调试
    // 开发、测试环境提示
    if (process.env.NODE_ENV === 'development') {
      Toast.show(JSON.stringify(res));
    } else {
      if (res.errMsg.indexOf('function not exist') > -1) {
        alert('版本过低请升级');
      }
    }
  });
  wx.ready(() => {
    callback(wx);
  });
}

、调用api方法

// 需要用 initConfig注册方法 ，然后用wx.使用
 initConfig((wx) => {
        const shareParams = {
          title: `分享标题`, // 分享标题
          desc: `活动时间：`, // 分享描述
          link: window.location.href + '&share=1', // 分享链接；在微信上分享时，该链接的域名必须与企业某个应用的可信域名一致
          imgUrl: 'https://cert.linhuiba.com/FgmfndbwWDX4BsZ-KSHP22zEw6UW', // 分享图标
        };
        // 显示右上角分享菜单
        wx.showOptionMenu();
        // 获取“转发”按钮点击状态及自定义分享内容接口
        wx.onMenuShareAppMessage && wx.onMenuShareAppMessage(shareParams);
        // 获取“微信”按钮点击状态及自定义分享内容接口
        wx.onMenuShareWechat && wx.onMenuShareWechat(shareParams);
        // 获取“分享到朋友圈”按钮点击状态及自定义分享内容接口
        wx.onMenuShareTimeline && wx.onMenuShareTimeline(shareParams);
      });
    },

官方文档：https://developer.work.weixin.qq.com/document/path/92455

签名工具：https://developer.work.weixin.qq.com/devtool/signature

错误码查询：https://developer.work.weixin.qq.com/document/path/90313#%E9%94%99%E8%AF%AF%E7%A0%81%EF%BC%9A40093

Edited Mar 14, 2023 by chenyu