小程序CI/CD之自动化打包预览并钉钉通知发布进程

小程序打包方式分为两种：手动打包、自动打包
那如何实现 自动打包 呐？我们今天就来聊一聊！

首先，很重要，看 官方文档
这里提到今天我们要聊的“主角” miniprogram-ci

miniprogram-ci 是从微信开发者工具中抽离的关于小程序/小游戏项目代码的编译模块。
开发者可不打开小程序开发者工具，独立使用 miniprogram-ci 进行小程序代码的上传、预览等操作。

然后，我们 怎么做！！！

一：准备工作

使用 miniprogram-ci 前应访问"微信公众平台-开发-开发设置"后下载代码上传密钥（最终是需要放在项目根目录下的），并配置 IP 白名单 开发者可选择打开 IP 白名单，打开后只有白名单中的 IP 才能调用相关接口。

再者便是，需要在我们的项目中做好环境区分，即做好：测试环境 、预发环境、生产环境 等环境的区分

package.json 文件中代码如下所示：

ps：我们的小程序使用的是 Uni-App 开发的，因此代码打包命令行的前缀是 build:mp-weixin-xx 类似这样

二：下载包

npm install miniprogram-ci --save
1

三：项目根目录下编写脚本文件upload.js-实现自动化上传

直接上代码，有注释！（ps：不清楚的地方，我们评论区见~~）

const project_config = require("./project.config.json");
const child_process = require("child_process");
const ci = require("miniprogram-ci");
const inquirer = require("inquirer");
const request = require("request");
const fse = require("fs-extra");
const util = require("util");
const path = require("path");
const fs = require("fs");

const example = {
  appid: "",  // 小程序的appid
  name: "",  // 小程序的名字
  choices: [
    "测试环境3-test3",
    "测试环境4-test4",
    "预发环境-pre",
    "演示环境-rep",
    "生产环境-prod",
  ],
  robot_1: 1, // 机器人 1 号
  robot_2: 2, // 机器人 2 号
  robot_3: 3, // 机器人 3 号
  version: "1.0.0",
};

class appletCI {
  exec = util.promisify(child_process.exec);
  config = {};
  // 流水线执行上传操作方法
  async init() {
    const result_data = await this.inquirer(project_config);
    this.config = await this.update_config(result_data);
    this.fs_rewrite_config();
    await this.upload(result_data);
  }
  // 问答：选择环境、版本号、描述
  async inquirer(config) {
    return inquirer.prompt([
      {
        type: "list",
        name: "env",
        message: "请选择部署环境：",
        default: 0,
        choices: example.choices,
      },
      {
        type: "input",
        name: "version",
        message: `设置上传的版本号（当前版本号：${config.version}）:`,
        filter(opts) {
          if (opts === "") {
            return config.version;
          }
          return opts;
        },
      },
      {
        type: "input",
        name: "desc",
        message: "请写一个简单的介绍来描述这个版本改动过：",
      },
    ]);
  }
  // 更新配置信息
  async update_config(user_info) {
    const env = user_info.env.split("-")[1];
    const env_desc = user_info.env.split("-")[0];
    const config = {
 	  appid: "",  // 小程序的appid
  	  name: "",  // 小程序的名字
      env,
      env_desc,
      version: user_info.version,
      desc: user_info.desc || env_desc,
      robot:
        env === "prod" || env === "pre"
          ? example.robot_3
          : env === "rep"
          ? example.robot_2
          : example.robot_1,
    };

    return config;
  }
  // 重写配置文件
  fs_rewrite_config() {
    fs.writeFileSync(
      "./project.config.json",
      JSON.stringify(this.config),
      (err) => {
        if (err) {
          console.log(
            "自动写入 project.config.json 文件失败，请手动填写，并检查错误！"
          );
        }
      }
    );
  }
  // 打包上传
  async upload() {
    const {
      appid: "",  // 小程序的appid
  	  name: "",  // 小程序的名字
      env = "test3",
      env_desc = "测试环境3",
      desc = "测试环境3",
      robot = example.robot_1,
      version = example.version,
    } = this.config || {};

    console.log(`${env_desc}正在打包`);
    this.message(`${name}小程序-${env_desc}，正在部署`);
    await this.exec(`npm run build:mp-weixin-${env}`, { cwd: "./" });
    await this.copyFiles();
    console.log(`${env_desc}正在部署`);
    const project = new ci.Project({
      appid,
      type: "miniProgram",
      projectPath: path.join(__dirname, "./dist/build/mp-weixin"),
      privateKeyPath: path.join(__dirname, "./private." + appid + ".key"),
      ignores: ["node_modules/**/*", ".vscode", ".hbuilderx"],
    });

    await ci
      .upload({
        project,
        robot,
        desc,
        version,
        onProgressUpdate: console.log,
      })
      .then(() => {
        this.message(`${name}小程序-${env_desc}，部署完成`);
        console.log("部署完成");
      })
      .catch((error) => {
        if (error.errCode == -1) {
          this.message(`${name}小程序-${env_desc}，部署完成`);
          console.log("部署完成");
          return;
        }
        this.message(`${name}小程序-${env_desc}，部署失败，原因为：${error}`);
        console.log("部署失败", error);
        process.exit(-1);
      });
  }
  // 复制 project.config 文件至 dist
  async copyFiles() {
    try {
      await fse.copy(
        path.join(__dirname, "./project.config.json"),
        path.join(__dirname, "./dist/build/mp-weixin/project.config.json")
      );
    } catch (err) {
      console.error(err);
    }
  }
  // 发送钉钉消息
  message(content) {
    const data = {
      msgtype: "text",
      text: { content },
    };
    request({
      url: "",  // 钉钉群里可以看到的webhook地址
      method: "POST",
      headers: {
        "content-type": "application/json",
      },
      body: JSON.stringify(data),
    });
  }
}

const CI = new appletCI();
CI.init();

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178

执行 ：

node upload
1

执行完命令行的终端交互：


继续回车即可 自动化打包完成！

随后，我们去小程序管理后台拿到预览码即可

附录1：钉钉通知结果：

附录:2：钉钉的webhook地址如下图：

附录3：代码中有写到，自动化打包更改的 project.config.json 文件内容如下（每次打包后，该文件都会被更新）：

{
"name":"",
"appid":"",
"env":"test3",
"env_desc":"测试环境3",
"version":"",
"desc":"",
"robot":1
}
1
2
3
4
5
6
7
8
9

再聊点其他的，提升点

鉴于在使用过程中获取体验码时，还需打开小程序管理后台获取验证码图片，未彻底解放双手，那么我们再去官方文档中扒拉扒拉，发现 preview 方法是专门实现预览功能滴，即，可实现：自动下载预览二维码图片至本地的某个路径！

具体可查看-预览模块如何实现：

至此，解放双手，happy end！！！