本文正在參加「金石計劃」

作者：京東物流 張俊峯

本文從整體介紹了京東小程序CI工具的用途及工作流程，讀者可以通過本文了解到一種全新的京東小程序上傳方式，同時結合構建腳本和流水線，可大大提高小程序的部署和發佈效率。

01 前言

在今年的敏捷團隊建設中，我通過Suite執行器實現了一鍵自動化單元測試。Juint除了Suite執行器還有哪些執行器呢？由此我的Runner探索之旅開始了！

京東小程序CI工具是為京東小程序打造的效率提升工具。通過CI工具，開發者無需依賴小程序開發者工具即可實現京東小程序的預覽、上傳等操作。同時結合構建腳本和流水線，可以支持代碼包的遠程部署，實現小程序CI/CD。  

1.1  京東小程序簡介

京東小程序平台是一個全面開放的生態模式，入駐平台後，能分享京東系APP流量福利、海量SKU和開放能力。提升用户體驗，給商家帶來新機遇。

京東小程序架構分為視圖層和邏輯層，視圖層運行在WebView容器裏，負責UI渲染；邏輯層運行在JSCore的沙箱容器裏，負責數據處理。二者通過JSBridge通道進行數據通信。京東小程序架構圖如圖1所示。

圖1 京東小程序架構圖

1.2  關於小程序CI工具

小程序CI工具是小程序開發者工具功能的子集，它可以使開發者不依賴開發者工具，即可完成小程序相關的操作，如生成預覽版小程序碼、上傳小程序代碼包到控制枱等。

02  京東小程序CI工具功能介紹

理解，首先 MCube 會依據模板緩存狀態判斷是否需要網絡獲取最新模板，當獲取到模板後進行模板加載，加載階段會將產物轉換為視圖樹的結構，轉換完成後將通過表達式引擎解析表達式並取得正確的值，通過事件解析引擎解析用户自定義事件並完成事件的綁定，完成解析賦值以及事件綁定後進行視圖的渲染，最終將目標頁面展示到屏幕。     

京東小程序CI工具是為京東小程序開發者提供的工具包。開發者無需打開開發者工具，使用工具包即可完成小程序代碼的上傳、預覽等操作。

2.1  使用前準備

2.1.1 祕鑰

使用工具包之前，請訪問“京東小程序控制台”—設置—開發設置—小程序代碼上傳祕鑰”獲取上傳祕鑰，如圖2所示。

圖2 京東小程序控制台上傳祕鑰獲取

2.1.2 依賴安裝

【Bash】 npm install jd-miniprogram-ci --save

2.2  上傳功能

上傳功能通過指定小程序的上傳祕鑰、項目路徑，以及版本號、描述等信息，將小程序上傳到京東小程序控制台，上傳成功後會生成版本記錄，可以進行體驗版驗證和版本提審。版本記錄效果如圖3所示。

圖3 上傳成功效果圖

上傳後的體驗版二維碼沒有時間限制，可以一直使用。

2.2.1 腳本調用

腳本調用方式如下：

【Javascript】 const { upload } = require('jd-miniprogram-ci') upload({ privateKey: 'your private key', projectPath: 'your project path', uv: '1.0.0', desc: '自定義描述信息', base64: false, })

通過base64選項控制二維碼在終端展示，還是作為上傳結果返回。

2.2.2 命令行調用

命令行調用方式如下：

【Bash】jd-miniprogram-ci upload --privateKey your_private_key --projectPath your/project/path --uv '1.0.0' --desc '自定義備註' --base64 false

需要注意的是，如果CI工具是局部安裝的，請通過npx 或./node_modules/.bin/jd-miniprogram-ci 執行。

2.3  預覽功能

預覽功能通過指定小程序的上傳祕鑰、項目路徑，生成一個臨時的預覽版本，用於開發調試。預覽版二維碼有效期為5分鐘。

2.3.1 腳本調用

腳本方式調用方式如下：

【Bash】 const { preview } = require('jd-miniprogram-ci') preview({ privateKey: 'your private key', projectPath: 'your project path', base64: false, })

通過base64選項控制二維碼在終端展示，還是作為上傳結果返回。

2.3.2 命令行調用

命令行調用方式如下：

【Bash】jd-miniprogram-ci preview --privateKey your_private_key --projectPath your/project/path --base64 false

