企業(yè)微信小程序

獲取用戶信息

海馬匯與企業(yè)微信小程序

企業(yè)微信小程序訪問的是在線子應(yīng)用（即可直接通過瀏覽器訪問），因此只需將海馬匯打包部署到服務(wù)器上即可。

海馬匯子應(yīng)用目前使用過兩種模式：

1. 純?cè)ｑR匯框架開發(fā)

   該模式所有子應(yīng)用/頁面都需要自己開發(fā)，不存在標(biāo)準(zhǔn)子應(yīng)用，因此開發(fā)工作量大，但無冗余的內(nèi)容

2. uni-app殼子嵌套含標(biāo)準(zhǔn)子應(yīng)用海馬匯（srm-uni-app-map & srm-fronr-app-map）

   該模式擁有大量標(biāo)準(zhǔn)子應(yīng)用，因此有類似開發(fā)需求可直接使用標(biāo)準(zhǔn)子應(yīng)用頁面或在標(biāo)準(zhǔn)頁面上進(jìn)行二開，開發(fā)工作量會(huì)相對(duì)較少，但會(huì)存在冗余內(nèi)容（未使用的標(biāo)準(zhǔn)子應(yīng)用）

第一種模式需要自己根據(jù)企業(yè)微信提供的信息獲取token等；第二種模式uni-app殼子已經(jīng)做好相對(duì)應(yīng)的功能，因此不需要前端再次獲取相應(yīng)信息。

本篇文章主要講第一種模式下企業(yè)微信對(duì)接海馬匯子應(yīng)用的一些內(nèi)容。

企業(yè)微信是如何傳遞用戶信息的？

在講海馬匯獲取企業(yè)微信用戶信息之前，先了解一下企業(yè)微信是如何將用戶信息傳遞給小程序的，這有利于了解后續(xù)的步驟。

首先，需要在企業(yè)微信管理平臺(tái)創(chuàng)建小程序并填寫相關(guān)信息，然后在“應(yīng)用管理”中點(diǎn)擊對(duì)應(yīng)的子應(yīng)用可以查看子應(yīng)用的相關(guān)信息。如下圖：

主要關(guān)注這個(gè)應(yīng)用主頁信息，該信息是企業(yè)微信傳遞用戶信息的關(guān)鍵。該鏈接中對(duì)應(yīng)參數(shù)如下：

當(dāng)進(jìn)入小程序時(shí)會(huì)首先訪問該鏈接，企業(yè)微信根據(jù)該鏈接校驗(yàn)相關(guān)信息無誤后會(huì)重定向至redirect_uri并攜帶兩個(gè)參數(shù)。

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

將參數(shù)傳遞給后端，后端可根據(jù)企業(yè)微信官方API獲取到用戶userId從而返回token。

關(guān)于這部分的詳細(xì)內(nèi)容詳見企業(yè)微信API文檔（https://developer.work.weixin.qq.com/document/path/91120）

注：分享頁面如需獲取用戶信息，則分享鏈接應(yīng)根據(jù)該要求進(jìn)行分享，從而保證進(jìn)入分享頁面時(shí)獲取到相關(guān)信息

前端獲取Token

了解了企業(yè)微信傳遞用戶信息的過程，那獲取企業(yè)微信token就容易了許多，以下是某個(gè)項(xiàng)目獲取企業(yè)微信token的代碼示例

// 頁面mounted獲取token相關(guān)代碼
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 - 請(qǐng)求參數(shù) 
   */
  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('設(shè)置TOKEN成功，Token為', window.localStorage.getItem('user-token'));
  },

企業(yè)微信JSSDK

使用JSSDK

如果在企業(yè)微信中需要使用掃一掃、分享、獲取設(shè)備信息等相關(guān)功能（更詳細(xì)的功能詳見官方文檔），則需要使用企業(yè)微信JSSDK。

引入JSSDK文件

由于官方推薦的是script導(dǎo)入的方式，因此我們需要在public/index.html文件中導(dǎo)入JSSDK文件

配置JSSDK

