Интеграция программы WeChat Mini Дженкинс

Эта статья была впервые опубликована вGitHub.com/бизнес/блог…, приветствую всех обратить внимание на мой Блог, текст представлен в виде вопроса, пожалуйста, нажмите звездочку, если вам это нравится, и нажмите смотреть, чтобы подписаться~

задний план

Тестовый выпуск апплета WeChat без CI/CD и других сопутствующих инструментов имеет следующие проблемы:

В помощнике по разработке апплетов один и тот же разработчик может отображать только одну версию разработки.
Коллеги по тестированию просят QR-коды для разработки, что неэффективно
Локально сгенерированный QR-код будет содержать локальный код, а другие изменения ветки не будут вовремя внесены.

Чтобы избежать вышеуказанных проблем, используйтеИнтеграция программы WeChat Mini Дженкинсстроить планы.

Основание

Прежде чем представить план реализации, давайте рассмотрим обычный процесс публикации апплета WeChat.

Из приведенной выше блок-схемы видно, что предварительный просмотр и загрузка мини-программ WeChat должны выполняться в инструментах разработчика WeChat.Далее давайте рассмотрим методы загрузки, предоставляемые инструментами разработчика WeChat.

Инструменты разработчика WeChat

В дополнение к графическому интерфейсу инструмент разработчика WeChat также предоставляет два интерфейса: командную строку и службу HTTP для внешних вызовов для выполнения таких операций, как вход в систему, предварительный просмотр и загрузка.

вызов командной строки

Расположение инструментов командной строки:

macOS: /Contents/Resources/app.nw/bin/cli
Windows: /cli.bat

Возьмем в качестве примера операционную систему macOS:

1. Откройте инструменты разработчика:

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o

в,/Applications/wechatwebdevtools.app/это путь установки.

2. Логин:

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -l

После ввода вышеуказанной командной строки терминал распечатает QR-код для входа и использует WeChat для сканирования кода для входа в систему. После завершения операции на стороне WeChat будет выведеноlogin success,Как показано ниже:

Если вы хотите получить QR-код в формате base64, вы можете использовать следующую команду:

# 登录，在终端中打印登录 base64 形式的二维码
cli -l --login-qr-output base64

# 登录，二维码转成 base64 并存到文件 /Users/username/code.txt 
cli -l --login-qr-output base64@/Users/username/code.txt

Другие API могут ссылаться навызов командной строки.

HTTP-сервис

HTTP-сервис вАвтоматически запускаться после запуска инструмента, хост фиксируется на 127.0.0.1 каждый раз, когда вы его открываете, а номер порта не фиксируется. номер порта вкаталог пользователязапись, расположение следующее:

macOS: ~/Библиотека/Поддержка приложений/Инструменты веб-разработчика WeChat/По умолчанию/.ide
Windows: ~/AppData/Local/Инструменты веб-разработчика WeChat/Данные пользователя/По умолчанию/.ide

Возьмем в качестве примера операционную систему macOS:

Первая потребностьЗапустите инструменты разработчика, вы можете использовать метод командной строки, описанный выше, чтобы открыть инструмент разработчика WeChat.

/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(cat "/Users/zyy/Library/Application Support/微信web开发者工具/Default/.ide")
echo "微信开发者工具运行在${port}端口"

Таким образом, вы можете получить номер порта работающего инструмента разработчика WeChat, среди которых/Users/zyy/для пользовательского каталога.

1. Откройте инструменты разработчика:

# 打开工具
http://127.0.0.1:端口号/open
# 打开/刷新项目
http://127.0.0.1:端口号/open?projectpath=项目全路径

2. Логин:

# 登录，返回图片格式的二维码
http://127.0.0.1:端口号/login
# 登录，取 base64 格式二维码
http://127.0.0.1:端口号/login?format=base64
# 登录，取 base64 格式二维码，并写入 /Users/username/logincode.txt
http://127.0.0.1:端口号/login?format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt

3. Предварительный просмотр:

# 预览路径为 /Users/username/demo 的项目，返回图片格式的二维码
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo

# 预览路径为 /Users/username/demo 的项目，返回 base64 格式的二维码
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64

# 预览路径为 /Users/username/demo 的项目，返回 base64 格式的二维码，并写入 /Users/username/logincode.txt
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&format=base64&qroutput=%2FUsers%2Fusername%2Flogincode.txt

# 预览路径为 /Users/username/demo 的项目，返回图片格式的二维码，并将预览信息输出至 /Users/username/info.json
http://127.0.0.1:端口号/preview?projectpath=%2FUsers%2Fusername%2Fdemo&infooutput=%2Users%2username%2info.json

