Das WeChat-Applet integriert die automatisierte Bereitstellung von Jenkins

Hintergrund

In Abwesenheit von CI / CD und anderen verwandten Tools weist die Testversion von WeChat Mini-Programmen die folgenden Probleme auf:

Im Mini Program Development Assistant kann derselbe Entwickler nur eine Entwicklungsversion anzeigen
Der Testkollege sucht nach einem QR-Code für die Entwicklung, der ineffizient ist
Lokal generierte QR-Codes haben Probleme wie das Tragen lokaler Codes und das Versäumnis, andere Änderungen rechtzeitig in die Verzweigung zu übernehmen

Um die oben genannten Probleme zu vermeiden, wird das WeChat-Applet zur Integration von Jenkins verwendet .

Basis

Bevor wir den Implementierungsplan einführen, überprüfen wir den regulären Veröffentlichungsprozess von WeChat-Applets.

Wie aus dem obigen Flussdiagramm hervorgeht, müssen Vorschau und Upload des WeChat-Applets im WeChat-Entwicklertool durchgeführt werden. Im Folgenden erfahren Sie mehr über die Upload-Methode, die vom WeChat-Entwicklertool bereitgestellt wird.

WeChat-Entwicklertools

Zusätzlich zur grafischen Oberfläche bietet das WeChat Developer Tool zwei Schnittstellen: Befehlszeile und HTTP-Dienst für externe Aufrufe, um Vorgänge wie Anmelden, Vorschau und Hochladen auszuführen.

Befehlszeilenaufruf

Die Position des Befehlszeilen-Tools:

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

Nehmen Sie als Beispiel das MacOS-Betriebssystem:

1. Öffnen Sie die Entwicklertools:

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

Darunter /Applications/wechatwebdevtools.app/befindet sich der Installationspfad.

2. Login:

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

Nach Eingabe der obigen Befehlszeile wird der Anmelde-QR-Code im Terminal ausgedruckt und der Code zum Anmelden mit WeChat gescannt. Nachdem der Vorgang am WeChat-Terminal abgeschlossen wurde, wird er login successwie in der folgenden Abbildung dargestellt ausgegeben :

Wenn Sie einen QR-Code im Base64-Format erhalten möchten, können Sie den folgenden Befehl verwenden:

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

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

Weitere APIs finden Sie unter Befehlszeilenaufruf .

HTTP-Dienst

Der HTTP-Dienst wird nach dem Start des Tools automatisch gestartet, und der Host wird bei jedem Start auf 127.0.0.1 festgelegt, und die Portnummer wird nicht festgelegt. Die Portnummer wird im Benutzerverzeichnis aufgezeichnet und der Speicherort lautet wie folgt:

macOS: ~ / Bibliothek / Anwendungsunterstützung / WeChat-Webentwickler-Tools
/Default/.ide Windows: ~ / AppData / Local / WeChat-Webentwickler-Tools / Benutzerdaten / Standard / .ide

Nehmen Sie als Beispiel das MacOS-Betriebssystem:

Zunächst müssen Sie die Entwicklertools ausführen . Sie können die oben beschriebene Befehlszeilenmethode verwenden, um die WeChat-Entwicklertools zu öffnen.

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

Auf diese Weise können Sie die Portnummer abrufen, unter der das WeChat-Entwicklertool ausgeführt wird, darunter das /Users/zyy/ Benutzerverzeichnis.

1. Öffnen Sie die Entwicklertools:

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

2. Login:

# 登录，返回图片格式的二维码
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. Vorschau:

# 预览路径为 /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

Weitere APIs finden Sie unter HTTP-Aufruf .

Programm

WeChat-Entwicklertools sind derzeit nur in MacOS- und Windows-Versionen verfügbar, wodurch das Serversystem eingeschränkt wird. Im Folgenden wird macOS als Beispiel
für die Einführung in den spezifischen Implementierungsprozess verwendet:

