WeApp Workflow
1.0.0
WeApp-Workflow: WeChat-Applet-Frontend-Entwicklungsworkflow basierend auf Gulp
WeApp-Workflow ist ein Front-End-Entwicklungsworkflow, der speziell für die Entwicklung von WeChat-Miniprogrammen entwickelt wurde. Er basiert auf Gulp 4 und zielt darauf ab, die Probleme beim Schreiben von Front-End-Code im Entwicklungsprozess von WeChat-Miniprogrammen durch Workflows zu lösen .
Projekthomepage: https://github.com/Jeff2Ma/WeApp-Workflow
Artikeleinführung: https://devework.com/weapp-workflow.html
Verwenden Sie den Sass-Präprozessor, um das Schreiben von CSS reibungsloser zu gestalten. Die .scss Datei wird in Echtzeit in eine .wxss Datei kompiliert, die vom WeChat-Applet unterstützt wird.
Wenn Sie das offiziell empfohlene iPhone 6 als Standard-Designformat verwenden, können Sie es automatisch in rpx konvertieren, indem Sie px direkt während der Entwicklung schreiben.
// Input: src/pages/index/index.scss
. index__header {
font-size : 14 px ;
margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}
// Output: dist/pages/index/index.wxss
. index__header {
font-size : 28 rpx ;
margin-top : 20 PX ; /* 如果为大写的`PX`单位则不会转换 */
}Komprimieren Sie Bilder in Echtzeit und verwenden Sie inkrementelle Methoden, um eine wiederholte Komprimierung zu verhindern.
Das Applet unterstützt keine Bildverweise mit relativen Pfaden, sondern nur absolute Pfade mit https -Protokoll-Headern. Dieser Workflow kann die in WXML- und WXSS-Dateien referenzierten relativen Pfadbilder in das Cloud-Speicher-CDN hochladen oder sie über das FTP/SFTP-Protokoll auf den persönlichen Serverbereich hochladen. Unterstützt derzeit Tencent Cloud und Qiniu Cloud.
// Input: src/pages/index/index.wxml
< image src =" %ASSETS_IMG%/t.png " > </ image >
// Output: dist/pages/index/index.wxml
< image src =" https://cdn.devework.com/weapp/devework/t.png " > </ image >Das Applet unterstützt keine Schriftartdateien mit relativen Pfaden. Dieser Workflow kann die in CSS referenzierten Schriftartdateien in Base64 umwandeln und die ursprünglichen Pfade ersetzen.
// Input: src/pages/index/index.scss
@font-face {
font-family: 'fontello';
src: url("assets/fonts/fontello.ttf") format('truetype');
}
// Output: dist/pages/index/index.wxss
@font-face {
font-family: 'fontello';
src: url(data:application/font-sfnt;charset=utf-8;base64,AAEAAAAPAIAA....FsASNsQIARAAA) format("truetype");
}
Diese Funktion wird durch das Postcss-Lazysprite-Plug-In gesteuert. Nachdem Sie das Bild während der Entwicklung vorbereitet haben, schreiben Sie einfach einen Code wie @lazysprite "xxxx" um das Sprite-Bild automatisch zu erstellen und das entsprechende CSS zu generieren.
// Input: src/app.scss
@lazysprite "filetype" ;
/ / Output : d is t / app. wxss
. icon-filetype-doc {
background-image : url(.. / sprites/filetype.png);
background-position : 0 0 ;
width : 80 px ;
height : 80 px ;
}
. icon-filetype-pdf {
background-image : url(.. / sprites/filetype.png);
background-position : -90 px 0 ;
width : 80 px ;
height : 80 px ;
}
@media only screen and ( -webkit-min-device-pixel-ratio : 2 ) , only screen and ( min-device-pixel-ratio : 2 ) {
. icon-filetype-doc {
background-image : url (.. / sprites / filetype@ 2 x.png);
background-position : 0 0 ;
background-size : 170 px 170 px ;
}
. icon-filetype-pdf {
background-image : url (.. / sprites / filetype@ 2 x.png);
background-position : -90 px 0 ;
background-size : 170 px 170 px ;
}
}Nutzen Sie die neuen Funktionen der neuesten Gulp 4-Version, um Ihren Workflow schneller laufen zu lassen.
Der Kern verfügt nur über eine Standardaufgabe. Der vernünftige Mechanismus zur Aufgabenübereinstimmung reduziert umständliche Prozesse und das Hin- und Herlaufen des Terminals, was die Entwicklung komfortabler macht.
Einführung der inkrementellen Kompilierung von Sass und des inkrementellen Aktualisierungsmechanismus bildbezogener Aufgaben, um den Workflow zu beschleunigen.
.
├── config.custom.js // gulp自定义配置，会覆盖config.js
├── config.js // gulp 配置文件
├── gulpfile.js
├── package.json
├── src // 开发目录
│ ├── app.js
│ ├── app.json
│ ├── app.scss
│ ├── assets // 开发相关的静态文件原始资源
│ │ ├── fonts //字体文件
│ │ ├── images // 图片文件，可被上传到CDN
│ │ ├── scss // 一般放置SCSS 的minxins 等被import 的SCSS 文件
│ │ └── sprites // 生成雪碧图小图的目录
│ ├── image // 小程序专用的图片资源（如tabbar icon）目录
│ ├── pages
│ └── utils
├── tmp // 通过src 目录编译后生成的缓存目录
└── dist // 通过src 目录编译后生成的文件目录，也是小程序开发的项目目录
Als Node-Version wird Version 4 oder höher empfohlen. Da dieser Workflow Abhängigkeiten von Drittanbietern beinhaltet, wird empfohlen, in einer wissenschaftlichen Internetumgebung zu arbeiten.
0. Bitte folgen Sie Gulp-cli zuerst weltweit.
npm install gulp-cli -g
1. Laden Sie die Projektdatei über git clone herunter.
git clone https://github.com/Jeff2Ma/WeApp-Workflow
2. Es wird empfohlen, das .git Verzeichnis zu löschen (Windows-Benutzer löschen es bitte manuell).
cd WeApp-Workflow
rm -rf .git
3. Installieren Sie die erforderlichen Module
npm i
4. Beginnen Sie mit der Entwicklung
Es wird empfohlen, config.js zu kopieren und in config.custom.js umzubenennen und dann die relevanten Konfigurationsinformationen entsprechend Ihren tatsächlichen Anforderungen neu zu schreiben (jedes Konfigurationselement hat einen Kommentar). Führen Sie als Nächstes den folgenden Befehl im Terminal aus, um es zu aktivieren:
gulp
Verbleibende Aufgaben: gulp clean : dist und tmp -Ordner löschen.
Nachdem Sie die oben genannten Vorgänge abgeschlossen haben, müssen Sie die entsprechenden Einstellungen in den „WeChat Web Developer Tools“ vornehmen (basierend auf v1.x und ist nicht mehr mit v0.x kompatibel).
1. Erstellen Sie ein neues Projekt und wählen Sie direkt das gesamte Projektverzeichnis, also das Verzeichnis, in dem sich project.config.json befindet, als Projektverzeichnis aus.
Als nächstes können Sie in die reguläre Entwicklung einsteigen. Verwenden Sie während des Entwicklungsprozesses einen Editor eines Drittanbieters (WebStorm, Sublime Text usw.), um die Dateien im src Verzeichnis zu bearbeiten . Nach dem Speichern der Änderungen kompiliert der Gulp-Prozess sie in Echtzeit am entsprechenden Speicherort dist Verzeichnis. Das WeChat-Webentwicklertool wird automatisch kompiliert und aktualisiert und dient derzeit nur als Vorschaufunktion .
Entwicklungsschwerpunkte:
SCSS-Entwicklung : Bearbeiten Sie page-name.scss direkt unter src/pages/page-name . Es wird automatisch in page-name.wxss konvertiert und am entsprechenden Speicherort dist -Verzeichnisses abgelegt. Während des Entwicklungsprozesses, bei dem numerische Werte beteiligt sind, werden px Einheiten direkt geschrieben (gemäß iPhone6 als Standard-Designentwurf), und diese werden automatisch berechnet und in rpx Einheiten umgewandelt. Wenn Sie unter besonderen Umständen keine Konvertierung wünschen, schreiben Sie PX bitte in Großbuchstaben.
WXML-Entwicklung : Es gibt keine besonderen Anforderungen, außer dass die CDN-Image- Funktion das Schreiben eines speziellen Image-Pfads erfordert.
WebFont : Erstellen Sie zunächst ein Sprite-Bild auf einer Website wie fontell.com und laden Sie dann die Datei im TTF-Format in src/assets/fonts herunter. Anschließend kann sie automatisch mit Base64 transkodiert werden, indem Sie sie auf die normale Weise zitieren.
CDN-Bilder : (Diese Funktion ist standardmäßig deaktiviert und muss in den Einstellungen aktiviert werden.) wxss oder wxml im WeChat-Applet unterstützen keine Bilder mit relativen Pfaden und erfordern einen absoluten Pfad, der mit https beginnt. Mit diesem Workflow können Sie relative Pfade direkt während der Entwicklung schreiben. Der Workflow hilft beim Hochladen in CDN und beim Ersetzen des ursprünglichen Pfads. Solche Bilder müssen unter src/assets/images platziert werden und dann den Pfad in wxml oder CSS mit %ASSETS_IMG%/filename.png schreiben. %ASSETS_IMG% ist ein benutzerdefiniertes Verzeichnis für die spätere Zeichenfolgenersetzung.
Sprite-Bilder : Zunächst einmal ist es nicht empfehlenswert, Sprite-Bilder in kleinen Programmen zu verwenden. Es ist besser, einzelne Bilder oder WebFont direkt zu verwenden. Wenn Sie es verwenden müssen, folgen Sie dem kleinen Programmbeispiel im Code, um das kleine Bildverzeichnis unter src/assets/sprites zu platzieren, und rufen Sie es dann über @lazysprite "xxxx" in SCSS auf (es wird empfohlen, den aufrufenden Code unter app.scss ). Für die erweiterte Nutzung von Sprite-Bildern klicken Sie bitte hier.
F: Warum gibt es im Workflow keine AutoPrefixer-Funktion?
A: Weil die Option „Style Completion“ im „Projekt“ der WeChat Developer Tools diese Funktion bereits bereitstellt;
F: Warum ist im Workflow keine ES6-zu-ES5-Konvertierungsfunktion von Babel konfiguriert?
A: Wie oben wurden WeChat-Entwicklertools bereitgestellt.
F: Welche Vorteile gibt es im Vergleich zu kleinen Programmentwicklungs-Frameworks wie WePY?
A: WePY, entwickelt vom WeChat-Zahlungsteam, ist in der Tat ein gutes Tool. Im Vergleich zu WePY auf gleicher Ebene hat WeApp-Workflow überhaupt keinen Vorteil. WeApp-Workflow ist ein Workflow-Tool, kein Entwicklungsframework. Es konzentriert sich auf die Entwicklung von CSS in kleinen Programmen. Für einige Entwickler ist kein so umfangreiches Entwicklungsframework wie WePY erforderlich.
F: WeApp-Workflow verfügt nicht über entsprechende spezielle Kompilierungsaufgaben (ähnlich wie gulp build , npm run build )?
A: Ja, da WeApp-Workflow eher für die Entwicklung „kleiner“ kleiner Programme als für komplexe kleine Programme geeignet ist. Daher gibt es in Anbetracht der Entwicklungsgeschwindigkeit, der Codemenge usw. keine spezielle Entwicklungsphase und eine Aufgabe (Entwicklung). Während der Abschlussphase wird eine zusätzliche Kompilierungsaufgabe (buid) hinzugefügt. Nur eine Aufgabe.
Diese kleinen Programme verwenden WeApp-Workflow als Entwicklungsworkflow (Sie können gerne PR senden, um Fälle hinzuzufügen):
tmt-workflow
QMUI_Web
postcss-lazysprite
gulp-qcloud-upload
Fügen Sie Unit-Tests hinzu
ES6-Rewrite
Funktion zum Hochladen auf einen FTP/SFTP-Server
CDN unterstützt Qiniu Cloud Storage
Wenn Sie Feedback oder Funktionsvorschläge haben, können Sie gerne ein Problem erstellen oder eine Pull-Anfrage senden. Vielen Dank für Ihre Unterstützung und Ihren Beitrag.
