微信小程序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。

相关推荐
wearegogog1232 小时前
基于 MATLAB 的卡尔曼滤波器实现,用于消除噪声并估算信号
前端·算法·matlab
Drawing stars2 小时前
JAVA后端 前端 大模型应用 学习路线
java·前端·学习
品克缤2 小时前
Element UI MessageBox 增加第三个按钮(DOM Hack 方案)
前端·javascript·vue.js
小二·2 小时前
Python Web 开发进阶实战:性能压测与调优 —— Locust + Prometheus + Grafana 构建高并发可观测系统
前端·python·prometheus
小沐°3 小时前
vue-设置不同环境的打包和运行
前端·javascript·vue.js
qq_419854053 小时前
CSS动效
前端·javascript·css
烛阴3 小时前
3D字体TextGeometry
前端·webgl·three.js
桜吹雪4 小时前
markstream-vue实战踩坑笔记
前端
C_心欲无痕4 小时前
nginx - 实现域名跳转的几种方式
运维·前端·nginx
花哥码天下4 小时前
恢复网站console.log的脚本
前端·javascript·vue.js