如何一行命令就自动上传小程序代码?
笔者在开发小程序时发现:上传代码到小程序后台时,需要手动填写版本号和备注信息,如下图所示:
上图中上传代码的表单中,版本号字段不会显示上次上传的版本号更不会合理的升级版本号,手动填写的版本号可能不规范,而备注字段需要手动填写也是比较麻烦的。有没有什么办法能够不需要手动填写版本号和项目备注信息还能够成功上传代码呢?
强大的微信小程序为我们提供一个开发辅助功能——CI,CI辅助功能已经封装为npm包——miniprogram-ci。下面我们就来学习如何使用CI完成代码自动上传功能。
CI简介与使用注意事项
miniprogram-ci 是从微信开发者工具中抽离的关于小程序/小游戏项目代码的编译模块。开发者可不打开小程序开发者工具,独立使用 miniprogram-ci 进行小程序代码的上传、预览等操作。
需要注意:
1.使用 miniprogram-ci 前应访问"微信公众平台-开发 - 开发设置"后下载代码上传密钥。
2.配置 IP 白名单。访问"微信公众平台-开发 -开发管理- 开发设置-小程序代码上传" ,开发者可选择打开 IP 白名单,打开后只有白名单中的 IP 才能调用相关接口。这里笔者提醒大家注意:编辑IP白名单时需要小程序的管理员扫描二维码。
使用CI上传小程序代码
使用CI功能之前需要安装miniprogram-ci ,笔者将其安装为开发依赖:
npm install miniprogram-ci -D
然后在当前小程序项目的目录下新建了一个文件 upload.js 用于编写小程序上传的代码,在package.json中增加一条npm script:
"scripts": {
"upload": "node upload.js"
},
如此一来我们就可以使用npm run upload
命令上传小程序代码了,是不是感觉这样挺爽?但是爽是要付出代价的,我们要把upload.js 脚本完善一下。
首先要新建一个项目对象,如下代码所示:
import ci from 'miniprogram-ci';
const project = new ci.Project({
appid: 'wx4206***19',
type: 'miniProgram',
projectPath: 'E:/GitSpace/fs-new/lio-4s-applet',
privateKeyPath: path.resolve('private.wx42*****e8d19.key'),
ignores: ['node_modules/**/*'],
})
这里涉及的参数我们来看一下:
- appid是小程序的 appid
- type是项目类型这里为miniProgram
- projectPath是项目的路径(project.config.json 所在的目录)
- privateKeyPath是私钥的路径
有了project对象之后我们可以使用ci的upload方法来上传小程序代码了:
// 使用小程序ci上传代码
const uploadResult = await ci.upload({
project,
version: version,
desc: commitMsg,
setting: {
es6: true,
minifyJS: true,
minifyWXML: true,
minifyWXSS: true
},
onProgressUpdate: console.log,
})
这里涉及的参数我们来看一下:
- project是通过new ci.Project创建的项目对象
- version是自定义版本号,这里我们传入了version变量,稍后会说明
- desc是自定义备注,这里我们传入了commitMsg变量,稍后会说明
- setting是编译设置,详见文档
- onProgressUpdate是进度更新监听函数,我们使用console.log
下面详细说一下version和commitMsg变量,version其实是读取的package.json中的version字段,commitMsg则是获取的提交信息。为了让版本号和commitMsg更加规范,需要使用release-it和git-cz, 想要了解如何在小程序中使用这两个工具可以阅读笔者的文章:《如何规范微信小程序项目的提交信息和上传版本号?》。假设项目中已经集成了release-it和git-cz,并且package.json文件中也有如下npm script:
"scripts": {
"commit": "git-cz",
"release": "release-it"
}
然后在upload.js中增加如下代码用于获取version和commitMsg:
const call = async (bin, args) => (await execa(bin, args)).stdout
const isChina = (s) => {
var reg = new RegExp("[\u4E00-\u9FFF]+", "g");
if (reg.test(s)) {
return true
} else {
return false
}
}
// 获取版本号
const packageJsonData = JSON.parse(fs.readFileSync(path.resolve('package.json'), 'utf8'))
const version = packageJsonData.version
// 获取提交信息(版本变更信息)
let res = await call('git', ['log', '-1'])
let resArr = res.split('\n')
let commitMsg = resArr[resArr.length - 1].trim()
if (!isChina(commitMsg)) {
res = await call('git', ['log', '-2'])
resArr = res.split('\n')
commitMsg = resArr[resArr.length - 1].trim()
}
这样在运行npm run upload
命令之前先运行npm run commit
和 npm run release
命令即可。这样就做到了自动上传小程序代码到小程序后台了。如下图所示:
当然了我们也可以把 npm run commit
和 npm run release
放到upload.js脚本中执行,这样就更加自动化了并且可以保证上传代码到小程序后台之前回提交一次代码到远程仓库,为小程序的版本提供备份。感兴趣的读者可以实现一下。
总结
微信开发者工具提供的上传代码功能在将上传代码到小程序后台时,需要手动填写版本号和备注信息,存在效率低下和不规范问题。
miniprogram-ci 是从微信开发者工具中抽离的关于小程序/小游戏项目代码的编译模块。使得开发者可不打开小程序开发者工具,独立使用 miniprogram-ci 进行小程序代码的上传、预览等操作。
可以结合release-it和git-cz的使用来规范版本号和提交信息。