所有需要使用JS-SDK的頁面必須先注入配置信息，否則將無法調(diào)用（同一個(gè)url僅需調(diào)用一次，對(duì)于變化url的SPA（single-page application）的web app可在每次url變化時(shí)進(jìn)行調(diào)用）。

一般在子應(yīng)用首頁配置JSSDK，項(xiàng)目配置JSSDK如下

/**
     * 設(shè)置wxjssdk配置
     * @param{String} url - 當(dāng)前地址
     */
    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;
      // 注入的是企業(yè)的身份與權(quán)限
      wx.config({
        beta: true, // 必須這么寫，否則wx.invoke調(diào)用形式的jsapi會(huì)有問題
        debug: false, // 是否開啟調(diào)試模式,調(diào)用的所有api的返回值會(huì)在客戶端alert出來，若要查看傳入的參數(shù)，可以在pc端打開，參數(shù)信息會(huì)通過log打出，僅在pc端時(shí)才會(huì)打印。
        appId, // 必填，企業(yè)微信的corpID
        timestamp, // 必填，生成簽名的時(shí)間戳，精確到秒
        nonceStr, // 必填，生成簽名的隨機(jī)串
        signature, // 必填，簽名，見 附錄-JS-SDK使用權(quán)限簽名算法
        jsApiList: [ 'setClipboardData', 'onMenuShareAppMessage' ], // 必填，需要使用的JS接口列表，凡是要調(diào)用的接口都需要傳進(jìn)來
      });
    },

其中appId， timestamp， nonceStr， signature信息推薦后端處理返回，因?yàn)槊總€(gè)環(huán)境的企業(yè)微信小程序的appId都不一樣，后端處理返回利于上線。

若由前端生成對(duì)應(yīng)信息，則需要符合企業(yè)微信對(duì)應(yīng)信息規(guī)則。（規(guī)則地址：https://work.weixin.qq.com/api/doc/90001/90144/90539）

使用JSSDK接口

配置完成后即可在對(duì)應(yīng)頁面使用JSSDK接口，如要在配置完JSSDK后立即使用則需要在wx.ready函數(shù)內(nèi)使用。因?yàn)閖ssdk配置是異步的，直接使用JSSDK相關(guān)接口會(huì)導(dǎo)致在配置未完成之前使用從而導(dǎo)致報(bào)錯(cuò)。

項(xiàng)目使用JSSDK接口示例如下（此處使用的是轉(zhuǎn)發(fā)配置接口）

 // 轉(zhuǎn)發(fā)單據(jù) 
    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();
      // 獲取“轉(zhuǎn)發(fā)”按鈕點(diǎn)擊狀態(tài)及自定義分享內(nèi)容接口
      wx.ready(() => {
        wx.onMenuShareAppMessage({
          title: '標(biāo)題', // 分享標(biāo)題
          desc: `描述號(hào): ${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`, // 分享鏈接；在微信上分享時(shí)，該鏈接的域名必須與企業(yè)某個(gè)應(yīng)用的可信域名一致
          imgUrl: 'https://oss-agri-map-srm-public-bucket.oss-cn-beijing.aliyuncs.com/hpfm05/1173/04b99e226752432b9a07c34937aadcdc@MAP_LOGO.png', // 分享圖標(biāo)
          success: function () {
            // 用戶確認(rèn)分享后執(zhí)行的回調(diào)函數(shù)
            console.log('轉(zhuǎn)發(fā)成功');
          },
          cancel: function () {
            // 用戶取消分享后執(zhí)行的回調(diào)函數(shù)
            this.$hips.toast({
              message: '轉(zhuǎn)發(fā)失??！',
            });
          },
        });
      })
    },

JSSDK常用API

基礎(chǔ)接口

界面接口

媒體接口

設(shè)備接口

常見錯(cuò)誤

調(diào)用config接口的時(shí)候傳入?yún)?shù)debug: true 可以開啟debug模式，頁面會(huì)alert出錯(cuò)誤信息。以下為常見錯(cuò)誤及解決方法：文章來源地址http://www.zghlxwxcb.cn/news/detail-676912.html

到了這里，關(guān)于企業(yè)微信小程序用戶信息獲取以及JSSDK使用的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！