CabloyJS一站式助力微信、企業微信、釘釘開發 - 企業微信篇

阿新 • • 發佈：2021-01-10

前言

現在軟體開發不僅要面對前端碎片化，還要面對後端碎片化。針對前端碎片化，CabloyJS提供了pc=mobile+pad的跨端自適應方案，參見：自適應佈局：pc = mobile + pad

在這裡，咱們重點要解決的是後端碎片化。比如要開發一個業務系統，既需要與微信、企業微信整合，又需要與釘釘整合，該如何設計整個架構呢？

其實，不論是微信、企業微信，還是釘釘，面向實際業務層面的API都不復雜，複雜的是各自獨立的賬號體系如何與業務系統打通的問題。當賬號介面對接完成，後續的業務開發就很順暢了

CabloyJS設計了一套使用者系統與身份認證系統完全分離的機制，從而可以實現一個使用者可以繫結多種登入方式。而且，這些不同的登入方式都是通過Provider

的元件方式動態插入系統的。所以，剩下的工作就是按照Provider的方式來分別對接微信、企業微信和釘釘了

Cabloy-企業微信是什麼

Cabloy-企業微信是基於CabloyJS全棧業務開發框架開發的企業微信介面模組，當前整合了自建應用和企業微信小程式的介面，達到開箱即用的使用效果。在Cabloy-企業微信的基礎上，可以很方便的開發各類企業微信業務系統

核心目標

企業微信開發最複雜的就是賬號體系對接，比如：

企業通訊錄同步：部門、成員
在訊息推送系統中，對使用者進行認證
通過網頁登入

，對使用者進行認證
通過微信小程式登入，對使用者進行認證

一旦完成了這些場景下的賬號體系對接，真正的業務開發就很簡單了

因此，Cabloy-企業微信模組的核心目標，就是自動完成這些場景下的賬號體系對接，我們所需要做的就是提供一些配置引數，然後就可以愉快的開啟業務邏輯的開發了

兩大亮點

基於CabloyJS全棧業務開發框架本身提供的特性，使得Cabloy-企業微信模組具有以下兩個顯著的亮點：

1. PC、Mobile自適應

許多企業微信應用存在這樣一個問題：在Mobile端只能使用一部分功能，其他更多功能則需要登入PC系統進行操作

而CabloyJS框架下的Cabloy-企業微信允許所有的業務功能同時支援PC和Mobile使用。同時又能保證以下兩點：

通過角色許可權系統，控制不同使用者使用不同功能
前端頁面採用非同步載入策略，從而適應大型專案的開發

Mobile端效果

PC端效果

2. 資料孤島

企業從不同服務提供商採購不同的企業微信應用，必然導致資料孤島的出現，而且這些資料散存在不同服務商的後臺，缺乏資料聯動與共享機制

而CabloyJS框架本身就是基於業務模組構建的。企業自建的模組或者使用第三方的模組，都彙集在一個CabloyJS專案之中，並進行私有部署，從而從根本上解決了資料孤島的問題，不僅能實現資料聯動與共享，也可以更靈活的進行資料採集、處理和分析

歸根結底一句話，資料和程式都掌握在自己的手中

特性

基於CabloyJS全棧框架提供的便利性和靈活性，Cabloy-企業微信主要有如下特性:

1. 一站式整合

當前整合了企業微信自建應用和企業微信小程式的介面，具體如下：

場景	名稱	說明
自建應用	訊息推送系統	自動完成介面對接，並對使用者進行認證
自建應用	網頁登入	自動跳轉微信登入，並對使用者進行認證
自建應用	網頁JSSDK	自動注入JSSDK，並自動完成配置
小程式	後臺登入介面	自動完成介面對接，並對使用者進行認證
小程式	前端SDK	提供SDK，便於企業微信小程式前端直接訪問CabloyJS後端API

2. 開箱即用

只需配置好企業微信賬號引數，所有介面自動完成對接

3. 多小程式支援

企業微信可以關聯多個企業微信小程式，因此，模組也提供了多小程式支援

4. 多租戶/多站點支援

通過CabloyJS提供的多例項特性，可以實現多租戶/多站點支援，比如為不同的企業提供企業微信服務。請參見：EggBornJS：多例項

5. PC、Mobile自適應

如上所述

新建CabloyJS專案

在進行後續模組的安裝之前，您必須先建立一個CabloyJS專案

請務必參照文件步驟配置MySQL資料庫連線引數

請參見：指南：快速開始

安裝企業微信模組

安裝企業微信模組a-wxwork

$ npm i egg-born-module-a-wxwork

安裝企業微信測試模組（可選）

