京東小程序CI工具實踐

語言: CN / TW / HK

作者:京東物流 張俊峯

本文從整體介紹了京東小程序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所示。

11.png

圖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工具和流水線結合,可以優雅地完成小程序代碼的遠程部署,開發者將本地代碼上傳後等待流水線運行完成,最後登錄小程序控制台進行提審發佈即可。