wechat mini program wiki
1.0.0
Chinas führende Messaging-App WeChat hat etwas ganz Radikales auf den Markt gebracht: Miniprogramme. Eingebettete Apps, die weder heruntergeladen noch installiert werden müssen. Öffnen, nutzen, teilen, fertig!
Es gibt eine große Debatte – und viele Clickbaits – darüber, wie praktisch diese Apps sind ... Tatsächlich steckt das den Entwicklern zur Verfügung gestellte Framework erst in den Kinderschuhen, ist noch begrenzt und ehrlich gesagt etwas frustrierend. Dennoch investiert Tencent beispiellose Ressourcen in die Einführung dieses Kanals, um Dynamik aufzubauen und den Vorreitern Möglichkeiten zu eröffnen. Wir glauben, dass diese Hacker schnelle Erfolge erzielen können, wenn sie es wagen, es auszuprobieren.
Haben Sie Ideen für Dienste, die Sie so schnell wie möglich in WeChat bereitstellen möchten? Sie verfügen über Grundkenntnisse in Javascript und möchten mit diesem Framework experimentieren? Haben Sie sich in der Google-Übersetzung des Dokuments verirrt? Brauchen Sie einen kleinen Schub, um zu entschlüsseln, was möglich ist oder nicht? Hallo und herzlich willkommen.
Es ist nicht einfach, sich im offiziellen Dokument zurechtzufinden. Tatsächlich sind viele Versuche, einige Recherchen zu Open-Source-Code und viele Annahmen erforderlich, um etwas zu erreichen. Du hast deinen Kopf gegen die Wand geschlagen. Wir verstehen es.
Unsere Mission ist es, kreative Unternehmer bei der Entwicklung großartiger Technologieprodukte zu unterstützen. Wir helfen Ihnen, die kleinen Schritte zu gehen.
Der folgende Inhalt ist keine Übersetzung der Dokumentation und wird mit Sicherheit schnell veraltet sein. Es ist einfach unser Beitrag, jedem den Einstieg zu erleichtern und schnell ein cooles WeChat-Miniprogramm aufzubauen. Mach es jetzt.
Arbeiten Sie an einem Miniprogramm? Kontaktieren Sie uns, wenn Sie Ihre Arbeit teilen, unser Team kennenlernen oder um Hilfe bitten möchten!
Wenn Sie einen Beitrag leisten möchten, können Sie hier eine Pull-Anfrage senden oder uns unter shanghai(at)lewagon.com anrufen, um Vorschläge zu erhalten!
Dieses Originalstück wurde von Le Wagon-Alumni geschrieben: Adrien Pelegri (Charge Nr. 30) mit Unterstützung von Thibault Genaitay (Fahrer China) und Stephane Delgado (Charge Nr. 61).
Der Registrierungsprozess ist wirklich schwierig, insbesondere wenn Sie keine Erfahrung mit der fantastischen chinesischen Verwaltungswelt haben. Der WeChat-Verifizierungsprozess wird langwierig sein. Bleiben Sie ruhig.
Von der Registrierung des WeChat-Miniprogramms bis zur Entwicklungsfreigabe müssen Sie grundsätzlich die folgenden Schritte ausführen:
Hier ist eine Liste der Materialien, die Sie benötigen, um ein Miniprogramm als Unternehmen zu registrieren:
Wir empfehlen Ihnen, diesem umfassenden englischen Handbuch zur Registrierung und Erstellung eines Miniprogrammprojekts zu folgen: Mittlerer Artikel oder lesen Sie diese offizielle WeChat-Dokumentation (letzte Aktualisierung: 08.02.2017).
Eine IDE (Integrated Development Environment) ist eine Reihe von Programmiertools zum Schreiben einer Anwendung. Es besteht aus einem Code-Editor, einem Compiler und einem Debugger, auf die über eine einzige grafische Benutzeroberfläche zugegriffen werden kann.
Laden Sie die WeChat-IDE hier herunter: Mac, Windows 64, Windows 32
Hier ist ein kurzes Tutorial, um die WeChat-IDE zu beherrschen und das Beste daraus zu machen.
Ein Code-Editor mit der Baumstruktur Ihrer Dateien auf der Seite und ein Simulator auf der linken Seite, der die Vorschau Ihrer App anzeigt. 
Hier ist eine vollständige Liste der Schaltflächen zum Ausführen von Aufgaben während der Entwicklung:
1. Profil: Klicken Sie darauf, um sich von der IDE abzumelden. 2. Codebearbeitung 3. Debuggen/Inspizieren: siehe unten. 4. Projektinformationen: siehe unten. 5. Compiler: Kann nützlich sein, um die App zu kompilieren, wenn die automatische Aktualisierung der Ansicht nicht funktioniert. 
6. Szenenwert 7. Cache 8. Herunterfahren: Beenden Sie das Projekt, an dem Sie gerade arbeiten, und wechseln Sie zu einem anderen. 9. Verstecken Sie den Simulator. 10. Geräte: Zeigt eine Liste von Geräten an, mit denen die Reaktionsfähigkeit des Miniprogramms getestet werden kann. 11. Sie können arbeiten an: WLAN, 4G, 3G, 2G. 12. Arboreszenz ausblenden 13. Dateien verwalten: Suchen, hinzufügen und löschen Sie einen Ordner oder eine Datei.
Debugger/Inspektor: Dieses Tool ist ein wichtiger Teil der IDE, es sieht aus wie die guten alten Chrome DevTools . 
1. Obere Leiste Netzwerk: In diesem Bereich werden Anforderungs- und Socket-Probleme oder die Seitenladeleistung behoben. Speicher: Ermöglicht den Zugriff auf alle Daten, die Sie in Ihrem Cache haben. AppData: dient zur Anzeige der aktuellen Projektdaten. Sie können die Daten direkt im Panel bearbeiten und in der Vorschau anzeigen. Wxml: Damit können Sie alle Elemente Ihrer Seite im Handumdrehen überprüfen und bearbeiten. Sensor: Sie können den Standort und die Leistung des Mobilgeräts simulieren, um die Schwerkraftmessung zu debuggen.
2. Quellenfenster Das Quellenfenster zeigt die aktuellen Projektskriptdateien an.
3. Konsole Die Konsole informiert Sie darüber, welche Fehler in Ihrem Code vorliegen, indem sie Diagnoseinformationen protokolliert und mit Javascript auf der Seite interagiert, z. B. mit Ihrem console.log(), das Sie platziert haben, und mehr.
Projektinformationen: Auf dieser Seite finden Sie die aktuellen Projektdetails wie Ihre AppID, Verzeichnisinformationen und mehr. Durch Klicken auf die Vorschau-Option können Sie das Miniprogramm nach dem Scannen eines QR-Codes direkt auf Ihrem Telefon testen.
Hinweis: Während Sie Ihr Miniprogramm auf Ihrem Telefon testen, können Sie das Debugger-Tool direkt auf Ihrem Gerät aktivieren.
In diesem Abschnitt werden die Struktur des von WeChat bereitgestellten „Schnellstarts“ (Boilerplate) und die Grundlagen vorgestellt, die Sie zur Einhaltung dieses Frameworks benötigen.
Laden Sie WeChat quickstart.zip herunter.
Schnellstart-Arboreszenz:
.
├── app.js
├── app.json
├── app.wxss
├── Seiten
│ ├── Index
│ │ ├── index.js
│ │ ├── index.json
│ │ ├── index.wxml
│ │ └── index.wxss
│ └── Protokolle
│ ├── logs.js
│ ├── logs.json
│ ├── logs.wxml
│ └── logs.wxss
└── Dienstprogramme
└── util.js
Auf der Indexseite dieses Boilerplates wird eine Begrüßungsseite mit den Informationen zum aktuellen Benutzerprofil angezeigt. Ein Klick auf Ihren Avatar führt zu einer neuen Seite, auf der Ihre aktuellen Miniprogrammprotokolle angezeigt werden.
WeChat-Miniprogramme beginnen mit „App“-Dateien (siehe Screenshot unten). Diese Dateien sind das Stammverzeichnis des Miniprogramms und somit der Eingang Ihres Miniprogramms. (Hier ist die offizielle WeChat-Dokumentation).
app.js ist der Skriptcode, die globale Logik Ihres Miniprogramms. Sie können die Lebenszyklusfunktionen Ihres MP einrichten und manipulieren, globale Variablen deklarieren oder eine API aufrufen.
Code snippet of the "app.js" file.
// app.js
App ( {
onLaunch : function ( ) {
// API call to get data from the local cache
var logs = wx . getStorageSync ( 'logs' ) || [ ]
logs . unshift ( Date . now ( ) )
wx . setStorageSync ( 'logs' , logs )
} ,
// Get user information
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Call login interface
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
// Global variable
globalData : {
userInfo : null
}
} )app.json ist die globale Konfiguration des gesamten Miniprogramms. Sie können den Pfad der MP-Seite (Miniprogramm) und den MP-Fensterstil konfigurieren, das Netzwerk-Timeout festlegen und die Debug-Konfiguration festlegen.
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/logs/logs"
] ,
"window" : {
"backgroundTextStyle" : "gray" ,
"navigationBarBackgroundColor" : "#fff" ,
"navigationBarTitleText" : "Hello World" ,
"navigationBarTextStyle" : "black"
}
}Hinweis: Kommentare sind in der Datei app.json nicht zulässig.
app.wxss ist das globale Stylesheet des Miniprogramms. Hier sollten Sie gemeinsame Stilregeln deklarieren.
Die beiden Seiten des WeChat-Schnellstarts sind:
Der Ordner „Seiten“ ist der Ort, an dem Sie Ihre Miniprogrammseiten haben oder erstellen. Jede von Ihnen erstellte Seite muss zwei Dateien enthalten:
Sie können auf jeder von Ihnen erstellten Seite zwei weitere Dateien hinzufügen:
.json- Datei für die Seitenkonfiguration.
.wxss- Datei für das Stylesheet Ihrer Schnittstelle.
Regel: Jede Seite Ihres Miniprogramms kann aus vier verschiedenen Dateierweiterungen bestehen (js; json; wxml; wxss), sollte aber denselben Namen haben.
Weitere Details: Eine neue Seite enthält immer eine .js- Datei und mindestens eine .wxml- Datei. Die Dateierweiterung .json wird nur für den Fall verwendet, dass Sie die Fensterkonfiguration auf dieser bestimmten Seite überschreiben möchten. Fügen Sie .wxss hinzu, wenn Sie Ihrer Seite ein Stylesheet hinzufügen möchten.
Sehen wir uns an, was auf den einzelnen Seiten des Schnellstartprojekts passiert.
Code snippet of the "index.js" file.
// index.js
// Get application instance
var app = getApp ( )
Page ( {
data : {
motto : 'Hello World' ,
userInfo : { }
} ,
// Event that redirect user to logs page
Tapped : function ( ) {
console . log ( "tapped" ) ;
wx . navigateTo ( {
url : '../logs/logs'
} )
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
// Call the application instance to get data
app . getUserInfo ( function ( userInfo ) {
// Updates userInfo data
that . setData ( {
userInfo : userInfo
} )
} )
}
} )Snippet-Kommentare:
Page() Funktion aufgerufen, um Benutzerinformationen zu sammeln.Page() Funktion und legt data: fest, um Daten dynamisch in die Ansicht zu binden.Tapped Funktion leitet den aktuellen Benutzer zu seiner Protokollseite weiter.onLoad ruft Benutzerinformationen ab und aktualisiert userinfo . Code snippet of the "logs.js" file.
// logs.js
var util = require ( '../../utils/util.js' )
Page ( {
data : {
logs : [ ]
} ,
onLoad : function ( ) {
console . log ( wx . getStorageSync ( 'logs' ) )
this . setData ( {
logs : ( wx . getStorageSync ( 'logs' ) || [ ] ) . map ( function ( log ) {
return util . formatTime ( new Date ( log ) )
} )
} )
}
} )Snippet-Kommentare:
formatTime aufzurufen.Page() -Funktion und legt data: .onLoad ruft aktuelle Benutzerprotokolle aus dem Cache wx.getStorageSync('logs') ab. Rendern Sie dann die Protokolle im formatTime , das durch die Anforderungen von util.js bereitgestellt wird. Code snippet of the "utils.js" file.
function formatTime ( date ) {
var year = date . getFullYear ( )
var month = date . getMonth ( ) + 1
var day = date . getDate ( )
var hour = date . getHours ( )
var minute = date . getMinutes ( )
var second = date . getSeconds ( )
return [ year , month , day ] . map ( formatNumber ) . join ( '/' ) + ' ' + [ hour , minute , second ] . map ( formatNumber ) . join ( ':' )
}
function formatNumber ( n ) {
n = n . toString ( )
return n [ 1 ] ? n : '0' + n
}
module . exports = {
formatTime : formatTime
}Notiz:
In Utils werden importierte Bibliotheken gespeichert, die Sie möglicherweise an anderer Stelle benötigen (in unserem Beispiel ist util.js in log.js erforderlich). Im obigen Codeausschnitt ist die formatTime Funktion in util.js definiert, um das Datum Ihrer Protokolle ordnungsgemäß anzuzeigen.
Bisher ist Ihnen aufgefallen, dass auf jeder Seite zwei Ebenen vorhanden sind:
Logische Ebene (.js): Verarbeiten Sie die Daten und senden Sie sie an die Ansichtsebene, während Sie von der Ansichtsebene ausgelöste Ereignisse empfangen.
Ansichtsebene (.wxml/.wxss): Zeigt die von der logischen Ebene verarbeiteten Daten in einer Ansicht an und sendet gleichzeitig die Ereignisse der Ansichtsebene an die logische Ebene.
Wir können den Lebenszyklus eines Miniprogramms in zwei Zyklen unterteilen: den Anwendungszyklus und den Seitenzyklus. Der App() Lebenszyklus ist der Start- und Endpunkt des Miniprogramms, während Page() Lebenszyklus aktiviert wird, wenn Benutzer das Miniprogramm durchsuchen.
App() Funktion wird zum Registrieren eines Miniprogramms verwendet. Als Parameter wird ein Objekt verwendet, das die Lebenszyklusfunktionen eines MP angibt.
Kommentare:
onLaunch -Funktion auslöst und den MP initialisiert.onShow -Funktion ausgelöst.onHide -Funktion wird ausgelöst, wenn der aktuelle Benutzer das Miniprogramm verlässt. Code snippet of the "App()" life cycle functions.
App ( {
onLaunch : function ( ) {
// Do something when launch.
} ,
onShow : function ( ) {
// Do something when show.
} ,
onHide : function ( ) {
// Do something when hide.
} ,
onError : function ( msg ) {
console . log ( msg )
} ,
globalData : 'I am global data'
} ) Das WeChat-Framework bietet eine globale Funktion namens getApp() die eine Instanz von App() ist.
Code snippet "getApp()" function.
// .js
var appInstance = getApp ( )
console . log ( appInstance . globalData ) // I am global data Die Funktion getApp() kann aus dem einfachen Grund nützlich sein, dass Sie die Funktion App() nicht innerhalb einer Funktion Page() definieren können. Um auf die App-Instanz zuzugreifen, müssen Sie die Funktion getApp() aufrufen.
Die Funktion Page() wird zum Registrieren einer Seite verwendet. Es akzeptiert ein Objekt als Parameter, das die Anfangsdaten für die Seite, Lebenszyklusfunktionen, Ereignishandler usw. angibt.
Kommentare:
onLoad auf.onShow -Funktion auf.onShow onReady auf, um die Ansicht zu rendern.onShow Funktion direkt eine Ansicht.onHide wird ausgelöst, wenn das Miniprogramm zu einer anderen Seite springt.onUnload wird aufgerufen, wenn Sie eine Seite mit wx.redirectTo() und wx.navigateBack() verlassen. Oder wenn die aktuelle Seite neu gestartet wird, wx.reLaunch . Code snippet of "Page()" life cycle functions.
Page ( {
data : {
text : "This is page data."
} ,
onLoad : function ( options ) {
// Do some initializations when page load.
} ,
onReady : function ( ) {
// Do something when page ready.
} ,
onShow : function ( ) {
// Do something when page show.
} ,
onHide : function ( ) {
// Do something when page hide.
} ,
onUnload : function ( ) {
// Do something when page close.
} ,
// Event handler
viewTap : function ( ) {
this . setData ( {
text : 'Set some data.'
} )
}
} )
Wenn der App() Lebenszyklus abgeschlossen ist, wird die Seite durch den ersten Aufruf von onLoad geladen und nur einmal aufgerufen.
Wenn das Miniprogramm vom Hintergrund (App-Lebenszyklus) in den Vordergrund (Seitenlebenszyklus) läuft, ruft es zunächst die onShow Funktion App() auf und ruft dann beim Wechsel in den Vordergrund die onShow Funktion Page() auf.
WeChat-Empfehlungen:
App() Funktion kann nicht wiederverwendet werden und sollte einmal in app.js registriert werden.onLaunch nicht auf, wenn die Seite getCurrentPages() noch nicht generiert wurde.getApp() können Sie eine Instanz von App() abrufen, Lebenszyklusfunktionen versuchen jedoch nicht, die App() -Funktionen aufzurufen. Die Einrichtung Ihres Miniprogramms ist einfach und so konzipiert, dass Sie bei Anpassungswünschen Zeit und Frust sparen.
WeChat unterteilt die app.json-Konfiguration in fünf Teile:
In diesem Teil werden wir dieses vollständige app.json-Setup -Beispiel aufschlüsseln .
Code snippet "app.json complete setup" example
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon" ,
] ,
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true
} ,
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
} Die Rolle pages in app.json besteht darin, alle Routen Ihres Miniprogramms zu definieren . Die Konfiguration dieses Elements ist obligatorisch und erfordert ein Array von Zeichenfolgen . Jeder Unterordner und jede Datei im übergeordneten Seitenordner entspricht einem Routing-Pfad .
Code snippet of the "app.json" file.
{
"pages" : [
"pages/index/index" ,
"pages/form/form" ,
"pages/wagon/wagon"
]
} Tipp: Jedes Mal, wenn Sie einen Routenpfad zu "pages" hinzufügen, erstellt die IDE automatisch den Ordner und die Dateien, die dem gerade erstellten Pfad entsprechen.
Das WeChat-Framework bringt mehrere Routing-Logiken mit:
Beschreibung des Routing-Modus:
Initialisierung: Sobald das Miniprogramm gestartet ist, wird die erste Seite durch die Funktionen onLoad und onShow geladen.
Eine neue Seite öffnen: Beim Öffnen einer neuen Seite wird die aktuelle Seite ausgeblendet und mit wx.navigateTo zu einer anderen gesprungen. Hinter den Kulissen wird die erste Seite durch den Aufruf der onHide -Funktion ausgeblendet und durch den Aufruf von onLoad und onShow über die andere Seite gesprungen. 
Seitenumleitung: Schließen Sie die aktuelle Seite durch Aufrufen von onUnload und springen Sie mit wx.redirectTo , das die Funktionen onLoad und onShow aufruft, zu einer Seite innerhalb der App.
Seitenrückgabe: onUnload der aktuellen Seite, Aufruf der Funktion onLoad und anschließende Anzeige der Zielseite durch Aufruf onShow .
Neuladen, wx.reLaunch : Alle Seiten schließen und die aktuelle Seite neu laden. * Funktioniert nicht auf bestimmten Android-Geräten.
Tabs wechseln, wx.switchTab : Springt von einer TabBar-Seite zu einer anderen und schließt oder verbirgt alle anderen Nicht-TabBar-Seiten mithilfe von onUnload, onHide und onShow . Entdecken Sie alle möglichen Szenarien für den Tab-Wechsel.
Tabs wechseln, Navigationseinschränkungen:
WeChat-Empfehlungen:
navigateTo redirectTo können nur eine Nicht-TabBar-Seite öffnen. - switchTab kann nur die tabBar-Seite öffnen und anzeigen. - reLaunch kann für jede Seite verwendet werden. getCurrentPages() : Diese Funktion wird verwendet, um die Instanz des aktuellen Seitenstapels abzurufen. Es wird als Array in der Seitenstapelreihenfolge angegeben. Das erste Element des Arrays ist die erste Seite und das letzte Element die aktuelle Seite.
tabBar ist, wie der Name schon sagt, das Element, das die obere oder untere Tab-Leiste konfiguriert. tabBar ist ein Array , das mindestens 2 und maximal 5 Tabs unterbringt.
Code snippet of the "app.json" file.
{
"tabBar" : {
"backgroundColor" : "#FFFFFE" ,
"borderStyle" : "#D3D3D3" ,
"selectedColor" : "#D03232" ,
"color" : "#131313" ,
"list" : [ {
"pagePath" : "pages/index/index" ,
"iconPath" : "image/form.png" ,
"selectedIconPath" : "image/form-hover.png" ,
"text" : "Form"
} , {
"pagePath" : "pages/wagon/wagon" ,
"iconPath" : "image/about.png" ,
"selectedIconPath" : "image/about-hover.png" ,
"text" : "About"
} ]
}
}Attributangabe:
Die Verwendung des tabBar list erfordert ein Objekt in jedem Element des Arrays.
Die Werte der List lauten wie folgt:
Beschreibung der TabBar-Attribute: 
WeChat-Empfehlungen:
tabBar -Position auf „oben“ festlegen, können keine Symbole angezeigt werden.tabBar beträgt 40 KB, 81 Pixel x 81 Pixel.Das Fensterelement wird verwendet, um den Titel des Miniprogramms und den allgemeinen Fensterstil festzulegen.
Code snippet of the "app.json" file.
"window" : {
"navigationBarBackgroundColor" : "#D03232" ,
"navigationBarTextStyle" : "white" ,
"navigationBarTitleText" : "Le Wagon" ,
"backgroundColor" : "#eeeeee" ,
"backgroundTextStyle" : "light" ,
"enablePullDownRefresh" : true ,
}Beschreibung der Fensterattribute:
| Attribut | Typ | Standardwert | Beschreibung |
|---|---|---|---|
| navigationBarBackgroundColor | HexColor | #000000 | Hintergrundfarbe der Navigationsleiste |
| navigationBarTextStyle | Zeichenfolge | white | Titelfarbe der Navigationsleiste: black oder white |
| navigationBarTitleText | Zeichenfolge | Titel der Navigationsleiste | |
| navigationStyle | Zeichenfolge | default | Navigationsleistenstil, default oder custom . Verwenden Sie custom um den Stil der Navigationsleiste anzupassen. |
| Hintergrundfarbe | HexColor | #ffffff | Hintergrundfarbe der Anwendung. Beispiel: Die Hintergrundfarbe, die Sie beim Ziehen zum Aktualisieren sehen, hat keinen Einfluss auf die Farbe der <page> -Elemente. |
| HintergrundTextStil | Zeichenfolge | dark | Ziehen Sie, um den Textstil dark oder light zu aktualisieren |
| HintergrundFarbeTop | Zeichenfolge | #ffffff | Hintergrundfarbe des oberen Teils des Fensters. Wird nur auf iOS unterstützt |
| backgroundColorBottom | Zeichenfolge | #ffffff | Hintergrundfarbe des unteren Teils des Fensters. Wird nur auf iOS unterstützt |
| enablePullDownRefresh | Boolescher Wert | false | Aktivieren oder deaktivieren Sie Pull, um die App-weit zu aktualisieren. |
| onReachBottomDistance | Nummer | 50 | Legen Sie den Abstand vom unteren Rand der Seite fest, bei dem der onReachBottom() -Rückruf ausgelöst werden soll. |
| Seitenausrichtung | Zeichenfolge | portrait | Stellen Sie die Unterstützung für die Bildschirmdrehung ein. Unterstützt auto , portrait und landscape . |
Die Standardausrichtung der Anwendung kann mithilfe von pageOrientation in window in der Konfigurationsdatei app.json konfiguriert werden. Dieses Attribut unterstützt drei Werte:
auto damit das Miniprogramm sowohl im Hochformat als auch im Querformat arbeiten kann.portrait ein, um zu erzwingen, dass das Miniprogramm nur im Hochformat angezeigt wirdlandscape ein, um zu erzwingen, dass das Miniprogramm nur im Querformat angezeigt wird "enablePullDownRefresh": true muss in der globalen app.json wie oben konfiguriert werden und Sie können dann onPullDownRefresh() auf Miniprogrammseiten aufrufen.
Code snippet of the "Enable pull down refresh in a page" file.
// .js
Page ( {
// Pull down the trigger event
onPullDownRefresh ( ) {
// Stop the dropdown refresh
wx . stopPullDownRefresh ( )
}
} ) WeChat bietet die Möglichkeit, den Titel der oberen Navigationsleiste innerhalb jeder Seite zu ändern.
Code snippet of the "change navbar title" file.
// .js
Page ( {
// Loading spinner when page loads
onload : function ( ) {
wx . showNavigationBarLoading ( )
} ,
// Change navigation bar title
onShow : function ( ) {
wx . setNavigationBarTitle ( {
title : 'My new navabar title' ,
success : function ( res ) {
console . log ( res )
}
} )
}
} )Ein Netzwerk-Timeout kann in einer Vielzahl von Netzwerkanforderungen bereitgestellt werden. Hier ist der Link zur WeChat-Dokumentation, wenn Sie weiter gehen möchten.
Hier ist ein Link zur WeChat-Dokumentation.
WXML ist eine WeChat-Markup-Sprache ähnlich wie HTML. Es kombiniert eine grundlegende Komponentenbibliothek und ein Ereignissystem, um dynamische Seiten zu erstellen.
Das WeChat-Ereignissystem verhält sich wie klassische Javascript-Ereignisse, die logische Antworten auf die Ansichtsebene verarbeiten.
Die folgende Tabelle listet die wesentlichen Unterschiede auf, denen Sie bei der Entwicklung zwischen WXML und HTML begegnen werden:
Weitere Erläuterungen zu <block> :
<block> ist keine Komponente , sondern nur ein Verpackungselement . Es führt keine Darstellung auf der Seite durch und akzeptiert nur Steuereigenschaften .
Hinweis: Alle Komponenten und Attribute werden in Kleinbuchstaben geschrieben.
Das Mini-Programm-Framework erlaubt Entwicklern nicht, das DOM zur Steuerung Ihrer WXML-Elemente zu verwenden. Stattdessen aktualisieren Sie Ihre Ansichtsebene (.wxml-Datei) über die Datenbindungsmethode:
Um die WeChat-Anforderungen zu erfüllen, muss das data im JSON-Format innerhalb Page() Funktion initialisiert werden. Die Datenbindungstechnik ermöglicht die dynamische Aktualisierung von Daten innerhalb der Ansichtsebene.
Eine gute Vorgehensweise besteht darin, data oben in der Page() Funktion zu initialisieren.
Code snippet "data binding" example.
<!-- .wxml -->
< view > {{text}} </ view >
< view > {{array[0].msg}} </ view > // .js
Page ( {
data : {
text : 'init data' ,
array : [ { msg : '1' } , { msg : '2' } ]
}
} Die dynamischen data: die an die Ansichtsebene übergeben werden, werden aus den Datenattributen in der entsprechenden Page() Funktion übernommen.
Datenbindungssyntax: Die Datenbindung verwendet die Mustache-Syntax (doppelte geschweifte Klammern) zum Umschließen von Variablen. Bei dieser Syntax handelt es sich um eine logiklose Template-Engine-Analyse. Kurz gesagt, es ist sehr praktisch und einfach zu bedienen!
WeChat bietet viele Möglichkeiten hinsichtlich der Datenbindungsnutzung. Sie haben die Möglichkeit, Datenbindungen für Komponentenattribute, Eigenschaften, Zeichenfolgenoperationen, arithmetische Operationen, Datenpfade und Arrays zu verwenden.
Die wx:for -Steuereigenschaft bindet ein Array aus Ihrer logischen Ebene (.js-Datei), durchläuft es und weist die Daten zu.
Code snippet "wx:for" example.
<!-- .wxml -->
< view wx:for =" {{array}} " >
{{index}}: {{item.message}}
</ view > // .js
Page ( {
data : {
array : [ {
message : 'foo'
} , {
message : 'bar'
} ]
}
} ) Ähnlich wie bei <view wx:for> können Sie <block wx:for> verwenden, um einen Block mit mehreren Zeilen darzustellen. (Siehe Block in der WXML-Tabelle oben).
Code snippet "block wx:for" example.
<!-- .wxml -->
< block wx:for =" {{array}} " wx:for-item =" array-item " wx:key =" key " >
< view class =" card " >
< view class =" card-description " >
</ view >
</ view >
</ block >Weitere Details zum obigen Code finden Sie in diesem Github-Repository.
Weitere Ressourcen:
Ähnlich wie wx:for wird wx:if verwendet, um eine bedingte Anweisung zu definieren und zu bestimmen, ob der Block gerendert werden soll oder nicht.
Code snippet "wx:if" example.
<!-- .wxml -->
<!-- Add additional conditions wx:elif ; wx:else -->
< view wx:if =" {{length > 5}} " > 1 </ view >
< view wx:elif =" {{length > 2}} " > 2 </ view >
< view wx:else > 3 </ view > // .js
Page ( {
data : {
length : 10
}
} ) Wenn Sie mehr als ein Tag in Ihrem bedingten Anweisungsblock anzeigen möchten, können Sie <block wx:if> verwenden.
<!-- .wxml -->
< block wx:if =" {{true}} " >
< view > view1 </ view >
< view > view2 </ view >
</ block > Weitere Informationen finden Sie in wx:if WeChat-Dokumentation.
Mithilfe von Vorlagen können Sie Codeausschnitte definieren, die Sie mehrmals in verschiedenen Dateien Ihres Miniprogramms wiederverwenden möchten.
Das WXML-Vorlagenelement verfügt über einen eigenen Bereich und kann nur Daten zur Übergabe verwenden.
Um eine Vorlage zu deklarieren, müssen Sie zunächst ihren Namen definieren.
Code snippet "template" example.
<!-- .wxml -->
< template name =" msgItem " >
< view >
< text > {{index}}: {{msg}} </ text >
< text > Time: {{time}} </ text >
</ view >
</ template >
<!-- Call the template -->
< template is =" msgItem " data =" {{item}} " /> Wenn Sie später eine Vorlage innerhalb derselben Datei aufrufen möchten, verwenden Sie das Attribut is und den Vorlagennamen als Wert, um die erforderliche Vorlage zu deklarieren. Und vergessen Sie nicht, Daten mithilfe des data an die Vorlage zu übergeben.
// .js
Page ( {
data : {
item : {
index : 0 ,
msg : 'this is a template' ,
time : '2017-05-18'
}
}
} ) Um eine bereits in einer neuen Datei definierte Vorlage zu deklarieren, müssen Sie sie zunächst importieren.
Code snippet "define a template in a specific file" exemple
<!-- item.wxml -->
< template name =" item " >
< text > {{text}} </ text >
</ template > Code snippet "import and call the template in index.wxml" exemple
<!-- index.wxml -->
< import src =" item.wxml " />
< template is =" item " data =" {{text: 'forbar'}} " />Weitere Details zur WeChat-Dokumentation finden Sie hier.
Zusätzlich zu Dateninitialisierungs- und Lebenszyklusfunktionen ermöglicht das Framework die Definition von Ereignisbehandlungsfunktionen.
Das WXML-Element (Ereignishandler) löst das Ereignis aus und die logische Ebene bindet den Ereignishandler, um ein Ereignisobjekt als Parameter zu empfangen.
Code snippet "event handler" example.
<!-- .wxml -->
< button type =" primary " bindtap =" add " > Incrementation: {{count}} </ button > // .js
Page ( {
data : {
count : 1
} ,
add : function ( e ) {
this . setData ( {
count : this . data . count + 1
} )
}
} ) setData() : Diese Funktion aktualisiert Daten innerhalb der logischen Ebene, die als nächstes an die Ansichtsebene gesendet werden. Die Funktion setData() empfängt ein Objekt als Parameter und aktualisiert den Schlüsselwert, indem sie this.data als Datenpfad verwendet.
Es gibt viele Arten von Bindungsereignissen. Die meisten Komponenten haben ihre eigene Definition von Bindungsereignissen.
Komponentenbindungsereignisse:
bindsubmit für ein Formular.bindinput für eine Eingabe.bindscroll für eine Scroll-Ansicht. Code snippet "form binding event" example.
<!-- form.wxml -->
< form bindsubmit =" bindFormSubmit " >
<!-- Form inputs -->
< button type =" primary " form-type =" submit " > Submit </ button >
</ form > // form.js
// Form submission function
Page ( {
bindFormSubmit : function ( e ) {
// Treatment
}
} )Klassische Bindungsveranstaltungen:
bind+event_typecatch+event_type Code snippet "data binding illustration" example.
< button bindtap =" ontap " type =" primary " > Tap < button /> Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
}
} ) Die beiden häufigsten verwendeten Bindungsereignisse sind bind+event_type und catch+event_type . Das Catch-Ereignis verhindert Blasenereignisse.
Bubbling-Event-Konzept: Für Nicht-Javascript-Leute kann ein Bubbling-Ereignis definiert werden, wenn ein Ereignis in einem Element auftritt, das in einem anderen Element verschachtelt ist. Sowohl der übergeordnete Knoten als auch die verschachtelten Elemente werden als Ereignishandler für dieses bestimmte Ereignis registriert . Der übergeordnete Knoten des verschachtelten Elements sollte catch+event_type verwenden, um zu verhindern, dass das Ereignis an Vorgängerelemente weitergegeben wird.
Code snippet "counteract bubbling effect with catchtap" example.
<!-- .wxml -->
< view id =" outter " bindtap =" handleTap1 " >
outer view
< view id =" middle " catchtap =" handleTap2 " >
middle view
< view id =" inner " bindtap =" handleTap3 " >
inner view
</ view >
</ view >
</ view > // .js
Page ( {
handleTap1 : function ( e ) {
console . log ( 'outter' )
} ,
handleTap3 : function ( e ) {
console . log ( 'inner' )
} ,
handleTap2 : function ( e ) {
console . log ( 'middle' )
}
} )Wird hauptsächlich verwendet, wenn Sie Elemente verschachteln und den übergeordneten Knoten des von Ihnen gebundenen Elements nicht anzeigen möchten.
Code snippet "tap and longtap event binding" example.
<!-- index.wxml -->
< button bindtap =" ontap " type =" primary " > Tap < button />
< button bindlongtap =" onlongtap " type =" primary " > Long tap < button /> // index.js
Page ( {
ontap : function ( ) {
console . log ( 'tap' ) ;
} ,
onlongtap : function ( ) {
console . log ( 'longtap' ) ;
}
} )Hier finden Sie praktische Tipps, um das Teilen von Miniprogrammen zu ermöglichen. WeChat eröffnet zwei Möglichkeiten, ein Miniprogramm zu teilen:
Möglichkeit , die Weiterleitungsschaltfläche im Dropdown-Menü zu aktivieren, das durch Klicken auf die obere rechte Ecke ... der Seite angezeigt wird.
Erstellen Sie auf der Seite Ihres Miniprogramms eine Weiterleitungsschaltfläche . Dadurch wird der Freigabevorgang benutzerfreundlicher.
In beiden Varianten leitet das Framework automatisch eine Miniprogrammkarte mit einem Screenshot Ihres MP-Headers weiter.
Um diese Schaltfläche zu aktivieren, müssen wir eine Page() Funktion namens onShareAppMessage verwenden.
Code snippet "Enable the forward button of the drop-down menu" example.
// index.js
onShareAppMessage : function ( ) {
return {
title : 'Le Wagon coding school' ,
path : 'pages/index/index'
}
} ,In dieser Funktion müssen Sie einen Titel definieren , der oben auf der Weiterleitungskarte angezeigt wird, sowie den aktuellen Seitenpfad . Wenn Sie vergessen, einen Titel hinzuzufügen, fügt WeChat standardmäßig einen hinzu (den Namen Ihres Miniprogramms).
Einschränkung: Das einzige, was Sie in diesem Fall definieren können, ist das Ereignis onShareAppMessage . Die Weiterleitungsschaltfläche wird vom Framework selbst erstellt .
Mit dieser Funktion können Entwickler eine bestimmte Weiterleitungsschaltfläche innerhalb der Seite erstellen, indem sie die Schaltflächeneigenschaft open-type und ihren Wert 'share' verwenden.
Code snippet "Create a forward button within the page" example.
<!-- about.wxml -->
< view bindtap =" onShareAppMessage " >
< button class =" share-btn " open-type =" share " type =" primary " > Share </ button >
</ view > Im Gegensatz zum ersten Fall müssen wir den Ereignishandler erstellen , der die Funktion onShareAppMessage auslöst. Diese Funktion ruft wx.showShareMenu auf und übergibt withShareTicket als Parameter.
// about.js
Page ( {
onShareAppMessage : function ( ) {
console . log ( 'share' )
wx . showShareMenu ( {
withShareTicket : true
} )
}
} ) Hinweis: Beide Varianten verwenden eine Page() Funktion, was bedeutet, dass Sie die spezifische Seite teilen, auf der Sie die Funktion deklarieren.
WeChat zielt darauf ab, eine freundliche , effiziente und konsistente Benutzererfahrung zu schaffen. Um dies zu ermöglichen, stellt das offizielle WeChat-Designteam ein WeUI-Repository bereit. Diese grundlegende Front-End-Bibliothek (WeUI) steht im Einklang mit der nativen visuellen Erfahrung von WeChat. WeUI kann als WeChat-Front-End-Bibliothek verstanden werden, ähnlich wie Bootstrap . Es enthält eine Vielzahl von Komponenten wie Schaltflächen, Zellen, Dialoge, Fortschritt, Toast, Artikel, Aktionsblatt, Symbole und mehr.
Nützliche Github-Repositories:
Laden Sie das WeUI- Repository lokal über npm herunter:
npm install weui-wxss
Der heruntergeladene Code enthält WeUI-Quellcode und ein auf WeUI basierendes Miniprogrammbeispiel.
Öffnen wir das Beispiel eines WeUI-Miniprogramms in der WeChat-IDE:
Importieren Sie den WeUI- Stil in Ihre app.wxss, um die Verwendung des WeUI-Stils in Ihrem Miniprogramm zu ermöglichen:
@import "style/weui.wxss" ;
Weitere Einzelheiten zu den WeChat-Designrichtlinien finden Sie hier in der vollständigen Dokumentation.
WXSS verfügt über fast alle Funktionen von CSS. Das in app.wxss definierte Stylesheet sind die allgemeinen Stilregeln, die auf jeder Seite identifiziert werden. Das auf einer bestimmten Seite definierte Stylesheet ist ein lokaler Stil, der nur auf der aktuellen Seite wirkt und daher dieselben Selektoren überschreibt, die in app.wxss verwendet werden. WXSS weist im Vergleich zu CSS zwei wesentliche Unterschiede auf:
WXSS verwendet rpx (responsive Pixel) als Einheit. Es ermöglicht die Anpassung der Pixel an die Breite des Bildschirms. Sie können weiterhin die klassische px Einheit verwenden (aber nicht die WeChat-Methode). (1rpx = 0.5px ; 1px = 2rpx)
Um ausgehende Stylesheets zu importieren, verwenden Sie @import Anweisung, gefolgt vom relativen Pfad und einem ; am Ende der Aussage.
Code snippet "@import" example.
/* app.wxss*/
@import "outbound.wxss" ;Das WeChat-Framework kann viele Standard -CSS- Selektoren, wie z. B. kaskadierende Selektoren, nicht unterstützen.
Unterstützte Selektoren:
WeChat-Empfehlung:
Das WeChat-Framework bietet Entwicklern einen großen Satz grundlegender Komponenten. Die vollständige Liste der Komponenten finden Sie hier.
<navigator> ist Ihr Anker in HTML. Es wird verwendet, um von einer Seite zur anderen zu verlinken. Das wichtigste Attribut des Navigatorelements ist open-type .
Code snippet "navigator" example.
<!-- .wxml -->
< view class =" btn-area " >
< navigator url =" /pages/index/index " hover-class =" navigator-hover " > text </ navigator >
< navigator url =" /pages/form/form " open-type =" redirect " hover-class =" other-navigator-hover " > text </ navigator >
< navigator url =" /pages/index/index " open-type =" switchTab " hover-class =" other-navigator-hover " > tab switching </ navigator >
</ view >Beschreibung der Navigatorattribute:
Beschreibung der offenen Typwerte:
Die Picker-Komponente in der WeChat-Dokumentation ist in drei Selektoren unterteilt: den klassischen Selektor , der standardmäßig verwendet wird, den Zeitselektor und den Datumsselektor .
Der folgende Anwendungsfall basiert auf einer Datumsauswahl, die Logik bleibt jedoch für eine andere Auswahl dieselbe.
Code snippet "date picker" example.
<!-- .wxml -->
< picker mode =" date " value =" {{date}} " start =" 2015-09-01 " end =" 2020-09-01 " bindchange =" bindDateChange " >
< view class =" picker " >
Now the date is {{date}}
</ view >
</ picker > // .js
Page ( {
data : {
date : '2017-05-20'
} ,
bindDateChange : function ( e ) {
this . setData ( {
date : e . detail . value
} )
}
} )Attribute der Datumsauswahl:
Ein Schalter ist ein visueller Schalter mit zwei Zuständen: Ein und Aus.
Code snippet "switch" example.
<!-- .wxml -->
< view class =" body-view " >
< switch checked bindchange =" switch1Change " />
< switch bindchange =" switch2Change " />
</ view > // .js
Page ( {
switch1Change : function ( e ) {
console . log ( 'switch1 a change event occurs with the value' , e . detail . value )
} ,
switch2Change : function ( e ) {
console . log ( 'switch2 a change event occurs with the value' , e . detail . value )
}
} )Schalterattribute:
Ein Toast ist ein nichtmodales Element, das zur Anzeige kurzer und automatisch ablaufender Komponenten zur Information der Benutzer verwendet wird.
Im folgenden Codeausschnitt fälschen wir eine Formularübermittlung, um zu zeigen, wie ein Toast funktioniert und angezeigt wird.
Code snippet "spinner btn and toast" example.
<!-- .wxml -->
< form bindsubmit =" bindFormSubmit " >
< button type =" primary " form-type =" submit " loading =" {{loading}} " > Send </ button >
</ form >Im obigen Codeausschnitt haben wir eine dynamische Schaltfläche zum Absenden eines Formulars erstellt. Wenn Sie darauf klicken, wird die Schaltfläche durch einen Lade-Spinner animiert.
Anschließend zeigen wir mithilfe wx.showToast API einen Toast an, um die Benutzer zu informieren.
Page ( {
data : {
loading : false
} ,
bindFormSubmit : function ( e ) {
// Enable loading animation on send btn
this . setData ( {
loading : ! this . data . loading
} )
// Loading toast
wx . showToast ( {
title : 'Sending...' ,
icon : 'loading' ,
duration : 1500
} )
}
} )Eine modale Box ermöglicht es , ein kleines Element über eine Seite zu legen . Der Hauptvorteil modaler Boxen besteht darin, dass sie die Verwendung herkömmlicher Fenster-Popups oder das Neuladen von Seiten überflüssig machen.
Es gibt fünf Situationskategorien, in denen Modalboxen häufig verwendet werden:
Code snippet "modal to inform" example.
wx . showModal ( {
title : 'Modal title' ,
content : 'Modal content ' ,
confirmText : "Ok" ,
showCancel : false ,
success : function ( res ) {
console . log ( 'success' )
}
} )Modale Parameter:
Die map ist eine native Komponente, sie verfügt über eine lange Liste von Attributen, wir werden die wichtigsten durchgehen. Hier ist der Link zur WeChat-Dokumentation für weitere Details.
map :
Code snippet "map component" example.
< map id =" map " longitude =" 113.324520 " latitude =" 23.099994 " scale =" 14 " controls =" {{controls}} " bindcontroltap =" controltap " markers =" {{markers}} " bindmarkertap =" markertap " polyline =" {{polyline}} " bindregionchange =" regionchange " show-location style =" width: 100%; height: 300px; " > </ map >Sehen Sie sich den Teil „Standortbasierte Dienste“ im Wiki an, wenn Sie einen Blick auf die standortbasierten Dienste werfen möchten, die WeChat über die API anbietet.
WeChat-Empfehlungen:
wx.getLocation muss als type gcj02 angeben In diesem Abschnitt werden die verschiedenen Schritte erläutert, die Sie ausführen müssen, wenn Sie Ihre App-Daten beibehalten und Daten in einer Datenbank abrufen möchten. Wir haben Leancloud.cn aufgrund der einfachen Installation für Anfänger ausgewählt.
Zuerst etwas Kontext: Das folgende Beispiel basiert auf einem Miniprogramm, das darauf abzielt, Feedback über ein einfaches Formular zu sammeln. Dieses Miniprogramm speichert die auf Leancloud.cn gesammelten Daten. Wir erklären Ihnen, wie Sie in der Datenbank gespeicherte Daten abrufen und anzeigen. Zur Veranschaulichung dieses zweiten Abschnitts (Daten abrufen) haben wir eine neue Seite erstellt, die alle auf Leancloud gespeicherten Bewertungen anzeigt.
Hier ist das Github-Repository des Projekts, das zur Erstellung dieses Tutorials verwendet wurde.
Spezifikationen:
Code snippet "create a form" example.
<!-- pages/form/form.wxml -->
< form bindsubmit =" bindFormSubmit " >
< view > About the workshop </ view >
< view > Generally how was this workshop? </ view >
< text > Hints: takeaway, speed, time, location, people... </ text >
< view >
< textarea name =" review " maxlength =" -1 " />
</ view >
<!-- Refer to the Github repository above if you want the complete form -->
< button type =" primary " form-type =" submit " > Send </ button >
</ form >Wenn die Struktur des Formulars wie oben erstellt wurde, müssen wir als Nächstes das Ereignis erstellen , das durch die Formularübermittlung ausgelöst wird.
//pages/form/form.js
Page ( {
data : {
loading : false ,
} ,
// Form Submission
bindFormSubmit : function ( e ) {
// Local storage
var review = e . detail . value . review
// ...
}
} ) Lokale Speicherung: In der bindFormSubmit -Funktion haben wir Benutzereingaben lokalen Variablen zugewiesen, um zu testen, ob wir Benutzereingaben des Formulars lokal erfassen können.
Bevor wir mit der Installation beginnen, sollten Sie, wenn Sie sich in der Entwicklung befinden, Ihren Domainnamen auf die Whitelist setzen, indem Sie das letzte Kontrollkästchen der Projektschnittstelle in Ihrer WeChat-IDE aktivieren. Für spezielle Debugging-Anforderungen können Sie diesem Leancloud-Tutorial folgen.
Um mit der Einrichtung von Leancloud zu beginnen, erstellen Sie zunächst ein Konto bei Leancloud.
Nachdem Sie nun für die Installation und Initialisierung von Leancloud in Ihrem Miniprogramm bereit sind, können Sie der Dokumentation folgen, die Sie durch einen zweistufigen Prozess führt:
appId und appKey in Ihrer app.js. // app.js
// Require Leancloud library (the av-weapp-min.js file you just add).
const AV = require ( './utils/av-weapp-min.js' ) ;
// Initialization of the app
AV . init ( {
appId : 't6hUVJfOwjHuWXuD9OE06rxxxxxxxxxxxx' ,
appKey : 'HndT17mJ7wAIxsv8uxxxxxxxxxx' ,
} ) ;Wenn Sie nicht weiterkommen, schauen Sie im Github-Repository des Projekts nach.
Erstellen Sie zunächst einen neuen Ordner mit dem Namen „model“ und fügen Sie diesem Ordner eine form.js Datei hinzu. Benennen Sie Ihre Datei entsprechend der Art des Objekts, das Sie beibehalten möchten, in diesem Fall ein Formular. Dieser Schritt ist nicht erforderlich, ermöglicht aber die Organisation Ihrer Dateien.
Lassen Sie uns das Objekt erstellen: In der Datei form.js , die Sie gerade erstellt haben, erfordern Sie av-weapp-min.js, das Sie in util.js installiert haben, und weisen es einer AV Konstante zu. Instanziieren Sie dann das Form Objekt.
Code snippet "require Leancloud and create an object" example.
// model/form.js
const AV = require ( '../utils/av-weapp-min.js' ) ;
class Form extends AV . Object {
}
// Register object
AV . Object . register ( Form , 'Form' ) ;
// Export object
module . exports = Form ; Nachdem Sie nun das Form instanziiert haben, erstellen Sie das Formularobjekt, um Daten in der logischen Ebene (hier form.js) zu kapseln und den Benutzer nach der Formularübermittlung umzuleiten.
Code snippet "bindFormSubmit function" example.
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const form = require ( '../../model/form.js' ) ;
// pages/form/form.js
bindFormSubmit: function ( e ) {
// Local storage
console . log ( e )
var review = e . detail . value . review
// ...
// Leancloud permissions
var acl = new AV . ACL ( ) ;
acl . setPublicReadAccess ( true ) ;
acl . setPublicWriteAccess ( true ) ;
// Leancloud storage
setTimeout ( function ( ) {
new Form ( {
review : review
// ...
} ) . setACL ( acl ) . save ( ) . catch ( console . error ) ;
// Redirect user
wx . reLaunch ( {
url : '/pages/wagon/wagon?form=1'
} ) ;
} , 2000 ) ;
}
} )Nachbesprechung des Codeausschnitts:
binFormSubmit -Funktion haben wir Berechtigungen hinzugefügt, mit denen LeanCloud das von uns erstellte Objekt lesen und schreiben kann.setTimeout definiert, der Daten im neuen Formularobjekt zusammenfasst Form Benutzer beim Einreichen des Formulars umleiten . HINWEIS: setACL(acl) ist eine integrierte Eigenschaft in LeanCloud.
Bisher wird alles in Ihrem Miniprogramm getan. Es bleibt noch eine Projektion der in Ihrem Leancloud-Dashboard gesammelten Daten.
Form in diesem Exemples.Testen Sie es , um sicherzustellen, dass die gesammelten Daten in Ihrem LeanCloud -Dashboard bestehen bleiben.
Lassen Sie mich zunächst den Hintergrund dieses Abschnitts erinnern. Wir möchten auf einer neuen Seite auf der Liste der Bewertungen, die wir auf LeanCloud gesammelt und angehalten haben, anzeigen. Ich gehe davon aus, dass Sie den ersten Abschnitt des Tutorials befolgt haben (wenn Sie es oben verpasst haben).
Spezifikationen:
review .Erstellen wir also eine neue Überprüfungsseite und eine Schaltfläche, die die Seite zur Überprüfung umleitet . ( Tipp: Fügen Sie einfach den Routenpfad zu Ihrem App.json hinzu, das Framework erstellt den neuen Seitenordner und die Dateien selbst).
<!-- index.wxml -->
<!-- CTA redirects to review page -->
< view class =" cta-margin " >
< navigator url =" /pages/review/review " class =" btn-index " > Reviews </ navigator >
</ view >Der nächste Schritt besteht darin , Daten auf LeanCloud abzurufen und anzuzeigen .
Code snippet "fetch data stored on Leancloud and displays it" example.
<!-- review.wxml -->
< block wx:for =" {{forms}} " wx:for-item =" form " wx:key =" objectId " >
< text data-id =" {{form.objectId}} " >
{{form.review}}
</ text >
< text >
- {{form.name}}
</ text >
</ block > Oben haben wir einen List -Rendering -Block mit wx:for diese Anzeige jede Bewertung und den Namen der Person, die die Bewertung erstellt.
// pages/review/review.js
// Require leancloud and object
const AV = require ( '../../utils/av-weapp-min.js' ) ;
const Form = require ( '../../model/form.js' ) ;
// Fetch data from Leancloud
Page ( {
data : {
forms : { }
} ,
onReady : function ( ) {
new AV . Query ( 'Form' )
. descending ( 'createdAt' )
. find ( )
. then ( forms => this . setData ( { forms } ) )
. catch ( console . error ) ;
} ,
} )Code -Snippet -Nachbesprechung:
AV -Objekt durch, das die gespeicherten Daten enthält.forms einzurichten.In diesem Anwendungsfall haben wir gerade gesehen, wie wir Daten speichern, die wir lokal in LeanCloud sammeln und wie Daten, die von LeanCloud gespeichert sind, abrufen .
Wir empfehlen Ihnen, die Dokumentation von LeanCloud zu lesen oder das von LeanTodo Mini-Program von LeanCloud, Github Repository erstellte.
Wenn Sie in der Produktion sind, müssen Sie den Domänennamen in der WeChat -Plattform konfigurieren . Folgen Sie diesem LeanCloud -Tutorial.
Alle Benutzerinformationen, auf die Sie über wx.getUserInfo zugreifen :
wx . getUserInfo ( {
success : function ( res ) {
var userInfo = res . userInfo
var nickName = userInfo . nickName
var avatarUrl = userInfo . avatarUrl
var gender = userInfo . gender //sex => 0: unknown ; 1: male ; 2：female
var province = userInfo . province
var city = userInfo . city
var country = userInfo . country
}
} ) WeChat "QuickStart" (WeChat -Boilerplate) bietet Ihnen eine getUserInfo -Funktion in der Datei App.js. Wie der Name schon sagt, soll diese Funktion Benutzerinformationen erhalten . Lassen Sie uns diese Funktion Schritt für Schritt durchlaufen.
Allgemeine Beschreibung:
getUserInfo -Funktion hat einen Parameter CB , der ebenfalls eine Funktion ist.If -Block der getUserInfo -Funktion wird übergeben, wenn userInfo von globalData nicht null ist.userInfo null, getUserInfo -Funktion ruft die Anmeldeschnittstelle auf. // app.js
App ( {
getUserInfo : function ( cb ) {
var that = this
if ( this . globalData . userInfo ) {
typeof cb == "function" && cb ( this . globalData . userInfo )
} else {
// Login interface call
wx . login ( {
success : function ( ) {
wx . getUserInfo ( {
success : function ( res ) {
that . globalData . userInfo = res . userInfo
typeof cb == "function" && cb ( that . globalData . userInfo )
}
} )
}
} )
}
} ,
globalData : {
userInfo : null
}
} ) Erster Fall, userInfo Form globalData ist nicht null
Die userInfo -Statement -Anweisung zielt darauf ab, festzustellen, ob das CB -Argument über getUserInfo ein Funktionstyp ist.
Wie finden sie heraus, ob CB -Parameter eine Funktion ist?
// index.js
var app = getApp ( )
Page ( {
data : {
userInfo : { } ,
} ,
onLoad : function ( ) {
console . log ( 'onLoad' )
var that = this
app . getUserInfo ( function ( userInfo ) {
that . setData ( {
userInfo : userInfo
} )
} )
}
} Lassen Sie uns diese onLoad -Funktion von index.js durchlaufen
onLoad -Funktion ruft getUserInfo -Funktion in der App -Instanz auf.userInfo auf aktuelle Benutzerinformationen aktualisieren.userInfo übergeben, die in der App.js -Datei an globalData aktualisiert wurden.Zweiter Fall, UserInfo ist null
userInfo null getUserInfo -Funktion ist, gibt die Anweisung des else Rückrufs die Anmeldeschnittstelle zurück.getUserInfo der aktuelle Benutzer erfolgreich if . Wenn sich der aktuelle Benutzer bereits angemeldet hat, werden Benutzerinformationen über globalData -Seite zugewiesen , auf der onLaod -Funktion aufgerufen wird. Und dann wird die gleiche Logik angewendet.
Wechat-Miniprogramme haben einen Mechanismus des Cache in ihrer API. Tatsächlich verfügt jedes Miniprogramm über einen eigenen lokalen Cache-Speicher.
Erinnerung: Der Cache -Speicher wird verwendet, um Daten zu speichern, auf die wir schnell zugreifen möchten. Es verkürzt die Wartezeit des Benutzers , da die Anfrage aus dem lokalen Cache erfüllt ist, der näher an den Clients im Vergleich zum ursprünglichen Server ist, der zur Anforderung Ihres DB verwendet wird.
Der Cache -Speicher bietet zwei Arten von Methoden zum Speichern von Daten im Cache:
wx.setStorage : wx . setStorage ( { key : 'name' , data : 'Thibault' } ) ; wx.setStorage Build -Parameter als JSON, ein Schlüssel zum Angeben des gespeicherten Schlüssels und der Daten, um den zu speichernden Schlüsselwert anzugeben.
wx.setStorageSync : wx . setStorageSync ( 'name' , 'Thibault' ) ; wx.setStorageSync -Syntax ist einfacher, Parameter werden direkt übergeben. Und kann Daten über die eingehende Rückruffunktion abrufen.
WeChat bietet drei Hauptaktionen auf dem Cache:
wx.setStorage oder wx.setStorageSync .wx.getStorage oder wx.getStorageSync .wx.clearStorage oder wx.clearStorageSync .wx.removeStorage oder wx.removeStorageSync . Code snippet "set cache (synchronous method)" exemple .
<!-- index.wxml -->
< input style =" input " placeholder =" Input data " bindinput =" inputEvent " />
< button type =" warn " bindtap =" saveToCache " > Save data to cache </ button >
< button type =" primary " bindtap =" jumpToPage " > Jump to another page </ button > // index.js
Page ( {
data : {
inputInfo : ''
} ,
jumpToPage : function ( ) {
wx . navigateTo ( {
url : "../show/show"
} ) ;
} ,
inputEvent : function ( e ) {
console . log ( e . detail . value )
this . setData ( {
inputInfo : e . detail . value
} )
} ,
saveToCache : function ( ) {
wx . setStorage ( { key : 'inputInfo' , data : this . data . inputInfo ,
success : function ( res ) {
console . log ( res )
}
} )
}
} ) Code snippet "Fetch data from the cache and display data in a new page (synchronous method)" exemple .
<!-- show.wxml -->
< view > Data you saved to cache:{{inputInfo}} </ view > // show.js
Page ( {
data : {
inputInfo : ''
} ,
onLoad : function ( options ) {
var that = this ;
wx . getStorage ( {
key : 'inputInfo' ,
success : function ( res ) {
console . log ( res )
that . setData ( {
inputInfo : res . data ,
} )
}
} )
}
} ) Sie können Ihre Client -Code -Scanner -Benutzeroberfläche mithilfe der API wx.scanCode aufrufen . Es bietet direkten Zugriff auf den WeChat -Scanner über eine CTA -Taste mit dem Ziel, einen QR -Code zu scannen.
Code snippet "call up client code scanner" example.
<!-- .wxml -->
< view class =" btn-area " >
< button bindtap =" bindScan " > Scan </ button >
</ view > // .js
bindScan: function ( ) {
console . log ( 'scanner' )
wx . scanCode ( {
success : ( res ) => {
console . log ( res )
}
} )
}Die Wechat-API bietet eine Reihe standortbasierter Dienste:
wx.chooseLocation Um den Ort auszuwählen, den Sie anzeigen möchten.wx.getLocation um den aktuellen Benutzerstandort zu erhalten.wx.openLocation um den Speicherort in der Kartenansicht der Buit-in-Karten anzuzeigen.wx.createMapContext um Ihre Karte zu personalisieren. Code snippet "get location" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnGetLocation " > Get location </ button > // .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
var speed = res . speed
var accuracy = res . accuracy
console . log ( res )
}
} )
} Oben haben wir die wx.getLocation verwendet, um die aktuelle Benutzerposition abzurufen, indem er seinen Breitengrad und Längengrad erhält.
wx.getLocation Weitere Details: Wenn ein Benutzer das Miniprogramm verlässt, aber auf seinem Chat das Mini-Programm anzeigen, können Sie weiterhin wx.getLocation aufrufen und somit kontinuierlich den Benutzerstandort erhalten.
Zeigen Sie den aktuellen Benutzerstandort auf der WeChat-integrierten Karte an: wx.openLocation API-Anruf, ermöglicht die Öffnung der integrierten WeChat-Map-Ansicht, um den oben erstellten Speicherort aus der oben erstellten listenerBtnGetLocation -Funktion anzuzeigen.
HINWEIS: wx.openLocation -API -Anruf, leitet den Benutzer in ein neues Kartenfenster um.
Code snippet "display the current user location" example.
// .js
listenerBtnGetLocation: function ( ) {
wx . getLocation ( {
type : 'wgs84' ,
success : function ( res ) {
var latitude = res . latitude
var longitude = res . longitude
wx . openLocation ( {
latitude : latitude ,
longitude : longitude ,
scale : 28
} )
}
} )
}Wechat Image API bietet vier Möglichkeiten:
wx.chooseImage Wählen Sie ein Bild aus Ihrem Album oder Ihrer Kamera aus.wx.previewImage um das Bild vor dem Upload in der App voranzutreiben.wx.getImageInfo um Bildinformationen (Höhe, Breite, Pfad, SRC) zu erhalten.wx.saveImageToPhotosAlbum um Bild aus dem Miniprogramm in Ihrem Album zu speichern. Im folgenden Beispiel erstellen wir eine Funktion namens listenerBtnChooseImage mit dem Ziel, Benutzeralbum oder Kamera mithilfe von wx.chooseImage aufzurufen. Dann verwenden wir wx.getImageInfo um Bildinformationen zu erhalten.
Code snippet "upload an image from album or camera" example.
<!-- .wxml -->
< button type =" primary " bindtap =" listenerBtnChooseImage " > Upload Image </ button >
<!-- Display the image user upload -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
}
} )Jetzt, da wir ein Bild auf der Seite haben, speichern wir das Bild vom Miniprogramm zum aktuellen Benutzeralbum, indem wir das Bild lang auf das Bild tippen.
Code snippet "long tap the image to save it within user album" example.
<!-- .wxml -->
< image src =" {{src}} " mode =" aspecFill " bindlongtap =" imgLongTap " /> // .js
Page ( {
data : {
src : [ ]
} ,
listenerBtnChooseImage : function ( ) {
var that = this
// Upload an image
wx . chooseImage ( {
count : 1 ,
sizeType : [ 'original' , 'compressed' ] ,
sourceType : [ 'album' , 'camera' ] ,
success : function ( res ) {
console . log ( 'success' )
that . setData ( {
src : res . tempFilePaths
} )
// Get image info
wx . getImageInfo ( {
src : res . tempFilePaths [ 0 ] ,
success : function ( res ) {
console . log ( res . width )
console . log ( res . height )
console . log ( res . path )
}
} )
}
} )
} ,
// Longtap function
imgLongTap : function ( ) {
// Save image to album
wx . saveImageToPhotosAlbum ( {
filePath : this . data . src ,
success ( res ) {
wx . showToast ( {
title : 'Save' ,
icon : 'success' ,
duration : 1500
} )
console . log ( 'success' )
}
} )
}
} )WeChat Network API bietet gemeinsame HTTPS -Anfragen, Websocket, hochladen und herunterladen Dateien.
wx.request um eine Standard -HTTPS -Anfrage zu stellen.wx.uploadFile um eine Datei auf den eingerichteten Server hochzuladen.wx.downloadFile um eine Datei vom eingerichteten Server herunterzuladen. 
Im folgenden Beispiel haben wir eine Funktion und einen Ereignishandler: addNewPost und onPullDownRefresh , wie in ihrem Namen feststellt, sollten Sie in der Lage sein, einen neuen Beitrag hinzuzufügen und Beiträge mit einem wx.request -Anruf zu erhalten.
Code snippet "making a POST HTTPS request" example.
<!-- .wxml -->
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
} ,
header : {
'content-type' : 'application/json'
}
} )
}
} )Jetzt, wo wir gepostet haben, lassen Sie es uns auf die Ansichtsebene erhalten. Der Einfachheit halber nutzen wir OnpulldownRefresh, um neue Beiträge neu zu laden.
Code snippet "making a GET HTTPS request" example.
<!-- .wxml -->
<!-- Display Posts -->
< block wx:for =" {{posts}} " wx:for-item =" post " >
< text > {{post.content}} </ text >
</ block >
<!-- Add Posts -->
< input confirm-type =" send " bindconfirm =" addNewPost " placeholder =" Add a new post! " /> // .js
Page ( {
data : {
posts : [ ]
} ,
addNewPost : function ( e ) {
var that = this
var message = e . detail . value
// Add a new post
wx . request ( {
url : 'example.php' , // just an example address
method : 'post' ,
data : {
post : {
content : message
}
}
} )
} ,
// onPullDownRefresh must first be enabled in the config.
onPullDownRefresh : function ( ) {
var that = this
// by default the request is a GET.
wx . request ( {
url : 'example.php' ,
header : {
'content-type' : 'application/json'
} ,
success : {
that . setData ( {
posts : res . data // Set the Page data for posts to the response data.
} )
}
} )
}
} ) Während unseres Mini-Programm-Schöpfungsweges, auf den wir Fragen und Fragen gestoßen haben, möchten wir mit Ihnen teilen. Wenn Sie einige Probleme hatten, die Sie teilen möchten, erreichen Sie uns.
WeChat erlaubt nur API mit einer ICP -Lizenz, sodass Sie die meisten APIs, mit denen Sie in westlichen Ländern vertraut sind, vergessen.
Hier ist ein Verzeichnis von APIs, die in China erhältlich sind. Schauen Sie sich es an.
background-image: Eigenschaft Bildressourcen können nicht über das CSS- Hintergrund-Image erhalten werden background-image: url(../../images/banner.png); . Ich weiß, dass es schrecklich ist, aber wir müssen uns damit befassen.
Es gibt zwei Möglichkeiten, diese Frustration zu umgehen :
Sie können das CSS background-image: Sie können jedoch keinen Reklamartpfad verwenden , Sie müssen Ihr Bild in Base64 codieren und es dann an das background-image: url(base64 image); . Hier ist ein Werkzeug, um Bilder in Base64 zu codieren.
Oder Sie können das <image> -Tag verwenden und Bilder mit <image> Tag -Attribut wie mode behandeln. WeChat hat 13 Modi , 9 sind Schnittmodus und 4 sind Zoommodus . Hier ist ein Link zur Dokumentation.
RPX steht für Responsive Pixel , die Einheit von WeChat-Miniprogrammen. Nach der offiziellen Definition basiert rpx auf der adaptiven Bildschirmbreite.
Tatsächlich basiert die RPX -Einheit auf der rem -Einheit, die für "Root EM" steht. Warum nicht em -Einheit?
Die em Einheit ist relativ zur Schriftgrößengröße des Elternteils , was zu einer Zusammensetzung von Problemen führt. Die rem -Einheit ist relativ zu dem Wurzelelement, das das Problem mit der Verbundung kontrolliert (Schriftgröße für Schriftarten).
Um jedoch auf rpx -Einheit zurückzukehren, sind die RPX -Vorteile :
Arbeiten Sie an einem Miniprogramm? Wenden Sie sich an uns, wenn Sie Ihre Arbeit teilen möchten, unsere Crew treffen und um Hilfe bitten möchten!
Wenn Sie einen Beitrag leisten möchten, können Sie hier eine Pull -Anfrage senden oder uns einen Schrei auf Shanghai (at) Lewagon.com für Vorschläge geben!
