本文正在参与「金石方案」

作者：京东物流 张俊峰

本文从整体介绍了京东小程序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东西和流水线结合，能够高雅地完结小程序代码的长途布置，开发者将本地代码上传后等待流水线运转完结，最终登录小程序操控台进行提审发布即可。