如果CI工具是局部安裝的，請通過npx 或./node_modules/.bin/jd-miniprogram-ci 執行。

03  小程序CI工具的使用場景

理解，首先 MCube 會依據模板緩存狀態判斷是否需要網絡獲取最新模板，當獲取到模板後進行模板加載，加載階段會將產物轉換為視圖樹的結構，轉換完成後將通過表達式引擎解析表達式並取得正確的值，通過事件解析引擎解析用户自定義事件並完成事件的綁定，完成解析賦值以及事件綁定後進行視圖的渲染，最終將目標頁面展示到屏幕。      如果只是本地上傳，CI工具的作用只是擺脱了版本預覽和上傳對開發者工具的依賴，還是需要人為進行上傳命令的執行。我們可以將CI工具和流水線結合使用。

3.1  小程序上傳腳本配置

3.1.1 新增上傳腳本

在項目根目錄新增上傳腳本，如upload.js，關鍵代碼如下：

【Javascript】 const { upload } = require('jd-miniprogram-ci') upload({    privateKey: 'your private key',    projectPath: 'your project path',    uv: '1.0.0', desc: '自定義描述信息', base64: false, })

3.1.2 package.json修改

新增scripts配置如下：

【Bash】 "scripts": { "upload": "node upload.js" }

3.2 流水線配置

3.2.1 參數配置

流水線參數配置如圖4所示：

圖4 流水線參數配置

新增小程序流水線配置，將上傳祕鑰配置在流水線參數中。祕鑰是小程序上傳憑證，要避免泄漏，保證安全性。

3.2.2 新增NodeJS編譯原子

編譯命令配置如下：

【Bash】 npm install npm run upload

3.3  流水線運行

3.3.1 流水線運行效果圖

流水線運行效果圖如圖5所示：

圖5 流水線運行效果圖

流水線運行完成後，在京東小程序控制台即可看到上傳的版本，如圖6所示：

圖6 流水線上傳成功效果圖

3.3.2 CI工具結合流水線運行流程圖

小程序CI工具結合流水線，工作流程圖如圖7所示：

圖7 CI工具結合流水線流程圖

本地代碼push到遠程倉庫後，流水線通過webhook監聽到代碼改動，進行代碼下載，然後通過npm i進行依賴下載，最後運行upload腳本，通過流水線的參數配置，結合小程序CI工具的上傳命令，實現小程序代碼包上傳。

04  小程序CI工具實現原理

理解，首先 MCube 會依據模板緩存狀態判斷是否需要網絡獲取最新模板，當獲取到模板後進行模板加載，加載階段會將產物轉換為視圖樹的結構，轉換完成後將通過表達式引擎解析表達式並取得正確的值，通過事件解析引擎解析用户自定義事件並完成事件的綁定，完成解析賦值以及事件綁定後進行視圖的渲染，最終將目

4.1 CI客户端

京東小程序CI工具上傳流程圖如圖8所示：

圖8 京東小程序CI工具上傳流程

首先通過cac命令行工具進行參數解析，然後通過glob進行項目路徑匹配，接着進行文件壓縮（注意處理不同系統平台文件路徑），通過chokidar實現文件監聽，最後將壓縮文件進行上傳，將生成的二維碼信息展示在終端terminal中。

4.2 CI服務端

CI服務端基於Nest.js框架開發，封裝了京東內部jsf、ump、logbook等中間件，系統架構圖如圖9所示。為CI客户端提供了打包編譯、查詢打包id、生成打包二維碼等接口服務。

圖9 CI服務端系統架構圖

05  總結

理解，首先 MCube 會依據模板緩存狀態判斷是否需要網絡獲取最新模板，當獲取到模板後進行模板加載，加載階段會將產物轉換為視圖樹的結構，轉換完成後將通過表達式引擎解析表達式並取得正確的值，通過事件解析引擎解析用户自定義事件並完成事件的綁定，完成解析賦值以及事件綁定後進行視圖的渲染，最終將目標頁面展示到屏幕。

1. 京東小程序CI工具是為開發者提供的工具包，無需依賴開發者工具，即可完成小程序代碼的上傳、預覽等操作。

2. 將小程序CI工具和流水線結合，可以優雅地完成小程序代碼的遠程部署，開發者將本地代碼上傳後等待流水線運行完成，最後登錄小程序控制台進行提審發佈即可。