1. Der Unterschied zwischen kleinen Programmen und gewöhnlicher Webentwicklung
1. Unterschiedliche Betriebsumgebungen
- Webseiten werden in einer Browserumgebung ausgeführt
- Das Mini-Programm läuft in der WeChat-Umgebung
2. API ist anders
- Aufgrund der unterschiedlichen Laufumgebungen können die APIs von DOM und BOM nicht im Applet aufgerufen werden.
- Miniprogramme können jedoch verschiedene von der WeChat-Umgebung bereitgestellte APIs aufrufen, wie zum Beispiel:
lGeolocationlScannen Sie den Codelpay
3. Verschiedene Entwicklungsmodelle
- Webentwicklungsmodell: Browser + Code-Editor
- Miniprogramme verfügen über eigene Standardentwicklungsmodelle:
l Beantragen Sie ein Mini-ProgrammentwicklungskontolInstallieren Sie Miniprogramm-EntwicklertoolslErstellen und konfigurieren Sie Miniprogrammprojekte
2. Grundstruktur des Miniprogrammprojekts
1. Seiten werden zum Speichern der Seiten aller Miniprogramme verwendet
2. Utils wird zum Speichern von Modulen mit Werkzeugeigenschaften verwendet (z. B. benutzerdefinierte Module für die Formatierungszeit).
3. app.js-Eintragsdatei des Applet-Projekts
4. app.json globale Konfigurationsdatei des Applet-Projekts
5. app.wxss globale Stildatei des Applet-Projekts
6. Projektkonfigurationsdatei project.config.json
7. sitemap.json wird verwendet, um zu konfigurieren, ob das Miniprogramm und seine Seiten von WeChat indiziert werden dürfen
3. Komponenten der Miniprogrammseite
Verantwortliche des Miniprogramms empfehlen, dass alle Seiten des Miniprogramms im Seitenverzeichnis gespeichert werden und in separaten Ordnern vorhanden sind.
Unter diesen besteht jede Seite aus 4 Basisdateien:
1. .js-Datei (Skriptdatei der Seite, Speicherung von Seitendaten, Ereignisverarbeitungsfunktionen usw.)
2. .json-Datei (Konfigurationsdatei der aktuellen Seite, Aussehen des Konfigurationsfensters, Leistung usw.)
3. .wxml-Datei (Vorlagenstrukturdatei der Seite)
4. .wxss-Datei (Stylesheet-Datei der aktuellen Seite)
4. Die Rolle von Konfigurationsdateien
1. JSON ist ein Datenformat. In der tatsächlichen Entwicklung erscheint JSON immer in Form von Konfigurationsdateien. Miniprogrammprojekte bilden da keine Ausnahme: Über verschiedene .json-Konfigurationsdateien können Miniprogrammprojekte auf verschiedenen Ebenen konfiguriert werden.
Es gibt 4 Arten von JSON- Konfigurationsdateien im Miniprogrammprojekt , nämlich:①Die app.json-Konfigurationsdatei im Projektstammverzeichnis②Die Konfigurationsdatei project.config.json im Projektstammverzeichnis③sitemap.json-Konfigurationsdatei im Projektstammverzeichnis④.json-Konfigurationsdatei in jedem Seitenordner
2. app.json ist die globale Konfiguration des aktuellen Miniprogramms , einschließlich aller Seitenpfade, Fensterdarstellung, Schnittstellenleistung, unteren Registerkarten usw. des Miniprogramms. Der Inhalt der app.json-Konfiguration im Demo-Projekt lautet wie folgt:
: _ _①Seiten: Wird zum Aufzeichnen der Pfade aller Seiten des aktuellen Applets verwendet②Fenster: Definieren Sie global die Hintergrundfarbe, Textfarbe usw. aller Seiten des Miniprogramms③Stil: Definieren Sie global die von der Applet-Komponente verwendete Stilversion④sitemapLocation: Wird verwendet, um den Standort von sitemap.json anzugeben
3. project.config.json ist die Projektkonfigurationsdatei, die zum Aufzeichnen der personalisierten Konfiguration verwendet wird, die wir für die Miniprogramm-Entwicklungstools vorgenommen haben, zum Beispiel:
Die Einstellung l speichert kompilierungsbezogene Konfigurationenl Projektname speichert den Projektnamenl appid speichert die Konto-ID des Applets
4. WeChat hat jetzt die Suche innerhalb des Miniprogramms geöffnet, und der Effekt ähnelt dem SEO von PC-Webseiten. Die Datei sitemap.json wird verwendet, um zu konfigurieren, ob die Miniprogrammseite die WeChat-Indizierung zulässt. Wenn der Entwickler WeChat die Indizierung zulässt, indiziert WeChat den Seiteninhalt des Miniprogramms in Form eines Crawlers. Wenn die Suchbegriffe des Benutzers erfolgreich mit dem Index der Seite übereinstimmen, wird die Seite des Miniprogramms wahrscheinlich in den Suchergebnissen angezeigt.
Hinweis: Die Index-Eingabeaufforderung der Sitemap ist standardmäßig aktiviert. Wenn Sie die Index-Eingabeaufforderung der Sitemap deaktivieren müssen, können Sie das Feld checkSiteMap in den Einstellungen der Miniprogramm-Projektkonfigurationsdatei project.config.json auf „false“ konfigurieren.
5. Für jede Seite im Miniprogramm können Sie eine .json-Datei verwenden, um das Erscheinungsbild des Fensters dieser Seite zu konfigurieren. Die Konfigurationselemente auf der Seite überschreiben dieselben Konfigurationselemente im Fenster von app.json . Zum Beispiel:
6. Wir müssen nur den Speicherpfad der Seite in app.json -> Seiten hinzufügen, und das Miniprogramm-Entwicklertool kann uns dabei helfen, automatisch die entsprechende Seitendatei zu erstellen.
wie das Bild zeigt:
Sie müssen lediglich die Reihenfolge der Seitenpfade im Array „app.json“ -> „pages“ anpassen, um die Startseite des Projekts zu ändern. Das Applet stellt die erste Seite als Projekthomepage dar, wie in der Abbildung dargestellt:
7. WXML ist eine Reihe von Tag-Sprachen, die vom Mini-Programm-Framework entworfen wurden und zum Aufbau der Struktur der Mini-Programmseite verwendet werden. Seine Funktion ähnelt HTML in der Webentwicklung.
Der Unterschied zwischen WXML und HTML
①Die Etikettennamen sind unterschiedlichlHTML (div, span, img, a)lWXML (Ansicht, Text, Bild, Navigator)②Die Attributknoten sind unterschiedlichl<a href="#">Hyperlink</a>l<navigator url="/pages/home/home"></navigator>③ Bietet eine Vorlagensyntax ähnlich der von VuelDatenbindunglListen-RenderinglBedingtes Rendern
WXS (WeiXin Script) ist eine einzigartige Skriptsprache für kleine Programme. In Kombination mit WXML kann die Struktur der Seite erstellt werden.
In den js der Seite definierte Funktionen können nicht in WXML aufgerufen werden, in WXS definierte Funktionen können jedoch in WXML aufgerufen werden. Daher ist in kleinen Programmen ein typisches Anwendungsszenario von WXS „Filter“.
8. WXSS ist eine Reihe von Stilsprachen, die zur Beschreibung von WXML-Komponentenstilen verwendet werden, ähnlich wie CSS in der Webentwicklung.
Der Unterschied zwischen WXSS und CSS
①Rpx-Größeneinheit hinzugefügtlCSS erfordert eine manuelle Konvertierung der Pixeleinheiten, z. B. remlWXSS unterstützt die neue Größeneinheit rpx auf der untersten Ebene und das Applet führt automatisch Konvertierungen auf Bildschirmen unterschiedlicher Größe durch.②Bietet globale Stile und lokale StilelApp.wxss im Projektstammverzeichnis gilt für alle MiniprogrammseitenlDer .wxss-Stil lokaler Seiten wird nur auf der aktuellen Seite wirksam③WXSS unterstützt nur einige CSS-Selektorenl.class und #idElementlUnion-Selektor, Nachkommen-SelektorPseudoklassenselektoren wie l::after und ::before
9. Für ein Projekt reicht es nicht aus, nur eine Schnittstellenanzeige bereitzustellen. Im Miniprogramm verarbeiten wir Benutzervorgänge über .js-Dateien. Zum Beispiel: auf Benutzerklicks reagieren, den Standort des Benutzers ermitteln usw.
JS-Dateien in Miniprogrammen sind in drei Hauptkategorien unterteilt, nämlich:
①app.jsl ist die Eingabedatei für das gesamte Miniprogrammprojekt. Das gesamte Miniprogramm wird durch Aufruf der App()-Funktion gestartet.②Die .js-Datei der Seitel ist die Eintragsdatei der Seite. Die Seite wird durch Aufrufen der Funktion Page() erstellt und ausgeführt.③Gewöhnliche .js-Dateil ist eine gewöhnliche Funktionsmoduldatei, die zum Kapseln öffentlicher Funktionen oder Attribute für die Seitenverwendung verwendet wird.
5. Host-Umgebung und Rendering-Prozess des Miniprogramms
Die Host- Umgebung ( Host-Umgebung ) bezieht sich auf die abhängige Umgebung, die für die Ausführung des Programms erforderlich ist . Zum Beispiel:Android-System und iOS-System sind zwei verschiedene Hosting-Umgebungen. Die Android-Version der WeChat-App kann nicht in der iOS-Umgebung ausgeführt werden. Daher ist Android die Host-Umgebung für Android-Software. Software, die von der Host-Umgebung getrennt ist, ist bedeutungslos!
Die Host-Umgebung des Miniprogramms ist das WeChat-Mobiltelefon.
Inhalte, die in der Hosting-Umgebung des Miniprogramms enthalten sind
①Kommunikationsmodell
②Betriebsmechanismus
③Komponenten
④API
Der Hauptteil der Kommunikation im Applet ist die Rendering-Schicht und die Logikschicht, darunter:
①WXML-Vorlagen und WXSS-Stile funktionieren in der Rendering-Ebene
②JS-Skript arbeitet auf der Logikebene
Startvorgang des Miniprogramms:
①Laden Sie das Codepaket des Applets auf die lokale Festplatte herunter
②Parsen Sie die globale Konfigurationsdatei app.json
③Führen Sie die Applet-Eintragsdatei app.js aus und rufen Sie App() auf, um eine Applet-Instanz zu erstellen
④Rendern Sie die Applet-Homepage
⑤Das Miniprogramm wird gestartet
Prozess zum Rendern von Miniprogrammseiten
① Laden Sie die .json-Konfigurationsdatei der Parsing-Seite
② Laden Sie die .wxml-Vorlage und den .wxss-Stil der Seite
③Führen Sie die .js-Datei der Seite aus und rufen Sie Page() auf, um eine Seiteninstanz zu erstellen
④Seitenrendering abgeschlossen
Klassifizierung von Komponenten in Applets
Die Komponenten im Miniprogramm werden ebenfalls von der Host-Umgebung bereitgestellt, und Entwickler können auf Basis der Komponenten schnell schöne Seitenstrukturen erstellen. Offiziell sind die Bestandteile von Miniprogrammen in 9 Kategorien unterteilt, nämlich:
①Container anzeigen
②Grundlegender Inhalt
③Formularkomponente
④Navigationskomponente
⑤Medienkomponenten
⑥Map-Kartenkomponente
⑦canvas Canvas-Komponente
⑧Offene Funktionen
⑨Barrierefreiheit
Häufig verwendete Ansichtscontainerkomponenten
①AnsichtlNormaler Sichtbereichl ähnelt einem div in HTML und ist ein Element auf BlockebenelWird häufig verwendet, um Seitenlayouteffekte zu erzielen②Scroll-AnsichtlScrollbarer AnsichtsbereichlWird häufig verwendet, um Scroll-Listeneffekte zu erzielen③Swiper und Swiper-ItemlKarussell-Container-Komponente und Karussell-Artikel-Komponente
6. Kollaborative Arbeit und Miniprogramm-Entwicklungsprozess
1. Organisationsstruktur der Projektmitglieder
Die Verwaltung von Miniprogramm-Mitgliedern spiegelt sich in der Verwaltung von Miniprogramm-Projektmitgliedern und Erfahrungsmitgliedern durch den Administrator wider:
①Projektmitglieder:l bezeichnet Mitglieder, die an der Entwicklung und dem Betrieb von Miniprogrammen beteiligt sindlSie können sich beim Miniprogramm-Verwaltungshintergrund anmeldenlAdministratoren können Projektmitglieder hinzufügen, löschen und die Rollen der Projektmitglieder festlegen②Erfahrungsmitglieder:l zeigt Mitglieder an, die an der internen Beta-Erfahrung des Miniprogramms teilgenommen habenlSie können die Testversion des Miniprogramms nutzen, sind aber kein Projektmitgliedl Administratoren und Projektmitglieder können Erfahrungsmitglieder hinzufügen und löschen
Beschreibung der Entwicklerberechtigung
① Entwicklerberechtigungen: Kann Miniprogramm-Entwicklertools und Codeentwicklung für Miniprogrammfunktionen verwenden② Experiencer-Berechtigungen: Sie können die Testversion des Miniprogramms verwenden③ Anmeldeberechtigungen: Sie können sich ohne Administratorbestätigung beim Miniprogramm-Verwaltungshintergrund anmelden.④ Entwicklungseinstellungen: Legen Sie den Domänennamen des Miniprogrammservers fest, senden Sie eine Nachricht und scannen Sie den QR-Code des normalen Links, um das Miniprogramm zu öffnen⑤ Tencent Cloud Management: Einstellungen für die Cloud-Entwicklung
2. Mini-Programmentwicklungsprozess
3. Verschiedene Versionen im Softwareentwicklungsprozess
Im Softwareentwicklungsprozess werden unterschiedliche Softwareversionen entsprechend unterschiedlichen Zeitknoten erstellt, wie zum Beispiel:
① Während Entwickler Code schreiben, führen sie Selbsttests am Projektcode (Entwicklungsversion) durch.
② Bis das Programm einen stabilen und erlebbaren Zustand erreicht, übergibt der Entwickler die Erlebnisversion dem Produktmanager und den Testern zum Erfahrungstest
③Nachdem Sie die Fehler im Programm endgültig behoben haben, geben Sie die offizielle Version für externe Benutzer frei
4. Mini-Programmversion
5. Veröffentlichung und Start des Miniprogramms
Die Veröffentlichung und der Start eines kleinen Programms erfordert im Allgemeinen drei Schritte: Code hochladen -> zur Überprüfung einreichen -> veröffentlichen.
7. Konfiguration des Miniprogramms
1. Globale Konfigurationsdateien und allgemeine Konfigurationselemente
Die Datei app.json im Stammverzeichnis des Miniprogramms ist die globale Konfigurationsdatei des Miniprogramms. Häufig verwendete Konfigurationselemente sind wie folgt:
① SeitenlNotieren Sie die Speicherpfade aller Seiten des aktuellen Miniprogramms② Fensterl Legen Sie das Erscheinungsbild des Applet-Fensters global fest③ Registerkarte „Leiste“.lLegen Sie den TabBar-Effekt unten im Applet fest④ StillOb die neue Version der Komponentenstile aktiviert werden soll
Häufig verwendete Konfigurationselemente für Fensterknoten
2. Die Beziehung zwischen Seitenkonfiguration und globaler Konfiguration
Im Miniprogramm
Wenn einige Miniprogrammseiten eine besondere Fensterleistung wünschen, kann die „.json-Konfigurationsdatei auf Seitenebene“ diese Anforderung erfüllen.
Hinweis: Wenn die Seitenkonfiguration mit der globalen Konfiguration in Konflikt steht, basiert der endgültige Effekt auf dem Prinzip der Nähe und basiert auf der Seitenkonfiguration.
Häufig verwendete Konfigurationselemente in der Seitenkonfiguration
8. Lebenszyklus des Miniprogramms
Der Lebenszyklus bezieht sich auf die gesamte Phase eines Objekts von der Erstellung -> Ausführung -> Zerstörung, wobei der Schwerpunkt auf einem Zeitraum liegt. Zum Beispiel:
l Die Geburt von Zhang San markiert den Beginn des Lebenszyklus dieser PersonlDer Tod von Zhang San bedeutet das Ende des Lebenszyklus dieser Personl Zhang Sans Leben in der Mitte ist Zhang Sans LebenszyklusWir können den laufenden Prozess jedes kleinen Programms in einem Lebenszyklus zusammenfassen:
lDer Start des Applets zeigt den Beginn des Lebenszyklus anlDas Schließen des Applets zeigt das Ende des Lebenszyklus anlDer Prozess der Ausführung des Zwischen-Applets ist der Lebenszyklus des Applets
In Miniprogrammen ist der Lebenszyklus in zwei Kategorien unterteilt, nämlich:
Unter diesen ist der Lebenszyklusbereich der Seite kleiner und der Lebenszyklusbereich der Anwendung größer, wie in der Abbildung dargestellt:
Lebenszyklusfunktion: Es handelt sich um eine integrierte Funktion des Miniprogramm-Frameworks, die zusammen mit dem Lebenszyklus automatisch der Reihe nach ausgeführt wird.
Die Rolle der Lebenszyklusfunktion: Ermöglicht Programmierern die Ausführung bestimmter Vorgänge zu einem bestimmten Zeitpunkt. Wenn die Seite beispielsweise gerade geladen wird, können die Seitendaten in der Lebenszyklusfunktion onLoad initialisiert werden.
Hinweis: Der Lebenszyklus betont den Zeitraum und die Lebenszyklusfunktion betont den Zeitpunkt.
9. Lebenszyklus der Komponenten
1. Alle Lebenszyklusfunktionen von Komponenten
2. Hauptlebenszyklusfunktionen von Komponenten
Es gibt drei wichtigste Lebenszyklusfunktionen : erstellt , angehängt und getrennt . Ihre jeweiligen Eigenschaften sind wie folgt:
① Wenn die Komponenteninstanz gerade erstellt wird, wird die erstellte Lebenszyklusfunktion ausgelöst.lSetData kann derzeit nicht aufgerufen werdenNormalerweise sollte diese Lebenszyklusfunktion nur verwendet werden, um dieser Komponente einige benutzerdefinierte Attributfelder hinzuzufügen.② Nachdem die Komponente vollständig initialisiert wurde und in den Seitenknotenbaum gelangt, wird die angehängte Lebenszyklusfunktion ausgelöst.lZu diesem Zeitpunkt wurde this.data initialisiert.lDieser Lebenszyklus ist sehr nützlich. Die meisten Initialisierungsarbeiten können zu diesem Zeitpunkt ausgeführt werden (z. B. das Senden einer Anfrage zum Abrufen erster Daten).③ Nachdem die Komponente den Seitenknotenbaum verlassen hat, wird die getrennte Lebenszyklusfunktion ausgelöst.lBeim Verlassen einer Seite wird die getrennte Lebenszyklusfunktion jeder benutzerdefinierten Komponente auf der Seite ausgelöst.lDies ist ein guter Zeitpunkt, um einige Reinigungsarbeiten durchzuführen
10. Vergabe von Unteraufträgen
Unter Unterpaketierung versteht man die Aufteilung eines kompletten kleinen Programmprojekts in verschiedene Unterpakete entsprechend den Anforderungen, das Packen in verschiedene Unterpakete während der Erstellung und das Laden bei Bedarf, wenn Benutzer sie verwenden.
Die Hauptvorteile der Vergabe von Unteraufträgen an Miniprogramme sind die folgenden zwei Punkte:
●Es kann die Downloadzeit für den ersten Start des Miniprogramms optimieren.
●Es kann die Zusammenarbeit besser entkoppeln, wenn es von mehreren Teams gemeinsam entwickelt wird
Vor der Vergabe von Unteraufträgen wurden alle Seiten und Ressourcen des Miniprogrammprojekts zusammengepackt, was dazu führte, dass das gesamte Projekt zu groß wurde und sich die Downloadzeit für den ersten Start des Miniprogramms verringerte.
Nach der Vergabe von Unteraufträgen besteht das Miniprogrammprojekt aus 1 Hauptpaket + mehreren Unterverträgen:
Hauptpaket: Enthält im Allgemeinen nur die Startseite oder TabBar-Seite des Projekts sowie einige öffentliche Ressourcen, die alle Unterpakete verwenden müssen
l Untervergabe: Enthält nur Seiten und private Ressourcen, die sich auf die aktuelle Untervergabe beziehen
Regeln zum Laden von Unterpaketen
① Wenn das Miniprogramm gestartet wird, wird standardmäßig das Hauptpaket heruntergeladen und die Seite im Hauptpaket gestartet.
● Die TabBar-Seite muss im Hauptpaket platziert werden.
② Wenn der Benutzer eine Seite im Unterpaket aufruft , lädt der Client das entsprechende Unterpaket herunter. Anzeige nach Abschluss
●Nicht-TabBar-Seiten können je nach Funktion in verschiedene Unterverträge unterteilt und bei Bedarf heruntergeladen werden.
Begrenzung des Unterauftragsvolumens
Derzeit unterliegt die Größe von Miniprogramm-Unterpaketen den folgenden zwei Einschränkungen:
●Die Größe aller Unterpakete des gesamten Miniprogramms darf 16 MB nicht überschreiten (Hauptpaket + alle Unterpakete)
●Die Größe eines einzelnen Unterpakets /main-Paket darf 2 MB nicht überschreiten
Nutzen Sie die Vergabe von Unteraufträgen
1.Konfigurationsmethode
2. Verpackungsgrundsätze
① Das Miniprogramm wird entsprechend der Konfiguration der Unterpakete in Unterpakete unterteilt, und Verzeichnisse außerhalb der Unterpakete werden in das Hauptpaket gepackt.
② Das Hauptpaket kann auch eigene Seiten haben (d. h. das äußerste Seitenfeld)
. ③ Die tabBar-Seite muss vorhanden sein im Hauptpaket
④ Unterpakete können nicht ineinander verschachtelt werden
3. Zitatgrundsätze
① Das Hauptpaket kann nicht auf private Ressourcen im Unterpaket verweisen.
Unterverträge können nicht auf die privaten Ressourcen des anderen verweisen.
③ Unterverträge können auf öffentliche Ressourcen im Hauptpaket verweisen.
unabhängige Unterauftragsvergabe
1. Der Unterschied zwischen unabhängiger Untervergabe und gewöhnlicher Untervergabe
Der Hauptunterschied besteht darin, ob die Ausführung vom Hauptpaket abhängig ist.
● Gewöhnliche Unterpakete müssen für die Ausführung vom Hauptpaket abhängig sein.
● Unabhängige Unterpakete können unabhängig ausgeführt werden, ohne dass das Hauptpaket heruntergeladen werden muss
2. Anwendungsszenarien
Entwickler können bestimmte Seiten mit einer gewissen funktionalen Unabhängigkeit nach Bedarf in unabhängige Unterpakete konfigurieren. Die Gründe dafür sind folgende:
●Wenn das Miniprogramm von der normalen Unterauftragsseite aus gestartet wird, muss zuerst das Hauptpaket heruntergeladen werden. ●
Die unabhängige Unterauftragsbearbeitung kann ausgeführt werden, ohne auf das Hauptpaket angewiesen zu sein, was die Startgeschwindigkeit der Unterauftragsvergabe erheblich verbessern kann Seite.Hinweis: In einem Miniprogramm können mehrere unabhängige Unterverträge vorhanden sein.
3. Zitatgrundsätze
Unabhängige Unterverträge, normale Unterverträge und Hauptpakete sind voneinander isoliert und können nicht auf die Ressourcen des anderen verweisen! Zum Beispiel:
① Das Hauptpaket kann nicht auf private Ressourcen innerhalb unabhängiger Unterverträge verweisen.
② Unabhängige Unterverträge können nicht auf die privaten Ressourcen des anderen verweisen. Ressourcen
. ③ Auf private Ressourcen kann nicht verwiesen werden zwischen unabhängiger Untervergabe und gewöhnlicher Untervergabe
④ Besonderer Hinweis: Öffentliche Ressourcen im Hauptpaket können bei der unabhängigen Untervergabe nicht referenziert werden
Untervergebener Vorab-Download
Das Vorherunterladen von Unterpaketen bezieht sich auf: Beim Aufrufen einer bestimmten Seite des Miniprogramms lädt das Framework automatisch die möglicherweise benötigten Unterpakete vorab herunter, wodurch die Startgeschwindigkeit beim Aufrufen nachfolgender Unterauftragsseiten verbessert wird.
1. Konfigurieren Sie den an Subunternehmer vergebenen Vorab-Download
2. Einschränkungen beim Vorab-Download durch Unterauftragnehmer
Schreiben Sie am Ende:
Es gibt zu viele Details zu einigen Komponenten, Navigation, Parameterübertragung, Kommunikation usw.! ~Und es ist besser, die offenen Dokumente für diesen Teil zu lesen, deshalb mache ich mir hier keine Notizen!