企业微信小程序用户信息获取以及JSSDK使用_企业微信小程序获取用户信息

企业微信小程序

获取用户信息

海马汇与企业微信小程序

企业微信小程序访问的是在线子应用（即可直接通过浏览器访问），因此只需将海马汇打包部署到服务器上即可。

海马汇子应用目前使用过两种模式：

1. 纯原生海马汇框架开发

   该模式所有子应用/页面都需要自己开发，不存在标准子应用，因此开发工作量大，但无冗余的内容

2. uni-app壳子嵌套含标准子应用海马汇（srm-uni-app-map & srm-fronr-app-map）

   该模式拥有大量标准子应用，因此有类似开发需求可直接使用标准子应用页面或在标准页面上进行二开，开发工作量会相对较少，但会存在冗余内容（未使用的标准子应用）

第一种模式需要自己根据企业微信提供的信息获取token等；第二种模式uni-app壳子已经做好相对应的功能，因此不需要前端再次获取相应信息。

本篇文章主要讲第一种模式下企业微信对接海马汇子应用的一些内容。

企业微信是如何传递用户信息的？

在讲海马汇获取企业微信用户信息之前，先了解一下企业微信是如何将用户信息传递给小程序的，这有利于了解后续的步骤。

首先，需要在企业微信管理平台创建小程序并填写相关信息，然后在“应用管理”中点击对应的子应用可以查看子应用的相关信息。如下图：

主要关注这个应用主页信息，该信息是企业微信传递用户信息的关键。该链接中对应参数如下：

当进入小程序时会首先访问该链接，企业微信根据该链接校验相关信息无误后会重定向至redirect_uri并携带两个参数。

重定向地址格式如： redirect_uri?code=CODE&state=STATE

将参数传递给后端，后端可根据企业微信官方API获取到用户userId从而返回token。

关于这部分的详细内容详见企业微信API文档（https://developer.work.weixin.qq.com/document/path/91120）

注：分享页面如需获取用户信息，则分享链接应根据该要求进行分享，从而保证进入分享页面时获取到相关信息

前端获取Token

了解了企业微信传递用户信息的过程，那获取企业微信token就容易了许多，以下是某个项目获取企业微信token的代码示例

// 页面mounted获取token相关代码
let url = location.href;
const code = url.match(/code=(.*)&/)[1];
const state = url.match(/state=(.*?)(&|#)/)[1];
const [ thirdPartyCode, srmAccount ] = state.split('-');
const params = {
  code,
  srmAccount,
  thirdPartyCode,
  clientId: "srm-front",
  clientSecret: "secret",
  changeDefaultTenantFlag: true,
};
await api.getToken(params);

// 接口axios代码
 /**
   * 获取token
   * @param {Object} params - 请求参数 
   */
  getToken: async (params) => {
    const url = `/smbl/v1/map-third-party-oauth/user/auto-login-by-phone`;
    const res = await noAuthHttp.post(url, params);
    if (res.accessToken !== '') {
      window.localStorage.setItem("user-token", res.accessToken);
    } else {
      console.log('获取Token失败！')
    }
    console.log('设置TOKEN成功，Token为', window.localStorage.getItem('user-token'));
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

企业微信JSSDK

使用JSSDK

如果在企业微信中需要使用扫一扫、分享、获取设备信息等相关功能（更详细的功能详见官方文档），则需要使用企业微信JSSDK。

引入JSSDK文件

由于官方推荐的是script导入的方式，因此我们需要在public/index.html文件中导入JSSDK文件

配置JSSDK

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

一般在子应用首页配置JSSDK，项目配置JSSDK如下

/**
     * 设置wxjssdk配置
     * @param{String} url - 当前地址
     */
    async setJSSDK(url) {
      const wx = parent.wxBridge || window.wx;
      if (url.includes('#')) {
        url = url.match(/(.*)#/)[1];
      }
      const config = await api.getJSSDK({ url });
      const {
        appId = '',
        timestamp = new Date().getTime(),
        nonceStr,
        signature,
      } = config;
      // 注入的是企业的身份与权限
      wx.config({
        beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
        debug: false, // 是否开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
        appId, // 必填，企业微信的corpID
        timestamp, // 必填，生成签名的时间戳，精确到秒
        nonceStr, // 必填，生成签名的随机串
        signature, // 必填，签名，见 附录-JS-SDK使用权限签名算法
        jsApiList: [ 'setClipboardData', 'onMenuShareAppMessage' ], // 必填，需要使用的JS接口列表，凡是要调用的接口都需要传进来
      });
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

其中appId， timestamp， nonceStr， signature信息推荐后端处理返回，因为每个环境的企业微信小程序的appId都不一样，后端处理返回利于上线。

若由前端生成对应信息，则需要符合企业微信对应信息规则。（规则地址：https://work.weixin.qq.com/api/doc/90001/90144/90539）

使用JSSDK接口

配置完成后即可在对应页面使用JSSDK接口，如要在配置完JSSDK后立即使用则需要在wx.ready函数内使用。因为jssdk配置是异步的，直接使用JSSDK相关接口会导致在配置未完成之前使用从而导致报错。

项目使用JSSDK接口示例如下（此处使用的是转发配置接口）

 // 转发单据 
    async shareTicket() {
      const { poPlanHeaderId } = this.$route.params;
      const { poPlanNumber } = this.baseData;
      const wx = parent.wxBridge || window.wx;
      const baseURL = process.env.VUE_APP_DOMAIN_NAME;
      console.log(baseURL);
      // 获取链接配置信息
      const {
        appId,
        state,
        // secret,
        agentId,
      } = await api.getLinkConfig();
      // 获取“转发”按钮点击状态及自定义分享内容接口
      wx.ready(() => {
        wx.onMenuShareAppMessage({
          title: '标题', // 分享标题
          desc: `描述号: ${poPlanNumber}`, // 分享描述
          link: `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appId}&redirect_uri=${baseURL}/SRM_Platform_Map/#/purchaseMaintain/detail/${poPlanHeaderId}?fromShare=true&response_type=code&scope=snsapi_base&agentid=${agentId}&state=${state}#wechat_redirect`, // 分享链接；在微信上分享时，该链接的域名必须与企业某个应用的可信域名一致
          imgUrl: 'https://oss-agri-map-srm-public-bucket.oss-cn-beijing.aliyuncs.com/hpfm05/1173/04b99e226752432b9a07c34937aadcdc@MAP_LOGO.png', // 分享图标
          success: function () {
            // 用户确认分享后执行的回调函数
            console.log('转发成功');
          },
          cancel: function () {
            // 用户取消分享后执行的回调函数
            this.$hips.toast({
              message: '转发失败！',
            });
          },
        });
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

JSSDK常用API

基础接口

界面接口

媒体接口

设备接口

常见错误

调用config接口的时候传入参数debug: true 可以开启debug模式，页面会alert出错误信息。以下为常见错误及解决方法：