还在手动上传小程序? 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)

相关推荐
程序员大阳2 分钟前
副队长ES6+教程(3)--解构赋值
前端·javascript·es6·赋值·解构
神膘护体小月半20 分钟前
css - 元素背景图由 hover 触发,初次加载时闪动的解决办法
前端·javascript·css
wx1qq1com20 分钟前
一桩带几台车:共享租赁桩位配比、取电与结算闭环设计
物联网·微信小程序·小程序
程序员大阳42 分钟前
副队长ES6+教程(2)--let 与 const
前端·javascript·es6·const·let·var
deli0071 小时前
写满 200GB 后 SSD 为什么掉到 95MB/s?SLC 缓存模型实测
前端
李纲明2 小时前
微信小程序场地长租月底对不上或口头占场撞场:先核合约预约与核销流水出账,再查附加费与转租归属
微信小程序·devdiy·场地长租·月结账单·核销流水·附加费·转租归属
曦樂~2 小时前
【Web Development】03JavaScript 基础和事件
开发语言·前端·javascript
2401_879692512 小时前
微信小程序照相与摄像功能实现——chooseImage 与 chooseVideo 详解
微信小程序·小程序·notepad++
deli0072 小时前
HTTPS 的锁是怎么挂上的?TLS 1.3 握手 6 步实测
前端
程序员大阳2 小时前
副队长ES6+教程(1)--ES6+初识
前端·ecmascript·es6