Полгода назад у меня появилась возможность заняться разработкой мини-программ WeChat. Однако, поскольку я только связывался и не вкладывался в процесс разработки небольших программ, я не полностью понимал детали многих небольших программ и оставался только на аналогичном теоретическом уровне.Например, mpvue модифицировал среду выполнения и реализацию компилятора Vue.js Например, нативный апплет не поддерживает использование и управление npm-пакетами и т. д. Конечно, технические детали и сложности на тот момент решались и переваривались очень хорошими коллегами, поэтому я не стал вдаваться в подробности .
Недавно я начал инвестировать в завершенную итерацию разработки апплета, но обнаружил головную боль, как аккуратно и быстро загрузить апплет в фон, и дать тестировщикам его протестировать.
вопрос
Когда несколько разработчиков параллельно разрабатывают один и тот же апплет с разными функциональными модулями, когда тестеру необходимо протестировать, пусть разработчик переключится на тестовую ветку, создаст, скомпилирует и загрузит и, наконец, загрузит его в рабочую среду. Для тестирования предоставляется QR-код.
Если нынешние разработчики серьезно кодируют, они борются за функцию. Внезапно вас кто-то прерывает и говорит, что вам нужно предоставить ему QR-код для тестовой среды....
Потому что для этого QR-кода нужно сделать следующее:
- git stash
- git checkout branch
- npm install
- npm run build
- Нажмите «Предварительный просмотр», чтобы сгенерировать QR-код, или нажмите «Загрузить», чтобы обновить пробную версию.
Предоставив QR-код для выхода, восстановите рабочее состояние прямо сейчас
- git checkout branch
- git stash pop
- npm install
- npm run dev
- Продолжайте думать об идеях развития прямо сейчас
идеальный процесс
Чтобы решить проблему не дать разработчикам мучиться за QR-код в тестовой среде, я попытался соединить возможности инструментов разработчика gitlab ci и WeChat.
Далее я не буду слишком подробно объяснять управление ветками проекта, а только настрою ветку разработки на автоматический запуск непрерывной интеграции апплета (Установка зависимостей, сборка, загрузка в опытную версию)Цель.
Инструменты разработчика WeChat
Инструменты разработчика Wechat предоставляют 5 возможностей интерфейса и обеспечивают вызовы методов cli и http:
- средство запуска командной строки
- вход в командную строку
- Предварительный просмотр коммита из командной строки
- код загрузки из командной строки
- Поддержка автоматизированного тестирования
Поскольку на этот раз целью является только загрузка кода, соответствующего ветке разработки, в WeChat и обновление его до экспериментальной версии, наиболее важной возможностью интерфейса инструментов разработчика WeChat является четвертая (код загрузки из командной строки).
Если это ветвь функции, вам также необходимо создать QR-код для предварительного просмотра, что может быть достигнуто с помощью возможности третьего интерфейса.
В чем разница между вызовами cli и http
кли-метод
Вызовите исполняемый файл установленного инструмента через командную строку для выполнения таких операций, как вход в систему, предварительный просмотр, загрузка и автоматическое тестирование. Код возврата вызова: 0 для нормального вызова, -1 для ошибки. Расположение инструментов командной строки: macOS: /Contents/Resources/app.nw/bin/cli Windows: /cli.bat
http способ
Служба http автоматически включается после запуска инструмента, а номер порта службы HTTP записывается в каталоге пользователя.Вы можете проверить, установлен/запущен ли инструмент, проверив каталог пользователя, проверив, есть ли файл порта в каталоге пользователя. каталог пользователя и попытка подключения. Расположение файла номера порта: macOS: ~/Библиотека/Поддержка приложений/Инструменты веб-разработчика WeChat/По умолчанию/.ide Windows: ~/AppData/Local/Инструменты веб-разработчика WeChat/Данные пользователя/По умолчанию/.ide
Грубо говоря, cli может напрямую вызывать инструмент командной строки, в то время как http необходимо сначала найти порт, а затем выполнить вызов интерфейса, что больше подходит для межмашинного вызова. В соответствии с моей текущей ситуацией я выбрал метод cli.
Настройте машину для сборки
У мини-машины компании, похожей на Mac, временно не хватило ресурсов, и ей пришлось вернуться к Windows, чтобы настроить машину для сборки. Но ям все равно достаточно много, может с одной стороны, с окнами тоже незнакомо. Наконец, выберите установку vmware в Windows и запуск Mac OS на vmware.
Затем вам нужно установить gitlab runner, который используется для запуска ваших настраиваемых задач (заданий) и возврата результатов в GitLab. GitLab Runner сотрудничает с GitLab CI (встроенный сервис непрерывной интеграции GitLab) для координации задач. Подробности можно найти в цитируемой статье ниже.
Самый простой способ установить gitlab runner на Mac — использовать brew, конечно, также можно скачать пакет приложения
brew install gitlab-runner # 安装gitlab runner
brew services start gitlab-runner # 开机自动运行
gitlab-runner start # 只需要直接运行（不需要开机自动运行）
После завершения установки вы можете настроить раннер.В основном вам нужно указать URL-адрес gitlab, токен репозитория проекта, теги раннера и т. д.Регистрация исполнителей | Документация GitLab
gitlab-runner register
Запись CI-файлов
Для записи CI-файлов самое главное — создать файл с именем .gitlab-ci.yml в корневом каталоге проекта.
stages:
- build # 总体CI的过程，暂时只有一个job：build
before_script:
- shopt -s expand_aliases # 开启扩展aliases功能 issue https://gitlab.com/gitlab-org/gitlab-runner/issues/1083
- alias wxcli="/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli" # 指定微信开发者工具cli命名为wxcli
- type wxcli # 验证wxcli命令是否存在
- wxcli # 启动微信开发者工具（其实好像有点多余，因为如果当前没启动微信开发者工具，在wxcli -u的时候也会启动）
- source ~/.bash_aliases # 读取特点的alias，比如配置的nvm，issue https://gitlab.com/gitlab-org/gitlab-runner/issues/1958
- npm install # 安装依赖
# 测试环境
test-build:
stage: build # 对应stages上的job名称
script:
- npm run build
- curr_commit_content=`git log -1 --pretty=format:%s` # 获取最近提交的git内容
- curr_version=`node -p "require('./package.json').version"` # 获取package的版本号
- curr_proj_path=`pwd` # 当前项目路径
- wxcli -u $curr_version@$curr_proj_path --upload-desc $curr_commit_content # 提交微信开发者
- # 上传成功后，你可以尝试发送一些通知提醒大家可以去打开新版本了，比如钉钉的webhook
only:
- develop
tags:
- xxx_mp
Посмотреть результаты сборки
Также очень просто просмотреть результаты сборки, прямо в конвейере CI/CD в репозитории gitlab для просмотра
Тестировщики и опытные пользователи могут просмотреть последнюю пробную версию с помощью помощника по разработке апплета (не забудьте установить версию, загруженную пользователем CI, в качестве пробной версии в фоновом режиме апплета WeChat).
На самом деле больше не делайте повторяющуюся работу, это слишком сильно повлияет на ваше настроение.
Цитировать
Документация GitLab на китайском языке
GitLab Runner Документация GitLab на китайском языке
Можно ли интегрировать апплет wechat через jenkins
Как апплет осуществляет непрерывную интеграцию?
Как мини-программы используют инструменты непрерывной интеграции
Апплет GitLab-CI WeChat для непрерывной интеграции и непрерывного развертывания