前言
在当下这个微信流量称王的时代,微信场景是各个商家的必争之地,当然有微信h5链接可以自由投放,但小程序的良好体验及后台确实更胜一筹;那我们今天就来实现一下微信小程序的一个CI/CD流程,提升我们的开发效率
目标
现存痛点
- 开发完成之后需要切换对应test等分支拉取代码本地构建,很容易误操作,如未拉取最新代码等问题
- 切换分支,本地构建,打开微信开发者工具,再点击上传,整个操作很繁琐,对于程序员来说简直要命
- 多人开发时,如a开发A功能,b开发B功能,当两个人同时完成后会有两个版本提交,然而体验版只能选择一个,这就导致团队协作成为问题,如果有多环境,那么也将会造成更多的问题,特别影响效率
开始解决
我们采用微信官方提供的ci工具 miniprogram-ci来解决这件事情
第一步,先下载
npm install miniprogram-ci -S
第二步,制定版本规范
/**
* @description 小程序版本维护
* 版本list只增不删
* 最新更新保持在第一条
*/
const versionList = [
{
version: "1.0.1",
desc: "小细节更改",
author: "xiaohong.wei"
},
{
version: "1.0.0",
desc: "小程序初始化",
author: "xiaoming.wei"
}
];
const env = process.argv.slice(2)[0].split("=")[1];
const curVersion = versionList[0];
curVersion.desc = `${env} 环境:${curVersion.desc}-by@${curVersion.author}`;
module.exports = curVersion;
第三步,编写上传脚本 upload.js
const env = process.argv.slice(2)[0].split("=")[1];
const robotMap = {
"test": 1,
"production": 2
};
const robot = robotMap[env];
const ci = require("miniprogram-ci");
let { version, desc } = require("./update");
if (!version) version = "1.0.0";
if (!desc) desc = new Date() + "上传";
console.log("当前上传分支为:" + env + ";目录为:" + (env === "production" ? "build" : "dev") + ";");
const project = new ci.Project({
appid: "自己的appid",
type: "miniProgram",
projectPath: "项目目录",
// 上传秘钥文件,微信公众平台/开发管理/小程序代码上传处生成上传秘钥,必要时可配置白名单ip以保证安全性
privateKeyPath: process.cwd() + "/key/private.xxxxxx.key"
});
ci.upload({
project,
version,
desc,
setting: {
minify: true,
es6: true,
es7: true,
minifyJS: true,
minifyWXML: true,
minifyWXSS: true,
autoPrefixWXSS: true
},
robot
}).then(res => {
console.log(res);
console.log("上传成功");
console.log("小程序发版成功,请前往微信公众平台查看");
}).catch(error => {
if (error.errCode === -1) {
console.log("上传成功");
console.log("小程序发版成功,请前往微信公众平台查看");
}
console.log(error);
console.log("上传失败");
process.exit(-1);
});
第四步,编写构建脚本 deploy.sh
stage=$1
workDir=`pwd`
git pull
md5_old=`cat package.md5`
md5_new=`md5sum package.json | awk '{print $1}'`
if [ ! -d "$workDir/node_modules" ];
then
echo "node_modules目录缺失,开始执行 npm i"
echo "$md5_new" > package.md5
npm i
elif [ "$md5_old" = "$md5_new" ];
then
echo "package.json文件无更新,无需安装依赖"
else
echo "md5_old=$md5_old,md5_new=$md5_new"
echo "package.json文件有更新,开始执行 npm i"
echo "$md5_new" > package.md5
npm i
fi
if [ "$?" != "0" ]; then
echo "package install faild!!!"
exit 1
fi
# 小程序构建
npm run build:mp-weixin:${stage}
if [ "$?" != "0" ]; then
echo "miniprogram build faild!!!"
exit 1
fi
# 上传小程序代码
npm run upload:${stage}
if [ "$?" != "0" ]; then
echo "miniprogram upload faild!!!"
exit 1
fi
实现成果
代码实现部分已完成,当代码编写合并完成之后只需用执行该脚本即可;
接下来就可以将此脚本配置与jenkins/gitlab-ci/自接口+githook 等方式配合实现全面自动化,毫不夸张的说,相比传统构建部署模式提效70%不止,有这时间,写个新需求他不香吗?
并且自动化的工作也能保证永远是最新的代码,这样下来,微信公众平台的版本提交记录永远会有两个机器人,test 和 production,不管有多少人同时开发需求,都将会以两个小家伙身上体现,再者测试也能清晰的知道该选哪个为体验版来测试了,极大的提高了团队协作能力
致敬每一位前端coder;Respect;