Другие API могут ссылаться наHTTP-вызов.

строить планы

Инструменты разработчика WeChat в настоящее время доступны только в версиях для macOS и Windows, что ограничивает серверную систему. Возьмите macOS в качестве примера ниже, Чтобы представить конкретный процесс реализации:

Установить Дженкинс

The leading open source automation server, Jenkins provides hundreds of plugins to support building, deploying and automating any project.
Являясь ведущим сервером автоматизации с открытым исходным кодом, Jenkins предоставляет сотни подключаемых модулей для поддержки создания, развертывания и автоматизации любого проекта.

Jenkins зависит от среды выполнения Java, поэтому на компьютере необходимо установить Java. Есть много способов установить Jenkins, которые можно найти вОфициальный сайтНепосредственно загрузите последний пакет, затем выполните следующую команду, чтобы запустить Jenkins.

java -jar jenkins.war --httpPort=8888

в,--httpPort=8888Чтобы установить номер порта службы, номер порта по умолчанию — 8080.

Новое задание

выберите "Создайте бесплатный программный проект», после ввода имени задачи нажмите кнопку «ОК», чтобы перейти на страницу конфигурации задачи.

Конфигурация задачи

Прежде чем представить конфигурацию задачи, давайте взглянем на последнюю реализуемую функцию.

Основные функциональные точки следующие:

Используйте git для управления кодом, вы можете выбирать ветки
Можно выбрать упакованную версию (версия для разработки/пробная версия) (примечание: «версия для разработки» здесь соответствует «предварительной версии», а пробная версия соответствует «загрузке»)

1. Управление исходным кодом

Во втором пункте «Управление исходным кодом» на странице настройки задачи выберите git для управления кодом. Заполните адрес склада git и учетную запись доступа, как показано на рисунке выше.$branchЭто настраиваемый параметр сборки. Давайте посмотрим на определение параметра сборки.

2. Параметры сборки

Во втором пункте «Общие» на странице настройки задачи выберите «Параметризованный процесс сборки», чтобы перейти на страницу настройки параметров сборки.

Существует несколько типов параметров, упомянутых выше для выбора.Вы можете обратиться к следующему рисунку для конфигурации, которая не будет повторяться здесь.

Следует отметить, что имя здесь может передаваться через name 的形式获取到，例如上面提到的 ветвь .

Построить

В «Сборке» страницы конфигурации задачи выберите метод «Выполнить оболочку» для сборки.

Советы: сценарий оболочки здесь является основным содержимым апплета WeChat, интегрирующего Jenkins.

Чтобы просмотреть блок-схему выпуска апплета WeChat, упомянутую в начале этой статьи:

Эта серия операций выполняется с помощью сценариев оболочки, как этого добиться?

Авторизоваться

Вход в инструмент разработчика WeChat должен быть подтвержден путем сканирования кода на терминале WeChat.На этом этапе WeChat не предоставляет метод входа для учетной записи и пароля. Однако инструменты разработчика WeChat могут оставаться в системе. Из-за ограничений WeChat учетная запись разработчика может быть зарегистрирована только на одном терминале, поэтому мы подали заявку на новую учетную запись WeChat «Miss Frontend» для входа на машину Jenkins.

Основные настройки проекта

В графическом интерфейсе при загрузке кода инструменты разработчика будут заполнены AppID, путем проекта и другой информацией, а также будут выбраны основные настройки проекта в «Подробностях», такие как «ES6 to ES5». WeChat также предоставляет метод настройки с использованием файла project.config.json в корневом каталоге проекта. Здесь сценарий узла используется для создания файла project.config.json.

const fs = require('fs')

const content = '{"description":"项目配置文件。","setting":{"urlCheck":false,"es6":true,"postcss":true,"minified":true,"newFeature":true},"miniprogramRoot":"./","compileType":"miniprogram","appid":"***","projectname":"wechat-app","condition":{"search":{"current":-1,"list":[]},"conversation":{"current":-1,"list":[]},"plugin":{"current":-1,"list":[]},"game":{"currentL":-1,"list":[]},"miniprogram":{"current":-1,"list":[]}}}'

fs.writeFileSync('./dist/project.config.json', content, 'utf-8')

На этом базовые настройки проекта завершены, далее мы расскажем, как выполнить загрузку через скрипт оболочки.

сценарий оболочки

