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

企业微信小程序

获取用户信息

海马汇与企业微信小程序

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

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

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

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

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

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

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

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

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

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

首先,需要在企业微信管理平台创建小程序并填写相关信息,然后在“应用管理”中点击对应的子应用可以查看子应用的相关信息。如下图:
企业微信小程序用户信息获取以及JSSDK使用_第1张图片

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

参数 说明
appid 第三方应用id(即ww或wx开头的suite_id)。注意与企业的网页授权登录不同
redirect_uri 授权后重定向的回调链接地址(即子应用首页),请使用urlencode对链接进行处理 ,注意域名需要设置为第三方应用的可信域名
response_type 返回类型,此时固定为:code
scope 应用授权作用域。
snsapi_base:静默授权,可获取成员的的基础信息(UserId与DeviceId);
snsapi_userinfo:静默授权,可获取成员的详细信息,但不包含手机、邮箱;
snsapi_privateinfo:手动授权,可获取成员的详细信息,包含手机、邮箱
注意:**企业自建应用可以根据userid获取成员详情,无需使用snsapi_userinfo和snsapi_privateinfo两种scope。**更多说明见scope
agentid 企业应用的id。
当scope是snsapi_userinfo或snsapi_privateinfo时,该参数必填
注意redirect_uri的域名必须与该应用的可信域名一致
state 重定向后会带上state参数,企业可以填写a-zA-Z0-9的参数值,长度不可超过128个字节
#wechat_redirect 终端使用此参数判断是否需要带上身份信息

当进入小程序时会首先访问该链接,企业微信根据该链接校验相关信息无误后会重定向至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'));
  },

企业微信JSSDK

使用JSSDK

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

引入JSSDK文件

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

企业微信小程序用户信息获取以及JSSDK使用_第2张图片

配置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接口列表,凡是要调用的接口都需要传进来
      });
    },

其中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: '转发失败!',
            });
          },
        });
      })
    },

JSSDK常用API

基础接口
API 作用 示例
wx.checkJsApi 判断当前客户端版本是否支持指定JS接口 https://developer.work.weixin.qq.com/document/path/94324
wx.agentConfig 通过agentConfig注入应用的权限 https://developer.work.weixin.qq.com/document/path/94325
wx.invoke(‘getContext’, fn) 获取进入H5页面的入口环境 https://developer.work.weixin.qq.com/document/path/94326
界面接口
API 作用 示例
wx.onMenuShareAppMessage 获取“转发”按钮点击状态及自定义分享内容接口 https://developer.work.weixin.qq.com/document/path/90523
wx.onHistoryBack 在用户返回上个页面时,回调开发者注册的函数,处理业务需要的逻辑(如确认或重定向到指定的页面) https://developer.work.weixin.qq.com/document/path/90524
wx.hideOptionMenu 隐藏右上角菜单接口 https://developer.work.weixin.qq.com/document/path/90524
wx.showOptionMenu 显示右上角菜单接口 https://developer.work.weixin.qq.com/document/path/90524
wx.closeWindow 关闭当前网页窗口接口 https://developer.work.weixin.qq.com/document/path/90524
wx.hideMenuItems 批量隐藏功能按钮接口 https://developer.work.weixin.qq.com/document/path/90524
wx.showMenuItems 批量显示功能按钮接口 https://developer.work.weixin.qq.com/document/path/90524
wx.hideAllNonBaseMenuItem 隐藏所有非基础按钮接口 https://developer.work.weixin.qq.com/document/path/90524
wx.showAllNonBaseMenuItem 显示所有功能按钮接口 https://developer.work.weixin.qq.com/document/path/90524
wx.invoke(‘openDefaultBrowser’, fn) 打开系统默认浏览器 https://developer.work.weixin.qq.com/document/path/90524
wx.onUserCaptureScreen 用户截屏事件 https://developer.work.weixin.qq.com/document/path/90524
wx.scanQRCode 调起企业微信扫一扫接口 https://developer.work.weixin.qq.com/document/path/90525
wx.invoke(‘launchMiniprogram’, obj, fn) 在企业微信内快速跳转到指定的小程序页面 https://developer.work.weixin.qq.com/document/path/93114
媒体接口
API 作用 示例
wx.getLocalImgData 获取本地图片接口 https://developer.work.weixin.qq.com/document/path/90528
wx.chooseImage 拍照或从手机相册中选图接口 https://developer.work.weixin.qq.com/document/path/90528
wx.previewImage 预览图片接口 https://developer.work.weixin.qq.com/document/path/90528
wx.uploadImage 上传图片接口 https://developer.work.weixin.qq.com/document/path/90528
wx.downloadImage 下载图片接口 https://developer.work.weixin.qq.com/document/path/90528
wx.startRecord 开始录音接口 https://developer.work.weixin.qq.com/document/path/90529
wx.stopRecord 停止录音接口 https://developer.work.weixin.qq.com/document/path/90529
wx.onVoiceRecordEnd 监听录音自动停止接口 https://developer.work.weixin.qq.com/document/path/90529
wx.playVoice 播放语音接口 https://developer.work.weixin.qq.com/document/path/90529
wx.pauseVoice 暂停播放接口 https://developer.work.weixin.qq.com/document/path/90529
wx.previewFile 预览文件接口 https://developer.work.weixin.qq.com/document/path/90530
设备接口
API 作用 示例
wx.setClipboardData 设置系统剪贴板的内容 https://developer.work.weixin.qq.com/document/path/90535
wx.getLocation 获取地理位置接口 https://developer.work.weixin.qq.com/document/path/90537

