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

相关推荐
l1t25 分钟前
QWen 3.5plus总结的总结基准测试结果的正确方法
前端·数据库
kyriewen1137 分钟前
为什么我的代码在测试环境跑得好好的,一到用户电脑就崩?原来凶手躲在地址栏旁边
开发语言·前端·javascript·chrome·ecmascript·html5
小北方城市网1 小时前
JavaScript 实战 —— 实现一个简易的 TodoList(适合前端入门 / 进阶)
开发语言·前端·javascript
是上好佳佳佳呀1 小时前
【前端(二)】CSS 知识梳理:从编写位置到选择器优先级
前端·css
倾颜1 小时前
我是怎么把单 Tool Calling 升级成多 Tool Runtime 的
前端·后端·langchain
清汤饺子1 小时前
Superpowers:给 AI 编程 Agent 装上"工程化超能力"
前端·javascript·后端
踩着两条虫2 小时前
AI驱动的Vue3应用开发平台 深入探究(十三):物料系统之区块与页面模板
前端·vue.js·人工智能·架构·系统架构
weixin199701080162 小时前
《得物商品详情页前端性能优化实战》
前端·性能优化
帮我吧智能服务平台2 小时前
装备制造企业售后服务数字化:从成本中心到利润中心背景
java·前端·制造
qq_368019662 小时前
用 react 的react-syntax-highlighter 实现语法高亮、行号与多行错误行高亮
前端·react.js·前端框架