还在手动上传小程序? uni-mini-ci帮你一键发布多平台uni-app小程序

背景

在没有CI工具帮助的时候,我们使用uni-app开发小程序通常会在小程序发版时先进行 build 构建,然后在小程序开发者工具中打开构建产物,然后进行上传代码的操作。这种人力运维的稳定性是不可控的,而且当我们一次要发布多个平台或者多个小程序时,这种人力运维的工作方式将浪费我们大量的时间。

为了解决这个问题,微信推出了miniprogram-ci,开发者可不打开小程序开发者工具,独立使用 miniprogram-ci 进行小程序代码的上传、预览等操作,随后支付宝、钉钉等其他小程序厂商也跟着推出了各自的CI工具,这一举措将开发者从繁琐的上传流程中解放了出来。

uni-mini-ci是一款支持微信、钉钉、支付宝、企业微信等小程序平台的持续集成工具。它集成了多个平台的ci工具一次配置发布到多端,让开发者可以轻松地将应用程序发布到多个小程序平台上。

为什么不直接使用各自平台的CI工具?

  1. 多个小程序平台CI工具的配置文件、配置项等有所差异,其能力也有所不同,
  2. uni-app存在构建的步骤,使用各自小程序平台的CI工具则需要在构建产物中各自创建配置文件。
  3. 钉钉小程序的DingTalk Design CLI,不支持指定版本号,而uni-mini-ci支持(至于为什么支持,可以去看一下uni-mini-ci的文档)。

所以使用uni-mini-ci可以让多平台的小程序持续集成统一化。

在哪些场景使用?

  1. Github Actions 小程序持续集成
  2. Jenkins 小程序持续集成
  3. GitLab CI/CD 小程序持续集成
  4. 本地上传多个小程序平台

借助Jenkins等工具可以将开发者从构建、上传小程序的工作中,彻底解放出来,只需动动手指,即可实现小程序的上传。

示例与实践

Jenkins示例

这里是一个简单的Jenkins示例,其中关于.minicirc的配置可见uni-mini-ci,示例中的变量都可以在jenkins中定义。

这里jenkins环境要全局安装uni-mini-ci

sh 复制代码
## 安装依赖
npm install

# 检查配置文件是否存在
if [ -f .minicirc ]; then
    # 如果文件存在,删除它
    rm .minicirc
fi

# 将配置写入配置文件
echo '{
  "dd": {
    "appid": "'$miniAppId'",
    "token": "'$token'",
    "projectPath": "dist/build/mp-alipay",
    "autoincrement": '$autoincrement'
  },
  "weixin": {
    "appid": "'$appid'",
    "privateKeyPath": "build/ci_keys/private.'$appid'.key",
    "projectPath": "dist/build/mp-weixin",
    "setting": {
      "minifyJS": true,
      "minifyWXML": true,
      "minifyWXSS": true,
      "minify": true
  },
  "version": "'$version'",
  "desc": "'$desc'"
}' > .minicirc

# 构建钉钉并上传
npm run build:mp-dingtalk
minici --platform dd

# 构建微信并上传
npm run build:mp-weixin
minici --platform weixin

Github Actions 示例

Github Actions与jenkins的实现基本一致,不过Github Actions是使用.yml作为配置文件的。

yaml 复制代码
name: Upload To Weixin Alipay

on:
  push:
    tags:
      - 'v*' # Push events to matching v*, i.e. v1.0, v20.15.10

jobs:
  upload:
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v3

    - name: Install Dependencies
      run: |
        npm i uni-mini-ci -g
        yarn install

    - shell: bash
      env:
        PRIVATE_KEY: ${{ secrets.MP_PRIVATE_KEY }}
        APPID: ${{ secrets.MP_APPID }}
        TOOLID: ${{ secrets.ALI_TOOL_ID }}
        ALI_APPID: ${{ secrets.ALI_APPID }}
        ALI_PRIVATE_KEY: ${{ secrets.ALI_PRIVATE_KEY }}
      run: |
          echo "$PRIVATE_KEY" > private.key
          echo '{
            "alipay": {
              "appid": "'$ALI_APPID'",
              "toolId":"'$TOOLID'",
              "privateKey": "'$ALI_PRIVATE_KEY'",
              "projectPath": "dist/build/mp-alipay",
              "autoincrement":true
            },
            "weixin": {
              "appid": "'$APPID'",
              "privateKeyPath": "private.key",
              "projectPath": "dist/build/mp-weixin",
              "setting": {
                "minifyJS": true,
                "minifyWXML": true,
                "minifyWXSS": true,
                "minify": true
              }
            },
            "version": "",
            "desc": ""
          }' > .minicirc
        fi

    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v3
      with:
        node-version: "14.x"

    - name: upload
      run: |
        npm run build:mp-alipay
        minici --platform alipay

        # 构建微信并上传
        npm run build:mp-weixin
        minici --platform weixin

总结

通过使用uni-mini-ci,我们简化了使用uni-app开发的小程序的发布流程。借助Github Actions、Jenkins、GitLab CI/CD等工具的能力,我们可以实现小程序的自动化构建和部署,提高开发效率,使开发者能够更专注于业务逻辑的开发。

相关文章

支持多平台小程序的uni-app持续集成工具 - 掘金 (juejin.cn)

相关推荐
m0_7190841133 分钟前
React笔记张天禹
前端·笔记·react.js
Ziky学习记录1 小时前
从零到实战:React Router 学习与总结
前端·学习·react.js
wuhen_n1 小时前
JavaScript链表与双向链表实现:理解数组与链表的差异
前端·javascript
wuhen_n1 小时前
JavaScript数据结构深度解析:栈、队列与树的实现与应用
前端·javascript
狗哥哥1 小时前
微前端路由设计方案 & 子应用管理保活
前端·架构
前端大卫2 小时前
Vue3 + Element-Plus 自定义虚拟表格滚动实现方案【附源码】
前端
却尘2 小时前
Next.js 请求最佳实践 - vercel 2026一月发布指南
前端·react.js·next.js
ccnocare2 小时前
浅浅看一下设计模式
前端
Lee川2 小时前
🎬 从标签到屏幕:揭秘现代网页构建与适配之道
前端·面试
Ticnix3 小时前
ECharts初始化、销毁、resize 适配组件封装(含完整封装代码)
前端·echarts