小程序自动化构建与版本管理方案优化

背景与业务

作为SAAS服务商,理论场景开发应用都要可以实现1对多,即可以通过账号体系授权登录实现客户登录应用。但是这个仅限理论场景。现实的问题是你可能会同时维护20个以上小程序。

业务痛点

服务商的大部分客户都是托管授权的形式,私有定制也是如此。随着私有定制客户增加,本地维护的小程序会越来越多。在迭代发布周期中,每个小程序都通过微信小程序开发工具上传真的是太浪费时间,这个过程存在太多的重复工作。基于这个场景我们希望结合持续集成工具实现构建即上传,把人工从重复劳动中解放出来。同时在构建的构建的时候插入动态的版本号便于业务跟踪问题。

解决方案

需要解决的问题如下:

  • 结合构建工具teamcity实现构建即上传的
  • 结合teamcity + dockefile实现动态插入版本号

关键技术:

构建上传

查询小程序的开发问题可以看到在工具-开发辅助提供了:miniprogram-ci。npm包的能力如下:开发者可不打开小程序开发者工具,独立使用 miniprogram-ci 进行小程序代码的上传、预览等操作。

官方地址:developers.weixin.qq.com/miniprogram...

私钥设计:

bash 复制代码
- mini-app
 - app
 - devkey/private.wx0000000000.key
 - prekey/private.wx0000000001.key
 - prodkey/private.wx0000000002.key
 - siyouone/private.wx0000000003.key
 - siyoutwo/private.wx0000000004.key
 - upload.wx.js
 ......

动态版本号

动态版本号:期望项目在构建的时候同时生成一个固定的版本号,可以方便业务排序线上问题。

  • 版本号要区分SAAS、私有化小程序,同时与接口请求头绑定
  • 版本号要用年月日组成

版本号设计:

bash 复制代码
SAAS.20250410
PRIVATE.ONE.20250410
PRIVATE.TWO.20250410

代码实现:

通过teamcity + dockerfile实现代码一键上传和动态版本号

  • teamcity里面动态配置env、appid、baseUrl、version
  • dockfile接收动态配置的参数,然后执行相对应的脚本
  • 小程序接收teamcity生成的环境变量,动态设置到请求头
bash 复制代码
环境变量env: dev、pre、prod、......
小程序AppId: saaa.appid siyou.appid ......
接口地址:baseUrl
版本号:version

核心脚本

小程序本地维护的上传脚本

javascript 复制代码
const ci = require('miniprogram-ci');
const env = process.env.NODE_ENV
const appid = process.env.APP_ID || ''
const version = process.env.VERSION || ''
const desc = process.env.DESC || ''
const privateKeyPath = process.cwd() + '/' +`${env}key/private.`+ `${appid}` + '.key';

const project = new ci.Project({
  appid: appid,
  type: 'miniProgram',
  projectPath: process.cwd() + '/dist',
  privateKeyPath: privateKeyPath,
  ignores: [
    'node_modules/**/*',
  ],
});

ci.upload({
  project,
  version,
  desc,
  setting: {
    autoPrefixWXSS: true,
    minifyJS: true,
    minifyWXML: true,
    minifyWXSS: true,
  },
})
  .then((res) => {
    console.log('上传成功');
  })
  .catch((error) => {
    if (error.errCode == -1) {
      console.log('上传成功');
    }
    console.log('上传失败');
    process.exit(-1);
  });

运维效率对比

指标 传统方式 自动化方案 提升幅度
单次操作耗时 3分钟 20秒 89%↓
版本追溯效率 手动查询 自动标记 80%↑

最佳实践建议

  • CI/CD管道运行时动态注入版本号
  • 代码合并到release分支teamcity自动触发
相关推荐
hedley(●'◡'●)13 分钟前
基于cesium和vue的大疆司空模仿程序
前端·javascript·vue.js·python·typescript·无人机
qq5_81151751514 分钟前
web城乡居民基本医疗信息管理系统信息管理系统源码-SpringBoot后端+Vue前端+MySQL【可直接运行】
前端·vue.js·spring boot
百思可瑞教育15 分钟前
构建自己的Vue UI组件库:从设计到发布
前端·javascript·vue.js·ui·百思可瑞教育·北京百思教育
百锦再15 分钟前
Vue高阶知识:利用 defineModel 特性开发搜索组件组合
前端·vue.js·学习·flutter·typescript·前端框架
CappuccinoRose41 分钟前
JavaScript 学习文档(二)
前端·javascript·学习·数据类型·运算符·箭头函数·变量声明
这儿有一堆花1 小时前
Vue 是什么:一套为「真实业务」而生的前端框架
前端·vue.js·前端框架
全栈前端老曹1 小时前
【MongoDB】深入研究副本集与高可用性——Replica Set 架构、故障转移、读写分离
前端·javascript·数据库·mongodb·架构·nosql·副本集
“负拾捌”1 小时前
python + uniapp 结合腾讯云实现实时语音识别功能(WebSocket)
python·websocket·微信小程序·uni-app·大模型·腾讯云·语音识别
NCDS程序员2 小时前
v-model: /v-model/ :(v-bind)三者核心区别
前端·javascript·vue.js
夏幻灵2 小时前
CSS三大特性:层叠、继承与优先级解析
前端·css