京東小程序CI工具實踐
本文正在參加「金石計劃」
作者:京東物流 張俊峯
本文從整體介紹了京東小程序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 會依據模板緩存狀態判斷是否需要網絡獲取最新模板,當獲取到模板後進行模板加載,加載階段會將產物轉換為視圖樹的結構,轉換完成後將通過表達式引擎解析表達式並取得正確的值,通過事件解析引擎解析用户自定義事件並完成事件的綁定,完成解析賦值以及事件綁定後進行視圖的渲染,最終將目標頁面展示到屏幕。
-
京東小程序CI工具是為開發者提供的工具包,無需依賴開發者工具,即可完成小程序代碼的上傳、預覽等操作。
-
將小程序CI工具和流水線結合,可以優雅地完成小程序代碼的遠程部署,開發者將本地代碼上傳後等待流水線運行完成,最後登錄小程序控制台進行提審發佈即可。
- 應用健康度隱患刨析解決系列之數據庫時區設置
- 對於Vue3和Ts的心得和思考
- 一文詳解擴散模型:DDPM
- zookeeper的Leader選舉源碼解析
- 一文帶你搞懂如何優化慢SQL
- 京東金融Android瘦身探索與實踐
- 微前端框架single-spa子應用加載解析
- cookie時效無限延長方案
- 聊聊前端性能指標那些事兒
- Spring竟然可以創建“重複”名稱的bean?—一次項目中存在多個bean名稱重複問題的排查
- 京東金融Android瘦身探索與實踐
- Spring源碼核心剖析
- 深入淺出RPC服務 | 不同層的網絡協議
- 安全測試之探索windows遊戲掃雷
- 關於數據庫分庫分表的一點想法
- 對於Vue3和Ts的心得和思考
- Bitmap、RoaringBitmap原理分析
- 京東小程序CI工具實踐
- 測試用例設計指南
- 當你對 redis 説你中意的女孩是 Mia