wechat h5 boilerplate
v0.3.6
„Machen Sie die H5-Produktion so einfach wie die PPT-Produktion!“
Wechat-H5-Boilerplate (im Folgenden als WHB bezeichnet) ist eine dynamische H5-Vorlage, die speziell für WeChat optimiert wurde und sich zum schnellen Erstellen einer H5-Werbeseite mit Bildlauf im Vollbildmodus eignet.
Beispielsweise ist nur eine Codezeile erforderlich, um einen Text zu animieren:
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
Besuchen Sie mit Ihrem Mobiltelefon die untenstehende Adresse oder scannen Sie den untenstehenden QR-Code
https://panteng.github.io/wechat-h5-boilerplate/
/app
/dist --> 项目文件的分发版本，所有的文件均由Gulp任务生成，请勿手动修改
/audios --> 从app/src/audios复制而来
/fonts --> 从app/src/fonts和在config/vendors.js中指定的第三方字体复制而来
/images --> 由app/src/images下的图片经Imagemin压缩优化生成
/javascripts --> 由app/src/javascripts下的文件经Browserify打包生成
/stylesheets --> 由app/src/scss下的文件编译生成
index.html --> 由app/src/index.html经Gulp-inject插入bundle.(min.).css和bundle.(min.).js后生成
/src --> 项目的源码，所有文件都可编辑
/audios --> 存放音频、视频文件
/fonts --> 存放字体文件
/images --> 存放图片文件
/javascripts --> JS源文件，经Browserify打包后生成app/dist/javascripts/bundle.js
/scss --> SCSS文件，经过编译后生成app/dist/stylesheets/bundle.css
index.html --> 页面HTML，经过Gulp-inject处理后生成app/dist/index.html
/config
vendors.js --> 第三方CSS、JS、Fonts列表，详见vendors.js说明
.gitignore
gulpfile.js --> Gulp任务
package.json
Klonen Sie dieses Projekt lokal
In der Konsole ausführen:
git clone --depth=1 https://github.com/panteng/wechat-h5-boilerplate.git <your-project-name>
cd <your-project-name>
Oder Sie können das komprimierte Paket mit dem WHB-Quellcode direkt von der Release-Seite herunterladen.
Installieren Sie Pakete von Drittanbietern
WHB verwendet NPM, um Pakete von Drittanbietern zu verwalten
In der Konsole ausführen:
npm install
Hinweis 1: Aufgrund der schlechten Netzwerkumgebung in China ist das Herunterladen von Paketen auf NPM sehr langsam. Es wird empfohlen, Taobao NPM Mirror CNPM zu verwenden. Informationen zur Installationsmethode von CNPM finden Sie in den Anweisungen auf der offiziellen Website. CNPM v4.2.0 hat einen Fehler auf Windows-Systemen (siehe Nr. 97). Obwohl der Beamte sagte, dass er behoben wurde, erhalte ich immer noch eine Fehlermeldung, wenn ich CNPM unter Windows verwende, um Pakete zu installieren, die erforderlich sind Node-Gyp-Kompilierung. Ich empfehle außerdem nicht, CNPM v3.4.1 zu verwenden, da die integrierte NPM-Version zu alt ist. Es wird empfohlen npm install --registry=https://registry.npm.taobao.org -d direkt über das Mirror Warehouse zu installieren. (-d wird hinzugefügt, um detaillierte Informationen während des Installationsvorgangs anzuzeigen. Ich persönlich verwende diese Methode häufig, um festzustellen, ob der Installationsvorgang aufgrund von Netzwerk- oder anderen Problemen hängen bleibt.)
Hinweis 2: Einige von WHB benötigte Pakete von Drittanbietern sind von node-gyp abhängig. Bevor Sie diese Pakete installieren, bestätigen Sie bitte, dass node-gyp korrekt auf Ihrem Computer installiert wurde. Informationen zur Installation finden Sie in der offiziellen Node-Gyp-Dokumentation. Windows-Benutzer könnten Probleme haben, da die Installation von Node-Gyp unter Windows mühsam ist.
Hinweis 3: Windows-Benutzer platzieren WHB bitte nicht in einem Verzeichnis, das zu weit im Pfad liegt. Da Windows nur Pfade mit einer Länge von weniger als 255 Zeichen unterstützt, ist es sehr wahrscheinlich, dass die Kompilierung von node-gyp fehlschlägt, wenn Sie dieses Projekt in einem Verzeichnis mit einem tiefen Pfad ablegen.
Hinweis 4: Windows-Benutzer: Wenn Sie node-gyp korrekt installiert haben, aber beim Ausführen npm install -d immer noch eine Fehlermeldung erhalten und die Fehlermeldung „EPERM, Vorgang nicht zulässig“ lautet, versuchen Sie es bitte npm install -d --force .
Beginnen Sie mit der Entwicklung
Auf der Konsole ausführen:
gulp dev
Nach einem Moment öffnet sich das Browserfenster automatisch und zeigt auf die Adresse localhost:3000 . Wenn Sie eine Datei unter app/src ändern, wird die Browserseite automatisch aktualisiert.
Führen Sie die Gulp-Prod-Aufgabe aus
In der Konsole ausführen:
gulp prod
Diese Aufgabe generiert zwei neue Dateien bundle.min.css und bundle.min.js im Ordner app/dist und löscht die ursprünglichen bundle.css und bundle.js.
Beim Veröffentlichen müssen Sie nur die Dateien im Ordner app/dist auf den Server hochladen, weitere Dateien sind nicht erforderlich. Die CSS-, JS- und Bilddateien in app/dist sind komprimiert und optimiert.
Ladeanimation
H5-Seiten enthalten in der Regel viele Bilder und Hintergrundmusik, daher ist eine ansprechende Ladeanimation erforderlich.
Sie können einige CSS3-Animationen selbst schreiben, den animationsbezogenen HTML-Code in <div class="loading-overlay"></div> in app/src/index.html einfügen und den relevanten CSS3-Animationscode in in app/ integrieren. src/scss.
Wenn Sie sich Ärger ersparen möchten, kann Ihnen die Website Loading.io dabei helfen, vorgefertigte Ladeanimationen zu erstellen (wenn Sie sie nicht öffnen können, gehen Sie bitte durch die Wand). Es empfiehlt sich, eine animierte Bilddatei im SVG-Format zu generieren, die Datei in „loading.svg“ zu ändern und die gleichnamige Datei unter app/src/images/ zu ersetzen.
Teilen Sie auch einige hervorragende CSS3-Ladeanimationsbibliotheken:
Seitenwechseleffekt
Der Seitenwechsel unterstützt derzeit nur die vier in Swiper enthaltenen Typen: Slide, Fade, Flip und Coverflow (Cube unterstützt dies nicht, da es dieses Szenario nicht erfüllt). Weitere Informationen finden Sie im Abschnitt zu Effekten in der Swiper-Dokumentation.
WHB ist noch nicht in der Lage, unterschiedliche Umschaltmethoden für verschiedene Seiten anzugeben. Ich werde darüber nachdenken, diese Funktion und weitere coole Umschaltmethoden in späteren Versionen hinzuzufügen.
Animation von Elementen (Bilder, Text) innerhalb der Seite
Das Hinzufügen von Animationen zu Bildern und Text in WHB ist sehr einfach.
Beispielsweise gibt es auf der ersten Seite einen Textabsatz, der in einer Animation angezeigt werden muss. Der Code lautet wie folgt:
<div class="swiper-slide slide-1">
<p class="animated" data-ani-name="slideInRight" data-ani-duration="1s" data-ani-delay="0.3s">I'm a coder!</p>
</div>
Fügen Sie einfach den Klassennamen animated zu diesem Text hinzu und geben Sie die drei Attribute data-ani-name (Animationsname), data-ani-duration (Animationsausführungszeit) und data-ani-delay (Animationsverzögerungszeit) an.
Die Animation von WHB wird von Animate.css bereitgestellt. Die unterstützten Animationsnamen können auf der offiziellen Website von Animate.css eingesehen werden.
Schriftsymbol
In der mit WHB gelieferten Schriftsymboldatei gibt es nur zwei Symbole, nämlich das Musiksymbol in der oberen rechten Ecke und das Aufwärtsstrich-Eingabeaufforderungssymbol am unteren Bildschirmrand. Wenn Sie mehr Symbole benötigen, empfiehlt es sich, zur Anpassung Icomoon.io zu verwenden, die benötigten Symbole auszuwählen (Sie können sie auch selbst entwerfen und hochladen) und sie in Schriftartdateien zu packen.
Der Grund, warum die Verwendung allgemeiner Schriftartenpakete wie Font-Awesome nicht empfohlen wird, liegt darin, dass Font-Awesome viele Symbole enthält, sodass die Schriftartendatei relativ groß ist und die meisten Symbole nicht verwendet werden. Größere Schriftartdateien können das Laden von Webseiten auf Benutzergeräten verlangsamen.
Bildoptimierung
WHB verfügt über die Funktion der verlustbehafteten Komprimierung von Bildern unter app/src/images. Ich empfehle jedoch dennoch, dass Sie die erforderlichen manuellen Optimierungen an den Bildern durchführen, bevor Sie sie in den Ordner app/src/images werfen, z. B. „An geeignete Größe anpassen“ und „Integration“. einige kleine Bilder in Sprites usw.
Teilen Sie einige nützliche Websites zur Bildoptimierung und -verarbeitung:
Hintergrundmusik
Es wird empfohlen, dass das Dateiformat der Hintergrundmusik MP3 ist und die Größe 1 MB nicht überschreiten sollte. Sie können professionelle Audiobearbeitungssoftware wie Adobe Audition verwenden, um Hintergrundmusik abzufangen und zu komprimieren.
Wenn dies nicht erforderlich ist, stellen Sie bitte keine Hintergrundmusik ein, die Benutzer stört.
Debuggen mobiler Endgeräte
Führen Sie zunächst die gulp dev aus und suchen Sie den folgenden Absatz in der Konsolenausgabe:
[BS] Access URLs:
----------------------------------------
Local: http://localhost:3000
External: http://192.168.187.101:3000
----------------------------------------
UI: http://localhost:3001
UI External: http://192.168.187.101:3001
----------------------------------------
Stellen Sie dann sicher, dass sich Ihr Mobilgerät (Mobiltelefon, Tablet usw.) und Ihr Computer im selben LAN befinden (am einfachsten ist es, Computer, Mobiltelefon und Tablet mit demselben WLAN zu verbinden; oder der Computer ist mit dem Router verbunden). mit einem Netzwerkkabel, und das Mobiltelefon und das Tablet sind mit demselben WLAN verbunden, das vom Router gesendet wird.
Öffnen Sie abschließend den Browser auf Ihrem Mobilgerät und greifen Sie in der dritten Zeile oben auf die URL zu, die „Extern“ entspricht (beachten Sie, dass Ihre URL möglicherweise von der oben geschriebenen URL abweicht; schauen Sie sich bitte die externe URL an, die in Ihrer eigenen Konsole angezeigt wird).
Solange Sie nun die Datei unter app/src ändern, aktualisieren alle Mobilgeräte und Computer, die auf diese URL zugreifen, automatisch die Browserseite. Vorgänge, die Sie auf einem Gerät ausführen, werden auch in Echtzeit mit den anderen Geräten synchronisiert (z. B. das Wischen mit dem Finger nach oben auf einer Seite).
Responsives Design
Es wird empfohlen, rem anstelle von px zu verwenden, um die Größe, den Rand und die Schriftgröße von Elementen festzulegen.
In WHB ändert sich der 1rem entsprechende px-Wert mit der Bildschirmgröße des Geräts.
Auf Geräten mit einer Bildschirmbreite von weniger als 400 Pixel ist 1rem = 16 Pixel;
Auf Geräten mit einer Bildschirmbreite von mehr als 400 Pixel und weniger als 600 Pixel ist 1rem = 22 Pixel;
Auf Geräten mit einer Bildschirmbreite von mehr als 600 Pixel ist 1rem = 32 Pixel;
Sehen Sie sich den Code zu Media Query in app/src/scss/base/_base.scss an.
config/vendors.js Beschreibung
Die Datei „vendors.js“ wird zum Registrieren von CSS-, JS- und Schriftarteninformationen von Drittanbietern verwendet. Alle in „vendors.js“ registrierten Dateien von Drittanbietern werden in irgendeiner Form zum Projekt hinzugefügt. Beispiel: Wenn Vendors.js jetzt so aussieht:
module.exports = {
stylesheets: [
'node_modules/normalize.css/normalize.css',
'node_modules/swiper/dist/css/swiper.css',
'node_modules/animate.css/animate.css',
'node_modules/font-awesome/css/font-awesome.css'
],
javascripts: [
'node_modules/jquery/dist/jquery.js'，
'node_modules/swiper/dist/js/swiper.jquery.js'
],
fonts: [
'node_modules/font-awesome/fonts/*'
]
};
Alle CSS-Dateien in den Stylesheets von Vendors.js werden zur schließlich vom Projekt generierten Bundle.css hinzugefügt.
Alle js-Dateien in den Javascripts von sellers.js werden zu bundle.js hinzugefügt, das schließlich vom Projekt generiert wird.
Alle Dateien in den Schriftarten von Vendors.js werden in den Ordner app/dist/fonts kopiert.
Denken Sie daran, dass in sellers.js registrierte Dateien zuerst zu bundle.css und bundle.js hinzugefügt werden, sodass Sie sich keine Sorgen machen müssen, dass die von Ihnen geschriebenen Stile in SCSS überschrieben werden oder feststellen, dass es sich um ein Objekt aus einer Bibliothek eines Drittanbieters handelt nicht in main.js definierter Situation gefunden. Die in sellers.js registrierten Dateien werden in der Reihenfolge der Registrierung zu bundle.css und bundle.js hinzugefügt. Sie müssen also sicherstellen, dass die Registrierungsreihenfolge korrekt ist. Beispielsweise muss jquery.js vor swiper.jquery.js registriert werden , weil swiper.jquery.js von jquery.js abhängig ist.
Hinweis 1: Der Dateipfad ist relativ zu gulpfile.js, nicht zu sellers.js.
Hinweis 2: Wenn Sie JS-Dateien von Drittanbietern nicht auf diese Weise importieren möchten und zum Importieren die Methode „Require Writing“ von CommonJS verwenden möchten, ist dies ebenfalls möglich. Führen Sie jQuery beispielsweise folgendermaßen in app/src/javascripts/main.js ein:
var $ = require('jquery');
Schluckaufgaben
Wenn Sie während des Entwicklungsprozesses feststellen, dass Sie die Bilder, Audiodateien, Schriftarten und andere Dateien in der Datei app/src geändert oder ersetzt haben, die Seite im Browser sich jedoch nicht entsprechend geändert hat, versuchen Sie bitte erneut, gulp dev in der Konsole auszuführen gulp dev .
MIT
