前言:
现时同学们对“js仿京东”大致比较关心,大家都想要学习一些“js仿京东”的相关知识。那么小编在网上网罗了一些对于“js仿京东””的相关知识,希望大家能喜欢,小伙伴们一起来了解一下吧!#科技之巅#
作者:京东物流 张俊峰
本文从整体介绍了京东小程序CI工具的用途及工作流程,读者可以通过本文了解到一种全新的京东小程序上传方式,同时结合构建脚本和流水线,可大大提高小程序的部署和发布效率。
01
前言
京东小程序CI工具是为京东小程序打造的效率提升工具。通过CI工具,开发者无需依赖小程序开发者工具即可实现京东小程序的预览、上传等操作。同时结合构建脚本和流水线,可以支持代码包的远程部署,实现小程序CI/CD。
1.1 京东小程序简介
京东小程序平台是一个全面开放的生态模式,入驻平台后,能分享京东系APP流量福利、海量SKU和开放能力。提升用户体验,给商家带来新机遇。
京东小程序架构分为视图层和逻辑层,视图层运行在WebView容器里,负责UI渲染;逻辑层运行在JSCore的沙箱容器里,负责数据处理。二者通过JSBridge通道进行数据通信。京东小程序架构图如图1所示。
1.2 关于小程序CI工具
小程序CI工具是小程序开发者工具功能的子集,它可以使开发者不依赖开发者工具,即可完成小程序相关的操作,如生成预览版小程序码、上传小程序代码包到控制台等。
02
京东小程序CI工具功能介绍
京东小程序CI工具是为京东小程序开发者提供的工具包。开发者无需打开开发者工具,使用工具包即可完成小程序代码的上传、预览等操作。
2.1 使用前准备
2.1.1 秘钥
使用工具包之前,请访问“京东小程序控制台”—设置—开发设置—小程序代码上传秘钥”获取上传秘钥,如图2所示。
2.1.2 依赖安装
【Bash】npm install jd-miniprogram-ci --save2.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
如果CI工具是局部安装的,请通过npx 或./node_modules/.bin/jd-miniprogram-ci 执行。
03
小程序CI工具的使用场景
如果只是本地上传,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所示:
新增小程序流水线配置,将上传秘钥配置在流水线参数中。秘钥是小程序上传凭证,要避免泄漏,保证安全性。
3.2.2 新增NodeJS编译原子
编译命令配置如下:
【Bash】npm installnpm run upload3.3 流水线运行
3.3.1 流水线运行效果图
流水线运行效果图如图5所示:
流水线运行完成后,在京东小程序控制台即可看到上传的版本,如图6所示:
3.3.2 CI工具结合流水线运行流程图
小程序CI工具结合流水线,工作流程图如图7所示:
本地代码push到远程仓库后,流水线通过webhook监听到代码改动,进行代码下载,然后通过npm i进行依赖下载,最后运行upload脚本,通过流水线的参数配置,结合小程序CI工具的上传命令,实现小程序代码包上传。
04
小程序CI工具实现原理
4.1 CI客户端
京东小程序CI工具上传流程图如图8所示:
首先通过cac命令行工具进行参数解析,然后通过glob进行项目路径匹配,接着进行文件压缩(注意处理不同系统平台文件路径),通过chokidar实现文件监听,最后将压缩文件进行上传,将生成的二维码信息展示在终端terminal中。
4.2 CI服务端
CI服务端基于Nest.js框架开发,封装了京东内部jsf、ump、logbook等中间件,系统架构图如图9所示。为CI客户端提供了打包编译、查询打包id、生成打包二维码等接口服务。
05
总结
1. 京东小程序CI工具是为开发者提供的工具包,无需依赖开发者工具,即可完成小程序代码的上传、预览等操作。
2. 将小程序CI工具和流水线结合,可以优雅地完成小程序代码的远程部署,开发者将本地代码上传后等待流水线运行完成,最后登录小程序控制台进行提审发布即可。
标签: #js仿京东