Zusammenfassung der Wissenspunkte zu WeChat-Miniprogrammen

Unterpakete laden

Da die Hauptpaketgröße des Miniprogramms die 2M-Grenze nicht überschreitet, ist es eine gute Wahl, Unterpakete zu verwenden, die die Gesamtgröße des Unterpakets nicht überschreiten 8M. Sie können weitere Unterpakete hinzufügen. Das Laden von Unterpaketen kann die Downloadzeit optimieren, wenn Sie die Unterpaketseite aufrufen und dann herunterladen Daten und legen Sie sie in Unterpakete (z. B. Diagramme)

rpx-Einheit,

Die am häufigsten verwendete Anpassungsmethode auf dem mobilen Endgerät ist die Verwendung von rem oder vw ist die Einheit für die Anpassung, daher stellt das WeChat-Applet die rpx-Einheit zur Anpassung bereit Sie können das Autorisierungs-Popup-Fenster direkt aufrufen und anzeigen. Klicken Sie hier, um den Benutzer zur Autorisierung zu führen Die Benutzeroberfläche des Miniprogramms wurde angepasst. Die Testversion und die Entwicklungsversion können weiterhin die ursprüngliche Methode verwenden.

Z-Index der nativen Komponente

Die Ebene der nativen Komponente ist am höchsten, sodass unabhängig davon, auf welchen Z-Index eingestellt ist, andere Komponenten Auf der Seite kann das Abdecken der nativen Komponenten nicht durch Cover-View gelöst werden. In einigen spezifischen Umgebungen wie Swiper- oder Popup-Fenstern müssen die nativen Komponenten jedoch ausgeblendet und ausgeblendet werden

Pseudoelement

Die Pseudoelementattribute des Miniprogramms sind in den CSS-Attributen des WeChat-Entwicklertools nicht sichtbar. Wenn also einige Komponentenstile nicht überschrieben werden können (z. B. der Rahmen von eine Schaltfläche oder einige Zeileneinstellungen), liegt daran, dass das Pseudoelement ::after festgelegt ist, sodass Pseudoelemente verwendet werden müssen, um

Seitenstapel

An abzudecken Die Anwendung kann nur 5 Seitenstapel gleichzeitig öffnen. Wenn 5 bereits geöffnet sind. Nach dem Öffnen der Seite (das aktuelle Limit liegt bei 10 Ebenen) können neue Seiten möglicherweise nicht normal geöffnet werden. wx.navigateTo jump behält die aktuelle Seite bei, wx.redirectTo jedoch nicht. Vermeiden Sie daher bitte mehrstufige Interaktionen und verwenden Sie die Sprungmethode entsprechend

Komponentisierung

Das Vorlagenmodul und die Komponentenkomponente sind Komponentenisierungsmethoden in kleinen Programmen. Der Unterschied zwischen den beiden besteht darin, dass das Vorlagenmodul hauptsächlich zur Anzeige dient und die Methoden auf der Seite mithilfe der Vorlage definiert werden müssen. Die Komponentenkomponente verfügt über eine eigene JS-Datei, und die gesamte Komponentenkomponente ähnelt einer Seite. Um es einfach auszudrücken: Es wird empfohlen, eine Vorlage zu verwenden. Es wird empfohlen, den Komponenten-Debug-Modus zu verwenden 🎜> 1. Quellcode des Entwicklertools unterbrechen Klicken Sie auf Debugging, console.log, um Daten zu drucken, und AppData, um Daten anzuzeigen

2. Achten Sie auf die aktuelle Basisbibliotheksversion des Miniprogramms, um einige Kompatibilitätsprobleme zu beheben und Fehlerprobleme

3. Das Miniprogramm befindet sich zunächst in der Entwicklungsversion. Oder öffnen Sie die Debugging-Anzeige vConsole in der oberen rechten Ecke der Testversion und wechseln Sie dann zur offiziellen Version, um den vConsole-Modus anzuzeigen

Datenübertragung

1. Datencache wx.setStorage verwenden Mit wx.getStorage können die gespeicherten Daten nur im String-Format vorliegen, daher müssen Sie im Allgemeinen JSON.stringfy verwenden Um das Objekt beim Einrichten in eine Zeichenfolge zu konvertieren und JSON.parse zu verwenden, um es beim Abrufen im Objekt wiederherzustellen

