preface

In the current era of wechat flow king, wechat scene is the battle for each business, of course, there are wechat H5 links can be put freely, but the good experience of small programs and background is really better; So today we will realize a CI/CD process of wechat small program to improve our development efficiency

The target

Existing pain points

  • After the completion of development, it is necessary to switch the corresponding test and other branch pull codes for local construction, which is easy to misoperation, such as failure to pull the latest code and other problems
  • Switch branches, build locally, open wechat developer tools, and then click upload. The whole operation is tedious and deadly for programmers
  • For example, when a develops a function and B develops B function, two versions will be submitted after the two people finish at the same time. However, only one version can be selected for the experience version, which leads to team collaboration becoming a problem. If there are multiple environments, more problems will be caused, especially affecting efficiency

To solve

We use the CI tool miniProgram-CI officially provided by wechat to solve this problem. The first step is download

npm install miniprogram-ci -S
Copy the code

The second step is to develop version specifications

/ * * *@description Small program version maintenance * version list only add not delete * the latest update to keep the first */
const versionList = [
    {
        version: "1.0.1".desc: "Minor Changes".author: "xiaohong.wei"
    },
    {
        version: "1.0.0".desc: "Small program initialization".author: "xiaoming.wei"}];const env = process.argv.slice(2) [0].split("=") [1];
const curVersion = versionList[0];
curVersion.desc = `${env}Environment:${curVersion.desc}-by@${curVersion.author}`;
module.exports = curVersion;
Copy the code

Step 3: Write the upload script 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() + "Upload";

console.log("The current upload branch is:" + env + "; The directory is:" + (env === "production" ? "build" : "dev") + ";");
const project = new ci.Project({
    appid: "Own AppID".type: "miniProgram".projectPath: "Project Catalogue".// Upload the secret key file, wechat public platform/development management/small program code upload generated upload secret key, if necessary, can configure the whitelist IP to ensure security
    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("Upload successful");
    console.log("The mini program has been released successfully. Please go to the wechat public platform to check it.");
}).catch(error= > {
    if (error.errCode === -1) {
        console.log("Upload successful");
        console.log("The mini program has been released successfully. Please go to the wechat public platform to check it.");
    }
    console.log(error);
    console.log("Upload failed");
    process.exit(-1);
});
Copy the code

Step 4, write the build script 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" ]; NPM I "echo "$MD5_new" > package.md5 NPM I elif ["$MD5_old "= "$MD5_new"]; 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!!!" NPM run build:mp-weixin:${stage} if ["$?!= "0"]; then echo "miniprogram build faild!!!" NPM run upload:${stage} if ["$?"!= "0"]; then echo "miniprogram upload faild!!!" exit 1 fiCopy the code

To achieve results

The code implementation part has been completed, when the code is written and merged, just execute the script;

This script configuration can then be combined with Jenkins/Gitlab-CI/self-interface + Githook to achieve full automation. It is no exaggeration to say that compared to traditional build deployment mode, the efficiency is more than 70%. Wouldn’t it be nice to write a new requirement with this time?

And automation work also can guarantee forever is the latest code, this down, WeChat public platform version there will always be two robots, submit the record of the test and production, regardless of how many people at the same time development needs, with two little ones will be reflected, moreover the test also can clearly know which one to choose to experience version to test, Greatly improved the teamwork ability

Salute every front-end coder; The new one;