echo -------------------------------------------------------
echo GIT_BRANCH: ${GIT_BRANCH}
echo -------------------------------------------------------
# 执行项目构建
npm i --registry=http://registry.npm.taobao.org
npm run build
# 打开微信开发者工具
/Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -o
port=$(cat "/Users/devops/Library/Application Support/微信web开发者工具/Default/.ide")
echo "微信开发者工具运行在${port}端口"
return_code=$(curl -sL -w %{http_code} http://127.0.0.1:${port}/open)
if [ $return_code == 200 ]
  then
  echo "返回状态码200，devtool启动成功！"
else
  echo "返回状态码${return_code}，devtool启动失败"
  exit 1
fi
if [ "$build_type" == "dev" ]
  then
  echo "发布开发版！"
  wget -O $BUILD_ID.png http://127.0.0.1:${port}/preview?projectpath=/Users/Shared/Jenkins/Home/workspace/fe-wechat-app/dist
  echo "预览成功！请扫描二维码进入开发版！"
elif [ "$build_type" == 'prod' ]
  then
  echo "准备上传！"
  /Applications/wechatwebdevtools.app/Contents/Resources/app.nw/bin/cli -u 1.0.0@/Users/Shared/Jenkins/Home/workspace/fe-wechat-app/dist --upload-desc 'initial release'
  echo "上传成功！请到微信小程序后台设置体验版并提交审核！"
fi

Поскольку для этого проекта необходимо скомпилировать код, на сервере необходимо установить node и npm.npm run buildКоманда не только компилирует код, но и выполняет сценарий узла, который создает описанный ранее проект.config.json.

После успешной загрузки версии для разработки сохраните изображение QR-кода для отображения QR-кода и отправки электронных писем после создания.

объединить здесьвызов командной строкиа такжеHTTP-вызовСуществует два способа завершить загрузку, в основном по следующим причинам:

HTTP-вызовСгенерированное изображение QR-кода можно легко загрузить
HTTP-сервисОн будет запущен только после запуска инструмента разработчика WeChat, поэтому вам нужно пройтивызов командной строкиспособ запустить инструменты разработчика WeChat

после сборки

использоватьdescription setter pluginПлагин реализован, и картинка QR-кода отображается после завершения построения.

Установить плагин

Вернитесь на домашнюю страницу Jenkins, в «Управление системой» перейдите на страницу «Управление плагинами», найдитеdescription setter pluginи установить.

После установки плагина вернитесь на страницу настройки задачи. В «Операции после сборки» добавьте шаг «Установить описание сборки», как показано ниже:

Здесь используется HTML<img>В виде метки информация о QR-коде отображается следующим образом:

<img src="http://机器ip:端口/job/项目名称/ws/${BUILD_ID}.png" alt="二维码${BUILD_ID}" width="200" height="200" /> <a href="http://机器ip:端口/job/项目名称/ws/${BUILD_ID}.png">二维码${BUILD_ID}</a>

После настройки вышеуказанным способом обнаруживается, что картинка не отображается, а отображается текстовая информация. Это связано с тем, что Jenkins по умолчанию использует обычный текстовый режим для всей информации описания Markup Formatter из-за ограничений безопасности.

В «Управление системой» -> «Конфигурация глобальной безопасности» измените форматирование разметки с обычного текста на безопасный HTML.

После выполнения вышеуказанных шагов вы можете отобразить QR-код разрабатываемой версии. Поскольку учетная запись WeChat «Miss Front-end» используется при сборке Jenkins, версия для разработки, выпущенная «Miss Front-end» для помощника по разработке апплета, не уверена, какой студент ее создал, поэтому необходимо использовать QR код, сгенерированный платформой Jenkins.И обратите внимание на срок действия QR-кода (действителен 25 минут).

Суммировать

В этой статье в качестве отправной точки используется обычный процесс публикации апплета WeChat, и шаг за шагом рассказывается, как интегрировать Jenkins для реализации функции предварительного просмотра и загрузки апплета WeChat. Коллеги за кулисами и тестировщики могут выбрать ветку на платформе, чтобы получить версию разработки для совместной отладки и тестирования, которая решает проблемы, упомянутые в начале этой статьи.

Из-за ограниченного объема этой статьи в ней представлены только некоторые основные функции платформы.Если у вас есть другие потребности, вы можете обратиться к ссылке на расширение в конце статьи. Кроме того, если в тексте есть какие-либо непонятные или неуместные выражения, прошу покритиковать и исправить~

Ссылка на расширение:

Что такое непрерывная интеграция? (Жуан Ифэн)
Jenkins User Documentation
Публичная платформа WeChat | Мини-программа | Профиль проекта
Публичная платформа WeChat | Мини-программы | Вызов из командной строки
Публичная платформа WeChat|Мини-программа|HTTP-вызов