京东小程序CI工具实践-京东云开发者社区

### 1 前言

#### 1.1 京东小程序简介

京东小程序平台是一个全面开发的生态模式，入驻平台后，能分享京东系APP流量福利、海量SKU和开放能力。提升用户体验，给商家带来新机遇。

京东小程序架构分为视图层和逻辑层，视图层运行在WebView容器里，负责UI渲染；逻辑层运行在JSCore的沙箱容器里，负责数据处理。二者通过JSBridge通道进行数据通信。京东小程序架构图如图1所示。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/780ba557-de97-4d77-996d-4a5ef686b52120220921143300.png)

图1 京东小程序架构图</center>
#### 1.2 关于小程序CI工具

小程序CI工具是小程序开发者工具功能的子集，它可以使开发者不依赖开发者工具，即可完成小程序相关的操作，如生成预览版小程序码、上传小程序代码包到控制台等。

### 2 京东小程序CI工具功能介绍

京东小程序CI工具是为京东小程序开发者提供的工具包。开发者无需打开开发者工具，使用工具包即可完成小程序代码的上传、预览等操作。

#### 2.1 使用前准备

##### 2.1.1 秘钥

使用工具包之前，请访问“京东小程序控制台”—设置—开发设置—小程序代码上传秘钥”获取上传秘钥，如图2所示。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/27e966de-5325-4205-a6e5-6d6a6aeec98c20220921143337.png)

图2 京东小程序控制台上传秘钥获取</center>
##### 2.1.2 依赖安装

```bash
npm install jd-miniprogram-ci --save
```

#### 2.2 上传功能

上传功能通过指定小程序的上传秘钥、项目路径，以及版本号、描述等信息，将小程序上传到京东小程序控制台，上传成功后会生成版本记录，可以进行体验版验证和版本提审。版本记录效果如图3所示。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/af5073e8-9ccc-41f6-b3f5-abbdfcbba0eb20220921143427.png)

图3 上传成功效果图</center>
上传后的体验版二维码没有时间限制，可以一直使用。

##### 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 执行。

### 3 小程序CI工具的使用场景

如果只是本地上传，CI工具的作用只是摆脱了版本预览和上传对开发者工具的依赖，还是需要人为进行上传命令的执行。我们可以将CI工具和流水线结合使用。

#### 3.1 小程序上传脚本配置

##### 3.1.1 新增上传脚本

在项目根目录新增上传脚本，如upload.js，关键代码如下

##### 3.1.2 package.json修改

新增scripts配置如下

```bash
"scripts": {
    "upload": "node upload.js"
}
```

#### 3.2 流水线配置

##### 3.2.1 参数配置

流水线参数配置如图4所示。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/a5054f5f-b004-4597-a771-49444e6ddf9820220921143659.png)

图4 流水线参数配置</center>
新增小程序流水线配置，将上传秘钥配置在流水线参数中。秘钥是小程序上传凭证，要避免泄漏，保证安全性。

##### 3.2.2 新增NodeJS编译原子

编译命令配置如下

```bash
rm -rf node_modules
npm config set strict-ssl false
npm install
npm run upload
```

#### 3.3 流水线运行

##### 3.3.1 流水线运行效果图

流水线运行效果图如图5所示。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/6cf7cbc4-b7a3-4ffc-8495-dfddf23bee9620220921143802.png)

图5 流水线运行效果图</center>
流水线运行完成后，在京东小程序控制台即可看到上传的版本，如图6所示。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/a8092c70-0ce3-49bc-812c-093e9c23b30020220921143828.png)

图6 流水线上传成功效果图</center>
##### 3.3.2 CI工具结合流水线运行流程图

小程序CI工具结合流水线，工作流程图如图7所示。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/8d2a44c1-b4d9-4f8e-b801-41cdc1a357a920220921143854.png)

图7 CI工具结合流水线流程图</center>
本地代码push到远程仓库后，流水线通过webhook监听到代码改动，进行代码下载，然后通过npm i进行依赖下载，最后运行upload脚本，通过流水线的参数配置，结合小程序CI工具的上传命令，实现小程序代码包上传。

### 4 小程序CI工具实现原理

#### 4.1 CI客户端

京东小程序CI工具上传流程图如图8所示

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/6a76f6a6-75e9-4643-af88-40fac5e2f3f720220921143923.png)

图8 京东小程序CI工具上传流程</center>
首先通过cac命令行工具进行参数解析，然后通过glob进行项目路径匹配，接着进行文件压缩（注意处理不同系统平台文件路径），通过chokidar实现文件监听，最后将压缩文件进行上传，将生成的二维码信息展示在终端terminal中。

#### 4.2 CI服务端

CI服务端基于Nest.js框架开发，封装了京东内部jsf、ump、logbook等中间件，系统架构图如图9所示。通过http方式与jsf和宙斯网关进行交互，为CI客户端提供打包编译、查询打包id、生成打包二维码等接口服务。

<center>![](//img1.jcloudcs.com/developer.jdcloud.com/365db1bc-4d37-4ca0-a515-0fbc2f79a1c920220921143954.png)

图9 CI服务端系统架构图</center>
### 5 总结
京东小程序CI工具是为开发者提供的工具包，无需依赖开发者工具，即可完成小程序代码的上传、预览等操作。

将小程序CI工具和流水线结合，可以优雅地完成小程序代码的远程部署，开发者将本地代码上传后等待流水线运行完成，最后登录小程序控制台进行提审发布即可。

------------

###### 自猿其说Tech-JDL京东物流技术与数据智能部
###### 作者：张俊峰 彭博 王明鑫 王春雨