2020ICPC小米邀請賽決賽B Rikka with Maximum Segment Sum
前言
現在軟體開發不僅要面對前端碎片化
,還要面對後端碎片化
。針對前端碎片化
,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網頁
在企業微信
中直接訪問首頁,系統會自動進行企業微信登入
4. 企業微信Web登入
在瀏覽器
中直接訪問首頁,登入頁面會自動顯示企業微信登入
按鈕,點選按鈕,即可顯示二微信,通過手機企業微信掃描,自動完成登入
需要進入企業微信的管理後臺,進入
自建應用
,在開發者介面
啟用企業微信授權登入
,授權回撥域
設定為
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地址 |