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

相关推荐
Csvn19 小时前
WASM
前端
修己xj21 小时前
我用 AI 给自己写了一个 Markdown 编辑器,然后把它开源了
前端
FRing0321 小时前
vue2干货总结2(v-bind、v-for、v-model、指令修饰符、v-bind操作class和style)
开发语言·前端·vue.js·vue2
幸运小猿21 小时前
模拟慢上传-处理超时重试image 丢失线上问题
前端·javascript·html
moshuying1 天前
网购能买Token了!
前端
h_65432101 天前
echarts实现柱状图加一条横线
前端·echarts
风骏时光牛马1 天前
生成一个后端标题,只需要一个标题,不需要其他的任何文本。
前端
子非鱼@Itfuture1 天前
关于前后端联调中登录状态/登录信息失效?
java·前端
郭小李1 天前
openFeign入门
java·开发语言·前端
馒头不想说话1 天前
AI当运营,帮你省人力
前端