微信小程序CI自动上传

什么是CI?

无需使用开发者工具,即可进行小程序代码的上传、预览等操作。文档

以前觉得,在开发者工具点击"上传"不是更直观吗,CI也只是代替了点击按钮这个操作,最后还是需要去后台提审发布。

真正痛点

pre环境和生产环境是不同的appid(为了支付商户号独立开,以及推送消息只能打开线上小程序的问题)。每次发布都得记得切appid切接口地址,小心翼翼,直到有个同事,真的忘了,错吧pre发到生产,才开始决定使用CI。

开始使用

  1. "微信公众平台-开发-开发设置"下载代码上传密钥
  2. 配置白名单(个人建议这一步如果不知道配什么ip,可以先关闭,流程走通后再配置)

添加图片注释,不超过 140 字(可选)

  1. vscode打开小程序项目,在终端安装ci:npm install miniprogram-ci
  2. 创建ci文件夹,将第一步下载的密钥放到文件夹,并新建"上传配置"文件(我取名叫upload_pre.js),项目目录如下(开头说过是两个appid,所以我有两个密钥)
  1. 编写上传脚本(最重要的一步),以下3处是一定要修改的地方
php 复制代码
const ci = require('miniprogram-ci')
;(async () => {
  const project = new ci.Project({
    appid: '你的小程序appid',                            //①
    type: 'miniProgram',
    projectPath: '项目package.json文件所在路径',          //②
    privateKeyPath: '密钥的地址',                        //③
    ignores: ['node_modules/**/*'],
  })
  const uploadResult = await ci.upload({
    project,
    version: '1.1.1',
    desc: 'hello',
    setting: {
      es6: true,
    },
    onProgressUpdate: console.log,
  })
  console.log(uploadResult)
})()

上面代码的两个地址刚开始是比较懵的地方,不知道填什么地址

  1. 终端执行脚本:node ci/upload_pre.js,后台就能看到ci机器人上传的版本

进一步

版本号配置

使用上面的脚本已经可以上传代码了,但是我们没有去修改version和desc(这两个对应开发工具上传时的版本和描述)。我是将它写在package.json文件,然后upload_pre.js获取

缺点:这样需要改版本的话,都要先去修改package.json

目前没有想到更好的办法,因为每次发版都不一定是大版本还是修补丁,如何确定需要修改版本号的哪位数呢

根据环境切请求接口地址

这是开头说过的痛点,所以能看到项目目录,有pre和prod

将url配置在host_pre.js文件,然后通过node js的fs文件模块,进行读取和写入

package.json配置命令

这样就可通过 npm run pre 和 npm run prod来自动修改host路径了

完整配置

IP白名单

我们用jenkins自动部署,配置的是jenkins的外网ip。

相关推荐
Hao_Harrision15 小时前
50天50个小项目 (React19 + Tailwindcss V4) ✨ | DrawingApp(画板组件)
前端·react.js·typescript·tailwindcss·vite7
dly_blog15 小时前
Vite 原理与 Vue 项目实践
前端·javascript·vue.js
仅此,15 小时前
前端接收了id字段,发送给后端就变了
java·前端·javascript·spring·typescript
Lovely Ruby15 小时前
[前端] 封装一下 echart 6,发布到 npm
前端·npm·node.js
BD_Marathon15 小时前
NPM_常见命令
前端·npm·node.js
绿鸳15 小时前
12.17面试题
前端
Huanzhi_Lin16 小时前
禁用谷歌/google/chrome浏览器更新
前端·chrome
咸鱼加辣16 小时前
【前端的crud】DOM 就是前端里的“数据库”
前端·数据库
kong790692816 小时前
环境搭建-运行前端工程(Nginx)
前端·nginx·前端工程
成都证图科技有限公司16 小时前
Bus Hound概述
前端