miniprogram-ci 实现uniapp微信小程序代码预览和上传

小程序开发好几年了，需求越来越多，小程序开发工具打包也老是动不动就崩溃，研究发现接入微信小程序的CI工具，可以实现一键发布，了解后，赶紧把自己的小程序也加上了这个功能
文档参考链接： miniprogram-ci
可以给存在多个appid的小程序进行不同的预览和打包上传到不同的微信公众平台
引用依赖包

npm i miniprogram-ci
npm i path
npm i yargs
npm i readline
npm i @nuintun/qrcode
npm i jimp
npm i qrcode-terminal
npm i cross-env

小程序上传密钥和配置白名单

密钥下载下来 名称一般为 private.*******.key ，我是放到根目录备用

项目根目录下面新建一个qrcode文件夹用于放生成的 二维码图片

创建qr.js

const { Decoder } = require('@nuintun/qrcode')
const Jimp = require('jimp')
var terminal = require('qrcode-terminal')
const qrcode = new Decoder()
module.exports = async function (imagePath) {
  var imgSrc = await Jimp.read(imagePath)
  var result = qrcode.decode(
    new Int32Array(imgSrc.bitmap.data),
    imgSrc.getWidth(),
    imgSrc.getHeight()
  )

  terminal.generate(result.data, { small: true }, function (qrcode) {
    console.log(qrcode)
  })
}

编写上传和预览脚本
根目录创建upload.js文件

// 小程序发版
const ci = require('miniprogram-ci');
const path = require('path');
const argv = require('yargs').argv;
const readline = require('readline');
console.qr = require('./qrcode/qr.js')
const rl = readline.createInterface({
	input: process.stdin,
	output: process.stdout
});
let projectPath = './unpackage/dist/dev/mp-weixin' 
let privateKeyPath = './private.xxxxx.key' 
let appid = 'xxxxxxxx' //小程序appid
let versions = '1.0.1'
let descs = '1.0.1'
const NODE_ENV = process.env.NODE_ENV || 'development'; // 当前环境
//NODE_ENV可能是undefined，这个时候需要根目录创建.env.development文件
if (process.env.NODE_ENV === "development") {
	appid = appid    //开发环境appid
	projectPath = projectPath 
	privateKeyPath =privateKeyPath 
}else{
}

console.log(NODE_ENV)
return (async () => {
	if (argv.type == 'upload') {
		// versions = await question("1.5.4.2");
		// console.log(`新版本号：${versions}`);
		// descs = await question("testtesttest");
		// console.log(`备注：${descs}`);
		
		rl.close();
	}else{
	}

	// 注意： new ci.Project 调用时，请确保项目代码已经是完整的，避免编译过程出现找不到文件的报错。
	const project = new ci.Project({
		appid: appid,
		type: 'miniProgram',
		projectPath: path.join(__dirname, projectPath), // 项目路径
		privateKeyPath: path.join(__dirname, privateKeyPath), // 密钥的路径
		ignores: ['node_modules/**/*','.git',],
	})
	if (argv.type == 'preview') {
		const previewResult = await ci.preview({
			project,
			desc: 'test', // 此备注将显示在“小程序助手”开发版列表中
			setting: {
				es6: true,
				es7:true,
				minify: true,
				autoPrefixWXSS: true, // 上传时样式自动补全
				minifyJS: true,
				minifyWXML: true,
				minifyWXSS: true,
			},
			qrcodeFormat: 'image',
			qrcodeOutputDest: path.join(__dirname, '/qrcode/destination.jpg'),
			onProgressUpdate: console.log,
			pagePath: 'pages/index/index', // 预览页面
			searchQuery: '', // 预览参数 [注意!]这里的`&`字符在命令行中应写成转义字符`\&`
		})
		console.log('previewResult', previewResult)
		console.qr(path.join(__dirname, '/qrcode/destination.jpg'))
	} else {
		// 测试 打包完 需要等待一会才能读到文件，所以加个定时器
		console.log('等待5秒后 开始上传')
		console.log('版本号',versions)
		let s = 5
		let timer = setInterval(async () => {
			--s
			console.log(`${s}秒`)
			if (s == 0) {
				clearInterval(timer);
				timer = undefined
				const uploadResult = await ci.upload({
					project,
					version: '1.0,
					desc: 'test',
					setting: {
						es6: true, // es6 转 es5
						es7:true,
						minify: true,
						autoPrefixWXSS: true, // 上传时样式自动补全
						minifyJS: true,
						minifyWXML: true,
						minifyWXSS: true,

					}
				})
				console.log('uploadResult', uploadResult)
			}
		}, 1000)
	}
})()

根目录创建.env.development

ENV = 'development'
NODE_ENV = development

修改package.json

 "scripts": {
    "preview-test": "cross-env NODE_ENV=development node upload --type=preview",
    "preview": "cross-env NODE_ENV=product node upload --type=preview",
    "build-test": "cross-env NODE_ENV=development node upload --type=upload",
    "build": "cross-env NODE_ENV=product node upload --type=upload"
  },

配置好后执行

npm run preview-test --测试环境预览
npm run preview --生产环境预览
npm run build-test --测试环境上传
npm run build--生产环境上传

上传成功后可以看到版本

预览会生成一个二维码

之后就不用打开工具去预览和上传发布了，指令一键发布~