乐趣区

关于ci:京东小程序CI工具实践

jiezi

作者：京东物流 张俊峰

本文从整体介绍了京东小程序 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 工具和流水线联合，能够优雅地实现小程序代码的近程部署，开发者将本地代码上传后期待流水线运行实现，最初登录小程序控制台进行提审公布即可。
退出移动版