Installieren Sie Jenkins

Jenkins, der führende Open-Source-Automatisierungsserver, bietet Hunderte von Plugins zur Unterstützung der Erstellung, Bereitstellung und Automatisierung eines Projekts.
Als führender Open-Source-Automatisierungsserver bietet Jenkins Hunderte von Plugins zur Unterstützung der Erstellung , Bereitstellung und Automatisierung eines Projekts.

Jenkins ist auf die Java-Laufzeitumgebung angewiesen, daher muss Java auf dem Computer installiert werden. Es gibt viele Möglichkeiten, Jenkins zu installieren. Sie können das neueste Softwarepaket direkt von der offiziellen Website herunterladen und dann den folgenden Befehl ausführen, um Jenkins zu starten.

java -jar jenkins.war --httpPort=8888

Unter ihnen --httpPort=8888 die Dienstportnummer zu setzen, ist die Standard - Portnummer 8080.

Neue Aufgabe

Wählen Sie " Erstellen eines freien Softwareprojekts ". Klicken Sie nach Eingabe des Aufgabennamens auf die Schaltfläche OK, um die Seite zur Aufgabenkonfiguration aufzurufen.

Aufgabenkonfiguration

Bevor wir die Aufgabenkonfiguration einführen, werfen wir einen Blick auf die endgültige zu realisierende Funktion.

Die Hauptfunktionen sind wie folgt:

Verwenden Sie git, um Code zu verwalten. Sie können einen Zweig auswählen
Die gepackte Version (Entwicklungsversion / experimentelle Version) kann ausgewählt werden (Hinweis: Die "Entwicklungsversion" entspricht hier "Vorschau" und die Testversion entspricht "Upload").

1. Quellcodeverwaltung

Wählen Sie im zweiten Element "Quellcodeverwaltung" auf der Taskkonfigurationsseite die Git-Methode zum Verwalten von Code aus. Geben Sie die Git-Warehouse-Adresse und das Zugriffskonto ein. Die obige Abbildung $branch zeigt den benutzerdefinierten Build-Parameter. Schauen wir uns die Definition des Build-Parameters an.

2. Konstruktionsparameter

Wählen Sie im zweiten Punkt "Allgemein" der Task-Konfigurationsseite "Parametrisierter Konstruktionsprozess" aus, um die Konstruktionsparameter-Konfigurationsseite aufzurufen.

Es gibt verschiedene Arten von Parametern zur Auswahl. Die Konfiguration finden Sie in der folgenden Abbildung. Ich werde sie hier nicht wiederholen.

Es ist zu beachten, dass der Name hier in Form von $ name erhalten werden kann, wie z. B. der oben erwähnte $ -Zweig.

Konstruieren

Wählen Sie auf der Seite "Aufgabenkonfiguration" unter "Erstellen" die zu erstellende Methode "Shell ausführen" aus.

Um es noch einmal zusammenzufassen: Das am Anfang dieses Artikels erwähnte Release-Flussdiagramm des WeChat-Applets:

Diese Reihe von Operationen wird mithilfe von Shell-Skripten ausgeführt. Wie wird dies erreicht?

Einloggen

Die Anmeldung von WeChat Developer Tools muss den Code auf WeChat scannen, um zu bestätigen, dass WeChat die Anmeldemethode für das Kontokennwort nicht bereitstellt. Das WeChat-Entwicklertool kann jedoch angemeldet bleiben. Aufgrund von WeChat-Einschränkungen kann sich eine Entwickleridentität nur an einem Terminal anmelden. Daher haben wir ein neues WeChat-Konto "Front-End Miss Sister" beantragt, um sich auf dem Jenkins-Computer anzumelden.

Grundeinstellungen des Projekts

