微信小程序自动化构建(云效)

---

前言

最近开发微信小程序，刚好遇到用阿里云流水线部署的需求，把大致思路记录下来，给有类似需求的同学提供一个参考。

---

一、miniprogram-ci

链接: miniprogram-ci参考文档
项目是使用uni-app中的vue-cli命令构建的。如果是用uni-app搭建的原生小程序可以转成vue-cli构建的。

我的项目运行build命令和upload命令时，插件版本有冲突。所以在云效里单独配置，先把项目打包好，再单独下载miniprogram-ci，这样就不会出现冲突的问题了。

二、将appid和privateKey配置成云效参数

1.修改上传时的脚本

代码如下（示例）：

const ci = require('miniprogram-ci')
let privateKey = ${privateKey};
// 这里将云效变量中的privateKey转换成和从微信公众平台下载下来一样的格式。
let arr = privateKey.split(/(\-{5}[\w\s]+\-{5})/).filter(e => e);
const start = arr[0];
const len = arr.length;
const end = arr[len - 1];
let content = arr[1].replace(/\s/g, '\n');
content = start + content + end;

let { wxVersion: version, wxDesc: desc } = require('../../package.json').wx
if (!version) version = 'v1.0.0'
if (!desc) desc = new Date() + '上传'
const project = new ci.Project({
  appid: ${appid},
  type: 'miniProgram',
  projectPath: 'dist/build/mp-weixin',
  // 这里直接使用privateKey上传，没有使用path参数。 新版本的miniprogram-ci是支持这个参数的。
  privateKey: content,
  ignores: ['node_modules/**/*'],
})
ci.upload({
  project,
  version,
  desc,
  setting: {
    minify: true,  // 开启代码压缩
	es6: true。    // es6 语法支持
  },
}).then(res => {
  console.log(res)
  console.log('上传成功')
}).catch(error => {
  if (error.errCode == -1) {
    console.log('上传成功')
  }
  console.log(error)
  console.log('上传失败')
  process.exit(-1)
})

2.修改manifest.json中的appid

代码如下（示例）：

const fs = require('fs');
const path = require('path');
const manifestData = fs.readFileSync(path.resolve(__dirname, '../manifest.json'),  'utf-8');
function regPlace(path, str) {
	let a = manifestData.split('\n')
	const arr = path.split('.');
	let i = 0;
	let len = arr.length;
	let lastItem = arr[len - 1];
	for(let index = 0; index < a.length; index++) {
		if(a[index].includes(arr[i])) {
			++i;
		}
		if(i === len) {
			a[index] = a[index].replace(new RegExp(`${lastItem}\\s*:\\s*[\\W\\w]+`), `${lastItem}:` + '${appid}' + ',');
			console.log(a[index])
			break;
		}
	}
	a = a.join('\n')
	return a;
}
// 动态匹配manifest.json文件中的appid，将原有的appid替换换成云效环境变量
const data = regPlace('mp-weixin.appid');
// 重新写入manifest.json
fs.writeFileSync(path.resolve(__dirname, '../manifest.json'), data);

3.修改云效配置

在运行时输入配置的环境变量appid：微信小程序id， privateKey：微信小程序上传代码密钥

`先替换修改manifest文件的脚本变量,然后运行该脚本。这是manifest.json中的appid的值为$appid,然后替换manifest.json中的变量,将${appid}替换为传入的环境变量。下一步就是替换上传代码脚本中的privateKey和appid。再运行目录一中的步骤，就完成了。

---

总结

以上就是要分享的内容，本文仅仅简单介绍了微信小程序通过阿里云效实现在线打包部署，后续如果有近一步的优化，也是会持续更新的。