2 , springt wx.navigateTo zur Übergabe von Parametern und verbindet die Zeichenfolge anschließend Rufen Sie in der Funktion onLoad() die übergebenen Parameter über den Parameternamen auf. Beachten Sie, dass Sie bei Sonderzeichen (z. B. ?# usw.) encodeURIComponent und decodeURIComponent zum Kodieren und Dekodieren verwenden können. Andernfalls wird es abgeschnitten, was dazu führt, dass die Daten hinter den Sonderzeichen nicht übertragen werden können

3. Die Funktion getCurrentPages() wird verwendet, um die Instanz des aktuellen Seitenstapels abzurufen den Seitenstapel oder Seitenstapeldaten ändern

4. getApp() kann globale Objekte und Methoden abrufen

Anpassung der Ausrichtung der Navigationsleistenkapsel

Die Navigationsleiste ist im Allgemeinen anpassbar, was flexibler und kontrollierbarer ist. Zuerst müssen Sie navigationStyle: custom in app.json festlegen und dann das Miniprogramm wx.getMenuButtonBoundingClientRect() verwenden, um die Standortinformationen des zu erhalten Kapselmenü in der oberen rechten Ecke, aber diese Schnittstelle ist instabil. Bei einigen Modellen tritt ein Fehler auf, der nicht abgerufen werden kann. Verwenden Sie daher wx.getSystemInfo, um die Höhe der Statusleiste des Geräts (d. h. die Höhe des Mobiltelefons) abzurufen Zeit und Akku), Höhe der Titelleiste (d. h. einschließlich Navigations-Zurück-Taste, Titel und Kapselhöhe). Die Standardeinstellung ist 48 für Android und 44 für iOS (die Standardkapsel des Miniprogramms ist 48 Pixel in der Mitte des Titels). Da es viele Android-Kategorien gibt, beträgt die Gesamthöhe der Navigationsleiste 44 Pixel Titelleiste. Die Höhe von padding-top ist die Höhe der Statusleiste. Die Elemente in der Titelleiste werden vertikal ausgerichtet, damit sie in die Kapsel passen. Beim Festlegen der Inhaltshöhe können Sie calc (100vh) verwenden Der Stil wird im globalen app.wxss

unionid-Logo

platziert

Unionid ist die programmübergreifende Identifizierung von Miniprogrammbenutzern. Um eine Unionid zu erhalten, müssen Sie zunächst die offene WeChat-Plattform (offene WeChat-Plattform – Verwaltungsplattform – Miniprogramm – Miniprogramm binden) binden, da die Unionid verteilt ist Wenn das Miniprogramm an die offene WeChat-Plattform gebunden ist, gibt es keine Unionid. Wenn die Unionid verschiedener Miniprogramme unterschiedlich ist, muss das Miniprogramm für denselben Benutzer bereitgestellt werden , für verschiedene Anwendungen unter derselben offenen WeChat-Plattform sind die Unionids gleich

Der Hintergrund gibt die Unionid an das Frontend zurück: Zuerst ruft wx.login den Anmeldeinformationscode des Benutzers ab, dann prüft wx.getSetting, ob dies der Fall ist ist autorisiert, wx.getUserInfo ruft die Benutzerinformationen ab und sendet sie über das verschlüsselte Feld der Benutzerinformationen an den Hintergrund. Der WeChat-Server gibt im Gegenzug die Unionid zurück. Da die von der Anfrage zurückgegebenen Daten möglicherweise nach Page.onLoad zurückgegeben werden, a Normalerweise wird ein Rückruf hinzugefügt (das Abrufen der Unionid wird normalerweise in onLaunch von app.js platziert, daher ist ein Rückruf erforderlich, um es und die Daten der Seite zu verarbeiten onLoad. Get)

Schnittstellenanforderung

Es wird empfohlen, alle Anfragen in dieselbe api.js zu extrahieren, was spätere Änderungen und Fehlerbehebungen erleichtern kann. Das WeChat-Backend fordert tatsächlich unsere Backend-Adresse für die Backend-Zuordnung an Dem WeChat-Backend zugeordnet. Das WeChat-Backend erhält die von Ihrer wx.request aufgerufene URL und verwendet das Backend, um das Backend anzufordern. Es treten also keine domänenübergreifenden Probleme auf

Eingabetastatur

Erwägen Sie die Verwendung verschiedener Typen in verschiedenen Szenarien, z. B. einer Texttastatur und einer numerischen Tastatur, um die Benutzererfahrung zu verbessern

wux-weapp

Wir empfehlen wux- weapp als kleine Programmkomponente, mit umfangreichen Komponenten und flexibler Erweiterung

Empfohlenes Tutorial: „WeChat Mini Program“

Das obige ist der detaillierte Inhalt vonZusammenfassung der Wissenspunkte zu WeChat-Miniprogrammen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!