多人开发小程序设置体验版的痛点

抛出痛点

在分配任务时,我们将需求分为三个分支任务,分别由前端A、B、C负责:

  1. 前端A: HCC-111-实现登录功能
  2. 前端B: HCC-112-实现用户注册
  3. 前端C: HCC-113-实现用户删除

相应地,我们创建三个功能分支:

  • feature_HCC-111-实现登录功能
  • feature_HCC-112-实现用户注册
  • feature_HCC-113-实现用户删除

当所有的前端都开发完成了他们的任务,我们就要开始测试小程序了。但是如果按照以往体验版的测试方式,我们就需要排个顺序。比如,前端 A 先将他的小程序设置为体验版,测试把他的功能测试完成之后,再把前端 B 的设置为体验版,以此类推。可以看出真的很麻烦,而且浪费开发时间,我想你肯定不想在开发的时候突然被叫把你的小程序版本设置为体验版。

解决方案

小程序开发助手 这是一个官方提供的小程序,里面有多个版本的小程序可供选择,很方便测试人员的测试,并且也会节省开发人员的时间。点击版本查看 就可以看到所有开发人员提交的最近的一次版本了。这样也不用设置体验版就可以测试最新的提交了。

再次抛出痛点

如果前端 A 头上有三个任务单呢?任务单:HCC-121-实现框架搭建,HCC-122-实现在线录屏,HCC-123-实现画板。此时你可能想说, 为啥前端 A 这么多的任务单呢?他命苦啊!

这个时候就需要配合微信的机器人了,我们可以创建多个机器人作为我们提交版本的媒介,这样我们就不受限于微信账号了。

可以在微信的官方文档看到 robot 参数有30个机器人可供选择。

接下来看下微信的机器人的使用方式。

miniprogram-ci文档

微信官方是这样介绍这个工具的; miniprogram-ci 是从微信开发者工具中抽离的关于小程序/小游戏项目代码的编译模块。它其实是一个自动上传代码的工具,可以帮助我们自动化的编译代码并且上传到微信。

下面是一个大概得使用的示例,具体还是要参考官方文档。

js 复制代码
const ci = require('miniprogram-ci');
(async () => {
  const project = new ci.Project({
    appid: 'wxsomeappid',
    type: 'miniProgram',
    projectPath: 'the/project/path',
    privateKeyPath: 'the/path/to/privatekey',
    ignores: ['node_modules/**/*'],
  })
  const previewResult = await ci.preview({
    project,
    desc: 'hello', // 此备注将显示在"小程序助手"开发版列表中
    setting: {
      es6: true,
    },
    qrcodeFormat: 'image',
    qrcodeOutputDest: '/path/to/qrcode/file/destination.jpg',
    onProgressUpdate: console.log,
    // pagePath: 'pages/index/index', // 预览页面
    // searchQuery: 'a=1&b=2',  // 预览参数 [注意!]这里的`&`字符在命令行中应写成转义字符`\&`
  })
  console.log(previewResult)
})()

当我们使用这个脚本上传完代码就可以在小程序开发助手或者小程序管理平台看到以下内容。

微信管理后台

小程序开发助手页面

最后

我们可以使用 miniprogram-ci 配合 Jenkins 实现自动化部署,提交完成代码就可以自动部署了。以下是一个 github 的 actions 示例。当然也可以使用别的方式,例如本地提交,Jenkins提交等。

yml 复制代码
name: Feature Branch CI

on:
  workflow_dispatch:
  push:
    branches: ['feature_*']  # 使用通配符匹配所有feature分支

jobs:
  build_and_deploy:
    runs-on: ubuntu-latest
    steps:
      - name: Checkout Repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: '20'
          cache: 'yarn'

      - name: Install dependencies
        run: |
          npm install -g miniprogram-ci cross-env
          yarn install --frozen-lockfile

      - name: Build Package
        run: yarn cross-env ENV=PROD uni build -p mp-weixin --mode PROD

      - name: Create private key file
        run: echo "${{ secrets.PRIVATE_KEY }}" > private.key

      - name: Deploy Package
        env:
          APP_ID: ${{ secrets.APP_ID }}
        run: |
          COMMIT_MESSAGE=$(git log --format=%B -n 1 ${{ github.sha }})
          if [[ $COMMIT_MESSAGE =~ VERSION-([A-Za-z0-9_]+-[A-Za-z0-9_-]+)_DEV ]]; then
            VERSION=${BASH_REMATCH[1]}
            echo "Extracted Version: $VERSION"
            miniprogram-ci preview \
              --pp ./dist/build/mp-weixin \
              --pkp ./private.key \
              --appid $APP_ID \
              --uv "${VERSION}" \
              -r 7 \
              --desc "${COMMIT_MESSAGE}" \
              --upload-description "${COMMIT_MESSAGE}" \
              --enable-es6 true \
              --enable-es7 true \
              --enable-minifyJS true \
              --enable-minifyWXML true \
              --enable-minifyWXSS true \
              --enable-minify true \
              --enable-bigPackageSizeSupport true \
              --enable-autoPrefixWXSS true
          else
            echo "No Version found in commit message. Skipping upload."
          fi
相关推荐
编程千纸鹤3 小时前
高校宿舍信息管理系统小程序
小程序·宿舍管理小程序
说私域4 小时前
基于开源 AI 智能名片 S2B2C 商城小程序的视频号交易小程序优化研究
人工智能·小程序·零售
丁总学Java15 小时前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
wrx繁星点点15 小时前
状态模式(State Pattern)详解
java·开发语言·ui·设计模式·状态模式
JungleCoding16 小时前
403 Request Entity Too Lager(请求体太大啦)
状态模式
说私域16 小时前
基于开源 AI 智能名片、S2B2C 商城小程序的用户获取成本优化分析
人工智能·小程序
mosen86816 小时前
Uniapp去除顶部导航栏-小程序、H5、APP适用
vue.js·微信小程序·小程序·uni-app·uniapp
qq229511650217 小时前
微信小程序的汽车维修预约管理系统
微信小程序·小程序·汽车
尚梦1 天前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
paopaokaka_luck1 天前
基于Spring Boot+Vue的助农销售平台(协同过滤算法、限流算法、支付宝沙盒支付、实时聊天、图形化分析)
java·spring boot·小程序·毕业设计·mybatis·1024程序员节