企業微信測試模組用於演示如何在模組a-wxwork的基礎上進行具體的業務開發（同時包含企業微信小程式的demo程式）。有兩種方式來使用企業微信測試模組：

1. 安裝到node_modules

如果僅僅是預覽效果，可以直接安裝到{project}/node_modules

$ npm i egg-born-module-test-wxwork

2. 安裝到`src/module`

可以將測試模組安裝到{projecct}/src/module，然後在此模組的基礎上進行自定義開發

$ mv {project}/node_modules/egg-born-module-test-wxwork src/module/test-wxwork

配置企業微信引數

直接在專案配置檔案中配置自建應用和小程式的引數

src/backend/config/config.default.js

// modules
  config.modules = {
    'a-wxwork': {
      account: {
        wxwork: {
          corpid: 'ww1fe9daaaa045aaaa',
          apps: {
            selfBuilt: {
              agentid: '1000008',
              secret: 'JLz3NL6PbFaaaabp64_RJpxaaaa7xROrgxraaaa-XXs',
              token: 'zNjSn7aaaaoJNk',
              encodingAESKey: 'DHc6kaaaa6BuGdnD6NRHtohqbCaaaaMDfgHtoaaaaUV',
              message: {
                reply: {
                  default: 'You are welcome!',
                },
              },
            },
            contacts: {
              secret: 'jwvLlaaaa-1Zfa4KaaaaL193-6Y5ChURkEDaaaa630Y',
              token: 'X1g3Dooaaaa1WwWYlzaaaaB5OiN',
              encodingAESKey: 'qJKICJaaaaC1DfM3Td5lr54H8Pla499EgJ9aaaaxGzg',
            },
          },
          // minis
          minis: {
            default: {
              secret: 'jwaaaacRK-1Zfa4K01aaaa93-6Y5ChURkEDaaaa630Y',
              appID: 'wx823df0aaaab9659f',
              appSecret: 'c2e4442daaaaa5e4073cf49381baaaa9',
            },
          },
        },
      },
    },
};

名稱	說明
apps	配置所有微信應用的引數，包括：企業微信內建應用、第三方應用，以及自建應用。如需訪問其他應用提供的API介面，直接在`apps`新增新的配置即可
apps.selfBuilt	自建應用
apps.contacts	企業微信內建應用 - 通訊錄應用
minis	支援多個微信小程式。為了實際開發上的便利，我們預設提供一個`default`小程式。如果需要開發其他微信小程式，直接在`minis`新增新的配置即可

執行

啟動後端服務

$ npm run dev:backend

啟動前端服務

$ npm run dev:front

nginx配置

由於企業微信應用一定要繫結域名。為了支援開發除錯，可以有不同的策略。如果我們想在伺服器上配置開發環境，然後通過nginx把前端服務和後端服務反向代理給前端，請參見：nginx配置

如何訪問系統

1. 進入後臺管理頁面

網址：http://yourdomain.com/
使用者名稱：root
密碼：123456

2. 同步通訊錄

只有加入到企業微信通訊錄中的使用者才可以訪問自建應用和企業微信小程式。因此，我們需要先進行通訊錄同步操作

當第一次同步完部門和成員後，以後所有的變更（增、刪、改）都會自動進行同步

依次進入：首頁->設定->企業微信->通訊錄管理

3. 企業微信Mobile網頁

在企業微信中直接訪問首頁，系統會自動進行企業微信登入

首頁：http://yourdomain.com/

4. 企業微信Web登入

在瀏覽器中直接訪問首頁，登入頁面會自動顯示企業微信登入按鈕，點選按鈕，即可顯示二微信，通過手機企業微信掃描，自動完成登入

首頁：http://yourdomain.com/

需要進入企業微信的管理後臺，進入自建應用，在開發者介面啟用企業微信授權登入，授權回撥域設定為
yourdomain.com

企業微信小程式

測試模組test-wxwork已經包含了一個企業微信小程式的demo程式，使用步驟如下：

在微信開發者工具中直接匯入demo程式，目錄路徑：{project}/src/module/test-wxwork/front/demo/miniprogram
修改小程式中的appid，檔案路徑：{project}/src/module/test-wxwork/front/demo/miniprogram/project.config.json
修改初始化引數：

{project}/src/module/test-wxwork/front/demo/miniprogram/app.js

// 初始化cabloy
const cabloyOptions = {
  base: {
    scene: 'default',
    locale: 'en-us',
  },
  api: {
    baseURL: 'http://yourdomain.com',
  },
};
this.cabloy = Cabloy(this, cabloyOptions);

預設對應的是default小程式，如果要開發其他小程式，只需修改如下引數

名稱	說明
base.scene	小程式場景名，預設為`default`
base.locale	前端預設使用的語言
api.baseURL	後端服務的API地址