文章皆对标实际项目, 皆已实践, 皆为原创

发现的问题

- 执行build打包项目后, 需要在开发工具选定dist目录, 点击上传进行发版
- 在uni项目中, 因为dist下有build/dev两个压缩包, 开发时需额外打开一个开发项目进行上传
- 不同开发者都会在后台生成一个开发版本, 需要指定切换为体验版

实现思路

- 获取小程序上传密钥, 进行ip白名单配置
- 使用微信官方提供的miniprogram-ci编写上传脚本
- 终端输出体验版二维码, 便于测试
- 项目package.json配置执行脚本

~~~废话不说, 直接撸码🤺🤺

实现步骤

1. 配置密钥和白名
   

   注:

   • 下载后的密钥文件一般放置在项目根目录: project/private.xxx.key
   • 当不清楚ip时, 可先执行上传脚本, 终端会提示当前ip不在白名单, 复制配置即可

2. 编写上传脚本

   • 脚本文件一般放置项目根目录或config配置目录下, 以下以config/wxUpload.js为例
   • 配置上传项

   	// TODO: 如果需要添加版本号, 可以再这里添加版本信息
   	const version = '0.0.1'
   	// TODO: 如果需要添加备注信息, 可以再这里添加描述
   	const desc = '对当前体验版的文本描述'
   	
   	const project = new ci.Project({
     		appid: '当前小程序appid, 可在后台 管理 => 开发管理 => 开发者ID查看',
   	  	type: 'miniProgram(当前项目类型, 非必填, 一般为miniProgram)',
   		// 项目路径, 重: uni为dist/build/mp-weixin, taro为dist
   	 	projectPath: '打包后的项目路径',
   		// 私钥路径: 结合步骤一, 密钥放置位置
     		privateKeyPath: 'xxx, 一般为path.join(__dirname, './private.xxx.key')',
   	  	// 指定需要排除的规则
   	  	ignores: ['node_modules/**/*']
   	});
   

   • 上传体验版

   	const ci = require('miniprogram-ci');
   	ci.upload({
   	  project,
   	  version,
   	  desc,
   	  setting: {
   	    es6: true, // 转es5, 对应开发工具 将JS编译成ES5
   	    minifyWXML: true, // 压缩wxml
   	    minifyWXSS: true, // 压缩wxss
   	    minifyJS: true, // 压缩js
   	    minify: true, // 对应小程序开发者工具的 "压缩代码"
   	  },
   	  // onProgressUpdate: console.log, // 上传进度监听函数
   	}).then(res => {console.log('上传成功', res)})
   		.catch(error => {console.error('上传失败', error)});
   

   • 体验版预览, 生成体验版二维码图片

   	ci.preview({
     		project,
   		desc,
   		setting: {
   	    	es6: true,
   		    minifyWXML: true,
   		    minifyWXSS: true,
   		    minifyJS: true,
   		    minify: true, // 对应小程序开发者工具的 "压缩代码"
   	  	},
   	    qrcodeFormat: 'image',
   	  	qrcodeOutputDest: path.join(__dirname, '父级路径/qrcodeImg.png'),
   	  	// onProgressUpdate: console.log, // 预览进度监听函数
   		}).then(async res => {
   	  	console.log('本地体验版二维码图片生成成功, 可在<<父级路径/qrcodeImg.png>>路径查看喽')
   		}).catch(error => {
     		console.error('预览失败', error);
   	});
   

3. 配置package.json脚本文件

   	"scripts": {
   		// 本地测试环境热更新开发
   	    "dev:mp-weixin": "uni -p mp-weixin vite serve --mode dev",
   	    // 本地生产环境热更新开发
   	    "prod:mp-weixin": "uni -p mp-weixin vite serve --mode prod",
   	    // 上传测试环境build体验版
   	    "build-dev:mp-weixin": "uni build -p mp-weixin vite serve --mode dev && npm run wxUpload",
   	    // 上传生产环境build体验版
   	    "build-prod:mp-weixin": "uni build -p mp-weixin vite serve --mode prod  npm run wxUpload",
   	    "wxUpload": "node .config/wxUpload.js",
       }
   

   **至此, 恭喜你已经能通过命令行上传体验版, 为便于测试, 下面实践将二维码图片输出于终端 **

4. 终端输出二维码

   • yarn add jimp terminal-image --save
   • jimp用于设置图片尺寸, terminal-image用于终端输出
   • 具体的终端显示效果, 可通过设置和渲染的宽高进行配置
   • 坑: jimp要关注版本号, 不同版本的导出和使用方式不一致, terminal-image也是, 要使用es6方式导入, 在node环境下要通过import(‘terminal-image’)异步引入

   	const qrcodePath = path.join(__dirname, '父级路径/qrcodeImg.png');
   	const image = await Jimp.read(qrcodePath);
   	// 调整图片大小
   	image.resize(120, 120);
   	// 保存调整后的图片
   	await image.writeAsync(qrcodePath);
   	const terminalImage = await import('terminal-image');  // 动态导入
   	const image = await terminalImage.default.buffer(imageBuffer, {
     		width: 120,
   	    height: 120,
   	    color: 'white',
   	    backgroundColor: 'black',
    	});
   	console.log(image);  // 将图片输出到终端
   

5. 测试

   • 终端
   • 小程序后台