微信小程序CI/CD(自动构建部署)实现

3,372 阅读2分钟

前言

在当下这个微信流量称王的时代,微信场景是各个商家的必争之地,当然有微信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;

666.jpeg