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

相关推荐
敲敲了个代码26 分钟前
CSS 像素≠物理像素:0.5px 效果的核心密码是什么?
前端·javascript·css·学习·面试
少云清42 分钟前
【软件测试】5_基础知识 _CSS
前端·css·tensorflow
倔强青铜三1 小时前
AI编程革命:React + shadcn/ui 将终结前端框架之战
前端·人工智能·ai编程
天外飞雨道沧桑1 小时前
前端开发 Cursor MCP 提效工具配置
前端·vscode·ai编程·开发工具·cursor
朱哈哈O_o1 小时前
前端通用包的作用——jquery篇
前端
葡萄城技术团队1 小时前
纯前端驱动:在线 Excel 工具的技术革新与实践方案
前端·excel
芳草萋萋鹦鹉洲哦2 小时前
【vue】调用同页面其他组件方法几种新思路
前端·javascript·vue.js
巴啦啦臭魔仙2 小时前
uniapp scroll-view自定义下拉刷新的坑
前端·javascript·uni-app
小满zs2 小时前
Next.js第九章(AI)
前端
晨枫阳2 小时前
不同语言的元组对比
java·前端·javascript