uniapp 一键打包自动上传小程序(微信、支付宝)，优雅且舒服 |
您所在的位置：网站首页 › uniapp支付宝小程序头部增加搜索 › uniapp 一键打包自动上传小程序(微信、支付宝)，优雅且舒服 |
uniapp 一键打包自动上传小程序(微信、支付宝)，优雅且舒服
|
背景
使用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 顶部菜单栏中的【发行】，选择【小程序-微信】按照图上备注，把版本号、刚刚下载的微信公众平台密钥、描述（可选）、机器人编号填上 流程是先执行命令 build:mp-weixin 打包，再执行 uploadWxMp.js 上传代码 首先在 vue-cli 搭建的项目中安装 miniprogram-ci javascript 复制代码 npm install miniprogram-ci --D 项目根目录新建 uploadWxMp.js 文件，粘贴以下代码，根据项目修改配置 javascript 复制代码 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) })我的微信开发者工具本地配置： 在原本的 build:mp-weixin 指令后，追加 && node uploadWxMp.js，即打包后运行 uploadWxMp.js 代码 Vue2 json 复制代码 "scripts": { ... "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-weixin vue-cli-service uni-build && node uploadWxMp.js" ... } Vue3 json 复制代码 "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，使用支付宝扫码完成授权 css 复制代码 npm i minidev -g 复制代码 minidev login这样做的目的，是进行快速授权登录，并自动在当前使用机器的本地目录生成开发工具密钥，官方文档 vue-cli 项目实现一键上传流程是先执行命令 build:mp-alipay 打包，再执行 uploadAlipayMp.js 上传代码 首先在 vue-cli 搭建的项目中安装 minidev javascript 复制代码 npm install minidev --D 项目根目录新建 uploadAlipayMp.js 文件，粘贴以下代码，根据项目修改配置 javascript 复制代码 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 json 复制代码 "scripts": { ... "build:mp-weixin": "cross-env NODE_ENV=production UNI_PLATFORM=mp-alipay vue-cli-service uni-build && node uploadAlipayMp.js" ... } Vue3 json 复制代码 "scripts": { ... "build:mp-weixin": "uni build -p mp-alipay && node uploadAlipayMp.js" ... } 最后在命令行执行 npm run build:mp-alipay，即可发布并上传打开支付宝开放平台，我们可以看到刚刚上传的版本
小程序如何区分开发版、体验版、正式版？ 微信小程序 javascript 复制代码 const ENV = __wxConfig.envVersion // develop 开发版 // trial 体验版 // release 正式版 支付宝小程序 javascript 复制代码 // 需做兼容 const ENV = uni.getAccountInfoSync?.().miniProgram.envVersion || 'release' // develop 开发版 // trial 体验版 // gray 灰度版 // release 正式版 One More Thing 2如何在VSCode左侧，显示 package.json中 的 npm 指令？ 在左侧菜单栏，单击右键显示的菜单中勾选【npm脚本】即可 |
【本文地址】
今日新闻 |
推荐新闻 |