京东小程序CI工具实践
张俊峰约 7 分钟
Tech 导读
本文从整体介绍了京东小程序CI工具的用途及工作流程，读者可以通过本文了解到一种全新的京东小程序上传方式，同时结合构建脚本和流水线，可大大提高小程序的部署和发布效率。
导读
京东小程序CI工具是为京东小程序打造的效率提升工具。通过CI工具，开发者无需依赖小程序开发者工具即可实现京东小程序的预览、上传等操作。同时结合构建脚本和流水线，可以支持代码包的远程部署，实现小程序CI/CD。
1.1 京东小程序简介
京东小程序平台是一个全面开放的生态模式，入驻平台后，能分享京东系APP流量福利、海量SKU和开放能力。提升用户体验，给商家带来新机遇。
京东小程序架构分为视图层和逻辑层，视图层运行在WebView容器里，负责UI渲染；逻辑层运行在JSCore的沙箱容器里，负责数据处理。二者通过JSBridge通道进行数据通信。京东小程序架构图如图1所示。
图1 京东小程序架构图
1.2 关于小程序CI工具
京东小程序CI工具是为京东小程序开发者提供的工具包。开发者无需打开开发者工具，使用工具包即可完成小程序代码的上传、预览等操作。
2.1 使用前准备
2.1.1 秘钥
使用工具包之前，请访问“京东小程序控制台”—设置—开发设置—小程序代码上传秘钥”获取上传秘钥，如图2所示。
图2 京东小程序控制台上传秘钥获取
2.1.2 依赖安装
【Bash】npm install jd-miniprogram-ci --save
2.2 上传功能
图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
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 installnpm run upload
3.3 流水线运行
3.3.1 流水线运行效果图
图5 流水线运行效果图
流水线运行完成后，在京东小程序控制台即可看到上传的版本，如图6所示：
图6 流水线上传成功效果图
3.3.2 CI工具结合流水线运行流程图
小程序CI工具结合流水线，工作流程图如图7所示：
图7 CI工具结合流水线流程图
4.1 CI客户端
京东小程序CI工具上传流程图如图8所示：
图8 京东小程序CI工具上传流程
首先通过cac命令行工具进行参数解析，然后通过glob进行项目路径匹配，接着进行文件压缩（注意处理不同系统平台文件路径），通过chokidar实现文件监听，最后将压缩文件进行上传，将生成的二维码信息展示在终端terminal中。
4.2 CI服务端
CI服务端基于Nest.js框架开发，封装了京东内部jsf、ump、logbook等中间件，系统架构图如图9所示。为CI客户端提供了打包编译、查询打包id、生成打包二维码等接口服务。
1. 京东小程序CI工具是为开发者提供的工具包，无需依赖开发者工具，即可完成小程序代码的上传、预览等操作。
2. 将小程序CI工具和流水线结合，可以优雅地完成小程序代码的远程部署，开发者将本地代码上传后等待流水线运行完成，最后登录小程序控制台进行提审发布即可。
求分享
求点赞
求在看
▪功能支撑：会员成长体系、等级计算策略、权益体系、营销底层能力支持
▪用户活跃：会员关怀、用户触达、活跃活动、业务线交叉获客、拉新促活