In der grafischen Oberfläche werden beim Hochladen von Code AppID, Projektpfad und andere Informationen in die Entwicklertools eingegeben, und die Grundeinstellungen des Projekts werden auch in den "Details" ausgewählt, z. B. "ES6 bis ES5". WeChat bietet auch eine Konfigurationsmethode unter Verwendung der Datei project.config.json im Projektstammverzeichnis. Hier wird ein Knotenskript verwendet, um die Datei project.config.json zu generieren.

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')

Damit sind die Grundeinstellungen des Projekts abgeschlossen. Als Nächstes wird das Hochladen über Shell-Skripte vorgestellt.

Shell-Skript

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

Da dieses Projekt Code kompilieren muss, müssen Node und npm auf dem Server installiert sein. npm run build Der Befehl kompiliert nicht nur den Code, sondern führt auch das zuvor beschriebene Knotenskript aus, das project.config.json generiert.

Speichern Sie nach dem erfolgreichen Hochladen der Entwicklungsversion das QR-Code-Bild, um den QR-Code anzuzeigen und nach der Erstellung E-Mails zu senden.

Hier finden Sie eine Kombination aus Befehlszeilenaufrufen und HTTP-Aufrufen , um den Upload abzuschließen, hauptsächlich aus folgenden Gründen:

Ein HTTP-Aufruf kann das generierte QR-Code-Image einfach herunterladen
Der HTTP-Dienst wird erst nach dem Start des WeChat-Entwicklertools gestartet. Sie müssen daher die Befehlszeile aufrufen , um das WeChat-Entwicklertool zu starten

Nach dem Bau

Verwenden Sie das description setter plugin Plug-In, um das QR-Code-Bild nach Abschluss der Konstruktion zu erreichen und anzuzeigen.

Plugin installieren

Zurück zur Jenkins-Homepage gehen Sie in der "Systemverwaltung" zur Seite "Plugin-Verwaltung", suchen description setter plugin und installieren.

Hier werden HTML- <img> Tags verwendet, um die QR-Code-Informationen wie folgt anzuzeigen:

<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>

Nach der obigen Konfiguration wird festgestellt, dass das Bild nicht angezeigt wird, aber die Textinformationen angezeigt werden. Dies liegt daran, dass Jenkins keine Sicherheitsbeschränkungen hat. Alle Markup-Formatierer, die Informationen beschreiben, verwenden standardmäßig den Nur-Text-Modus.

Ändern Sie unter "Systemverwaltung" -> "Globale Sicherheitskonfiguration" den Markup-Formatierer von Nur-Text in Sicheres HTML.

Nachdem Sie die obigen Schritte ausgeführt haben, kann der QR-Code der Entwicklungsversion angezeigt werden. Da Jenkins mit dem WeChat-Konto von "Miss Frontend" erstellt wurde, ist die von "Miss Frontend" im Mini Program Development Assistant veröffentlichte Entwicklungsversion nicht sicher, welcher Klassenkamerad es erstellt hat. Daher müssen Sie den von der Jenkins-Plattform generierten QR-Code verwenden. Beachten Sie auch die Gültigkeitsdauer des QR-Codes (Gültigkeitsdauer 25 Minuten).

um zusammenzufassen

In diesem Artikel wird der reguläre Veröffentlichungsprozess von WeChat-Applets als Ausgangspunkt verwendet und Schritt für Schritt erläutert, wie Jenkins integriert wird, um die Vorschau- und Upload-Funktionen von WeChat-Applets zu realisieren. Back-End- und Testkollegen können einen Zweig auf der Plattform auswählen, um die Entwicklungsversion für das gemeinsame Debuggen und Testen zu erhalten, mit der die am Anfang dieses Artikels genannten Probleme gelöst werden.

Aufgrund des begrenzten Platzes in diesem Artikel werden nur einige grundlegende Funktionen der Plattform vorgestellt. Wenn Sie andere Anforderungen haben, können Sie auf den Erweiterungslink am Ende des Artikels verweisen. Wenn der Text mehrdeutig oder unangemessen ist, können Sie ihn gerne kritisieren und korrigieren