常见错误

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

报错信息/具象 报错原因及解决办法
invalid url domain 当前页面所在域名与使用的corpid没有绑定(可在该应用的可信域名中配置域名)
invalid signature签名错误 解决办法:
\1) 确认签名算法正确,可用http://work.weixin.qq.com/api/jsapisign页面工具进行校验。
\2) 确认config中nonceStr(js中驼峰标准大写S), timestamp与用以签名中的对应noncestr, timestamp一致。
\3) 确认url是页面完整的url(请在当前页面alert(location.href.split(‘#’)[0])确认),包括’http(s)/‘部分,以及’?‘后面的GET参数部分,但不包括’#'hash后面的部分。
\4) 确认config中的appid与用来获取jsapi_ticket的corpid一致。
\5) 确保一定缓存access_token和jsapi_ticket。
\6) 确保你获取用来签名的url是动态获取的,动态页面可参见实例代码中php的实现方式。如果是html的静态页面在前端通过ajax将url传到后台签名,前端需要用js获取当前页面除去’#‘hash部分的链接(可用location.href.split(’#')[0]获取,而且需要encodeURIComponent),因为页面一旦分享,企业微信客户端会在你的链接末尾加入其它参数,如果不是动态获取当前链接,将导致分享后的页面签名失败
the permission value is offline verifying 或者 fail_nopermission 错误原因: config没有正确执行,或者是调用的JSAPI没有传入config的jsApiList参数中
解决办法:
\1) 确认config正确通过。
\2) 如果是在页面加载好时就调用了JSAPI,则必须写在wx.ready的回调中。
\3) 确认config的jsApiList参数包含了这个JSAPI。
permission denied 该应用没有权限使用这个接口
function not exist 当前客户端版本不支持该接口,请升级到新版体验。
服务上线之后无法获取jsapi_ticket,自己测试时没问题 因为access_token和jsapi_ticket必须要在自己的服务器缓存,否则上线后会触发频率限制。请确保在服务上线前一定全局缓存access_token和jsapi_ticket,两者有效期均为7200秒(以返回结果中的expires_in为准),否则一旦上线触发频率限制,服务将不再可用
uploadImage怎么传多图 目前只支持一次上传一张,多张图片需等前一张图片上传之后再调用该接口
通过a链接(例如先通过企业微信授权登录)跳转到b链接,invalid signature签名失败 后台生成签名的链接为使用jssdk的当前链接,也就是跳转后的b链接,请不要用企业微信登录的授权链接进行签名计算,后台签名的url一定是使用jssdk的当前页面的完整url除去’#'部分。
出现config:fail错误 这是由于传入的config参数不全导致,请确保传入正确的appId、timestamp、nonceStr、signature和需要使用的jsApiList。

你可能感兴趣的:(小程序,前端,微信小程序)