背景
使用uniapp开发小程序，有两种方式：
- 使用
HBuilderX搭建小程序 - 使用
vue-cli搭建小程序
当项目开发完成后，需要打包上传小程序代码：
HBuilderX搭建的项目，点击HBuilderX菜单栏中的【发行】，打包小程序vue-cli的搭建的项目，在命令行执行build:mp-xxx，打包小程序
然后在对应平台的【开发者工具】导入 dist/build/mp-xxx 文件夹，打开项目，上传小程序。
这一套操作下来，很繁琐而且效率也并不高，支付宝小程序更麻烦，还需要手动设置上传的版本为体验版，那么怎样才能舒服的上传代码呢？
微信小程序
微信小程序官方推出了一个代码上传工具 miniprogram-ci，但是目前只有 HBuilderX 支持自动上传代码到微信平台，vue-cli 的项目仍然需要我们自己写一些配置才能实现。
获取上传密钥并设置IP白名单
-
登录微信开放平台，找到开发管理-开发设置-小程序代码上传
-
点击右侧的重置/生成，点击【下载密钥】即可拿到密钥文件，保存在本地（可以保存在项目中）
-
然后如果下方开了【IP白名单】，我们需要把自己的IP添加进去（tips：如果开启了白名单且未添加IP，打包的时候会提示
{errCode: -10008}，这时会提示我们电脑的IP是多少，再把这个IP地址加进去即可)
HBuilderX 项目实现一键上传
首先我们需要把 HBuilderX 升级到v3.3.7-alpha及以上，官方文档
- 在
HBuilderX打开小程序项目，点击HBuilderX顶部菜单栏中的【发行】，选择【小程序-微信】
- 在弹窗中勾选上【自动上传到微信平台】
按照图上备注，把版本号、刚刚下载的微信公众平台密钥、描述（可选）、机器人编号填上
- 点击【发行】，命令行就会开始打包并自动上传小程序
vue-cli 项目实现一键上传
流程是先执行命令 build:mp-weixin 打包，再执行 uploadWxMp.js 上传代码
- 首先在
vue-cli搭建的项目中安装miniprogram-ci
npm install miniprogram-ci --D
- 项目根目录新建
uploadWxMp.js文件，粘贴以下代码，根据项目修改配置
const ci = require('miniprogram-ci')
const project = new ci.Project({
appid: '小程序AppId', // (⚠️修改)
type: 'miniProgram',
projectPath: 'dist/build/mp-weixin', // uniapp打包后的路径
privateKeyPath: 'privatekey.key', // 微信公众平台密钥，建议放项目根目录 (⚠️修改)
ignores: ['node_modules/**/*'] // 指定需要排除的规则
})
ci.upload({
project, // 项目对象
version: '1.0.0', // 版本号 (⚠️修改)
desc: '', // 项目描述 (⚠️修改)
// 以下配置，根据自己的【微信开发者工具本地配置】⚠️修改（见下图）
setting: {
minifyWXML: true, // boolean 压缩 WXML 代码
minifyWXSS: true, // boolean 压缩 WXSS 代码
minifyJS: true, // boolean 压缩 JS 代码
minify: true, // boolean 压缩所有代码，对应小程序开发者工具的 "压缩代码"
es6: false, // boolean 对应小程序开发者工具的 "es6 转 es5"
es7: false, // boolean 对应小程序开发者工具的 "增强编译"
codeProtect: false, // boolean 对应小程序开发者工具的 "代码保护"
autoPrefixWXSS: false // boolean 对应小程序开发者工具的 "样式自动补全"
},
onProgressUpdate: console.log // 进度更新监听函数
})
.then(() => {
console.log('上传成功！')
})
.catch((error) => {
console.log('上传失败，原因：', error)
process.exit(-1)
})
我的微信开发者工具本地配置：
- 修改package.json打包指令
在原本的 build:mp-weixin 指令后，追加 && node uploadWxMp.js，即打包后运行 uploadWxMp.js 代码
Vue2
"scripts": {
...
"build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build && node uploadWxMp.js"
...
}
Vue3
"scripts": {
...
"build:mp-weixin": "uni build -p mp-weixin && node uploadWxMp.js"
...
}
- 最后在命令行执行
npm run build:mp-weixin，即可发布并上传
【小程序助手】查看上传的版本
打开微信小程序【小程序助手】，我们可以看到刚刚上传的版本
uniapp还提供了# CLI 发行uni-app到微信小程序，高级玩家可以玩玩。
支付宝小程序
支付宝小程序官方推出了一个代码上传工具 minidev，下文讲述的是 vue-cli 的项目如何进行配置，HBuilderX 项目官方暂未支持。
获取开发工具密钥
全局安装 minidev，执行指令 minidev login，使用支付宝扫码完成授权
npm i minidev -g
minidev login
这样做的目的，是进行快速授权登录，并自动在当前使用机器的本地目录生成开发工具密钥，官方文档
vue-cli 项目实现一键上传
流程是先执行命令 build:mp-alipay 打包，再执行 uploadAlipayMp.js 上传代码
- 首先在
vue-cli搭建的项目中安装minidev
npm install minidev --D
- 项目根目录新建
uploadAlipayMp.js文件，粘贴以下代码，根据项目修改配置
const { minidev } = require('minidev')
console.log('开始上传！')
minidev
.upload({
appId: '小程序AppId', // (⚠️修改)
project: 'dist/build/mp-alipay', // uniapp打包后的路径
experience: true // 是否设置为体验版
})
.then(() => {
console.log('上传成功！')
})
.catch((error) => {
console.log('上传失败，原因：', error)
process.exit(-1)
})
- 修改package.json打包指令
在原本的 build:mp-alipay 指令后，追加 && node uploadAlipayMp.js，即打包后运行 uploadAlipayMp.js 代码
Vue2
"scripts": {
...
"build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build && node uploadAlipayMp.js"
...
}
Vue3
"scripts": {
...
"build:mp-weixin": "uni build -p mp-alipay && node uploadAlipayMp.js"
...
}
- 最后在命令行执行
npm run build:mp-alipay，即可发布并上传
【支付宝开放平台】查看上传的版本
打开支付宝开放平台，我们可以看到刚刚上传的版本
One More Thing 1
小程序如何区分开发版、体验版、正式版？
微信小程序
const ENV = __wxConfig.envVersion
// develop 开发版
// trial 体验版
// release 正式版
支付宝小程序
// 需做兼容
const ENV = uni.getAccountInfoSync?.().miniProgram.envVersion || 'release'
// develop 开发版
// trial 体验版
// gray 灰度版
// release 正式版
One More Thing 2
如何在VSCode左侧，显示 package.json中 的 npm 指令？
在左侧菜单栏，单击右键显示的菜单中勾选【npm脚本】即可
