uniapp小程序自动编译上传微信后台

1,026 阅读1分钟

前言:公司oem小程序很多,每次通过hbuildx打包并上传,耗时很多。所以探索一下 miniprogram-ci

感谢:www.cnblogs.com/shiazhen/p/… 提供思路,但由于项目特性,在此基础上填了一波坑

1、微信小程序编译模块安装

npm i miniprogram-ci -D

2、小程序微信管理后台设置

小程序后台开发设置里面启用小程序代码上传,下载密匙文件放到项目里,添加ip白名单,此处是公网白名单,公网白名单查询链接

3、vue-cli 改造 uni-app 项目。(如项目创建之初就是vue-cli,则此步骤略)

vue-cli 改造 uni-app 项目 温馨提示:通过vue-cli 创建的项目,编译资源目录默认是src,可通过 UNI_INPUT_DIR=$INIT_CWD/projectDir,可指定编译目录为projectDir

4、在package.json 的 "scripts": 自定义编译命令

"upload": "npm run build:mp-weixin && node autoUpload.js",

意思是:打包并且执行上传代码

5、创建autoUpload.js 放在 package.json同级目录

const ci = require('miniprogram-ci')
const path = require('path')
const mainfest = require('./itax-page/manifest.json')

async function upload() {
	const project = new ci.Project({
		appid: mainfest['mp-weixin'].appid,//appid
		type: 'miniProgram',
		projectPath: path.resolve(__dirname, './dist/build/mp-weixin'), //项目路径
		privateKeyPath: path.resolve(__dirname, `./private.${mainfest['mp-weixin'].appid}.key`), //小程序后台的上传密匙
		ignores: ['node_modules/**/*'],
	})

	const uploadResult = await ci.upload({
		project,
		version: mainfest.versionName,
		desc: mainfest.description,
		setting: mainfest['mp-weixin'].setting,
		onProgressUpdate: console.log,
	}).then(res => {
		console.log(res)
		console.log(`上传成功,appId==${mainfest['mp-weixin'].appid},版本号==${mainfest.versionName}`)
	}).catch(error => {
		console.log(`上传失败,appId==${mainfest['mp-weixin'].appid},版本号==${mainfest.versionName}`)
		throw error
	})
};

upload();


坑点:manifest.json 里面默认有注释,应该删除所有注释,不然会报json转换错误

6、运行 npm upload ,如开发者工具未登陆 则需要登陆,成功后的图片如下:

image.png