前言

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

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

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

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

相關文章參考

• Cabloy-通用的身份認證機制
• Cabloy-微信
• Cabloy-企業微信
• Cabloy-釘釘

Cabloy-微信是什麼

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

核心目標

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

1. 在訊息推送系統中，對新使用者進行註冊
2. 通過網頁登入，對新使用者進行註冊
3. 通過微信小程式登入
   ，對新使用者進行註冊
4. 如果啟用微信開放平臺，如何通過unionid關聯同一使用者
5. 如果系統已經執行一段時間，再啟用unionid機制，如果關聯舊賬號

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

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

特性

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

1. 一站式整合

當前整合了微信公眾號、微信Web登入和微信小程式的介面，具體如下：

2. 開箱即用

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

3. 自動聚斂

我們知道，通過微信開放平臺提供的unionid機制，可以為微信公眾號和微信小程式提供同一身份。但是在實際場景中，往往先開發並部署了微信公眾號和微信小程式。這時候，二者的使用者賬戶是獨立的。那麼當我們配置好了微信開放平臺的unionid機制後，以前獨立的使用者賬戶會自動進行合併。這種機制，我們稱之為自動聚斂

4. 多小程式支援

微信公眾號可以關聯多個微信小程式，因此，模組也提供了多小程式支援。如果啟用了unionid機制，這些小程式同樣也可以實現統一身份的打通

5. 多租戶/多站點支援

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

新建CabloyJS專案

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

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

請參見：指南：快速開始

安裝微信模組

安裝微信模組a-wechat

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

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

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

1. 安裝到node_modules

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

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

2. 安裝到src/module

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

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

配置微信引數

直接在專案配置檔案中配置微信公眾號、Web微信登入和微信小程式的引數

src/backend/config/config.default.js

// modules
config.modules = {
  'a-wechat': {
    account: {
      // 微信公眾號
      public: {
        appID: 'wxf27f7550a33caaaa',
        appSecret: 'bbbb6a3addddbccccc200f973e91aaaa',
        token: 'CabloyJS',
        encodingAESKey: 'qHvLnaaaabufbbbbIbkRBcccctxUIBGddddCo5aeeee',
        message: {
          reply: {
            // 預設回覆
            default: 'You are welcome!',
            // 當關注公眾號時的回覆
            subscribe: 'You are subscribed!',
          },
        },
      },
      // web登入
      web: {
        appID: '',
        appSecret: '',
      },
      // 微信小程式
      minis: {
        default: {
          appID: 'wx823df04764b9bbbb',
          appSecret: 'c2eaaaada3bbbbe4073cccc381bbdddd',
          token: 'CabloyJS',
          encodingAESKey: 'kakPaaaa48mbubbbbRe0w0ccccGbj1v0rWowctVdddd',
        },
      },
    },
  },
};

• account.public: 微信公眾號
• account.web: 支援微信登入Web網站，需要事先通過微信開放平臺申請網站應用，獲得appID和appSecret
• account.minis: 支援多個微信小程式。為了實際開發上的便利，我們預設提供一個default小程式。如果需要開發其他微信小程式，直接在minis新增新的配置即可

執行

啟動後端服務

$ npm run dev:backend

啟動前端服務

$ npm run dev:front

nginx配置

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

如何訪問系統

1. 進入後臺管理頁面

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

2. 微信公眾號網頁

在微信中或微信開發者工具中直接訪問首頁，系統會自動進行微信登入

• 首頁：http://yourdomain.com/

3. 微信Web登入

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

• 首頁：http://yourdomain.com/

微信小程式開發

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

1. 在微信開發者工具中直接匯入demo程式，目錄路徑：{project}/src/module/test-wechat/front/demo/miniprogram

2. 修改小程式中的appid，檔案路徑：{project}/src/module/test-wechat/front/demo/miniprogram/project.config.json

3. 修改初始化引數：

{project}/src/module/test-wechat/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小程式，如果要開發其他小程式，只需修改如下引數

相關連結

• 官網: https://cabloy.com/
• GitHub: https://github.com/zhennann/cabloy