WeChat-Applet
Mini-Programmentwicklung
Einführung in die Page()-Funktion des WeChat Mini-Programms
Einführung in die Page()-Funktion des WeChat Mini-Programms
Jun 22, 2018 pm 04:16 PM
Dieser Artikel stellt haupts?chlich relevante Informationen zur detaillierten Erkl?rung der Page()-Funktion des WeChat-Applets vor. Ich hoffe, dass sie allen bedürftigen Freunden helfen kann dazu
WeChat Mini-Programm - Seite():
Bei der Entwicklung eines WeChat-Miniprogramms sto?en Sie auf eine Funktion oder etwas, das Sie ben?tigen Ich verstehe nicht, der letzte Schritt besteht darin, auf die offizielle Website zu gehen, um das entsprechende Wissen zu überprüfen. Hier hilft Ihnen der Editor, die Verwendung der page()-Funktion zu kl?ren.
Die Funktion ?Page()“ wird zum Registrieren einer Seite verwendet. Akzeptiert einen Objektparameter, der die Anfangsdaten der Seite, Lebenszyklusfunktionen, Ereignisbehandlungsfunktionen usw. angibt.
Objektparameterbeschreibung:
| 屬性? | 類型 | 描述 |
|---|---|---|
| data | Object | 頁面的初始數(shù)據(jù) |
| onLoad | Function | 生命周期函數(shù)--監(jiān)聽頁面加載 |
| onReady | Function | 生命周期函數(shù)--監(jiān)聽頁面初次渲染完成 |
| onShow | Function | 生命周期函數(shù)--監(jiān)聽頁面顯示 |
| onHide | Function | 生命周期函數(shù)--監(jiān)聽頁面隱藏 |
| onUnload | Function | 生命周期函數(shù)--監(jiān)聽頁面卸載 |
| onPullDownRefreash | Function | 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作 |
| 其他 | Any | 開發(fā)者可以添加任意的函數(shù)或數(shù)據(jù)到 object 參數(shù)中，用?this?可以訪問 |
Beispielcode:
//index.js
Page({
data: {
text: "This is page data."
},
onLoad: function(options) {
// Do some initialize 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.
},
onPullDownRefresh: function() {
// Do something when pull down
},
// Event handler.
viewTap: function() {
this.setData({
text: 'Set some data for updating view.'
})
}
})Initialisierungsdaten
Es werden Initialisierungsdaten verwendet als Seite des ersten Renderings. Die Daten werden in Form von JSON von der Logikschicht an die Rendering-Schicht übertragen. Daher müssen die Daten in einem Format vorliegen, das in JSON konvertiert werden kann: Zeichenfolgen, Zahlen, boolesche Werte, Objekte und Arrays.
Die Rendering-Ebene kann Daten über WXML binden.
Beispielcode:
<view>{{text}}</view>
<view>{{array[0].msg}}</view>Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
}) Lebenszyklusfunktion
onLoad: Seitenladen
wird nur einmal für eine Seite aufgerufen. Der Parameter
kann die Abfrage in wx.navigateTo, wx.redirectTo und
onShow: Seitenanzeige
wird bei jedem ?ffnen der Seite aufgerufen.
onReady: Das erste Rendern der Seite ist abgeschlossen
Eine Seite wird nur einmal aufgerufen, was bedeutet, dass die Seite bereit ist und mit der Ansichtsebene interagieren kann .
Bitte legen Sie nach onReady Schnittstelleneinstellungen wie wx.setNavigationBarTitle fest. Einzelheiten finden Sie unter Lebenszyklus
onHide: Seite ausblenden
Wird aufgerufen, wenn ?navigateTo“ oder die untere Registerkarte gewechselt wird.
onUnload: Seite wird entladen
Wird aufgerufen, wenn ?redirectTo“ oder ?navigationBack“ ausgeführt wird.
Seitenbezogene Ereignishandlerfunktion
onPullDownRefresh: Zum Aktualisieren nach unten ziehen
H?ren Sie, wie der Benutzer herunterzieht Ereignis aktualisieren.
Sie müssen ?enablePullDownRefresh“ in der Fensteroption der Konfiguration aktivieren.
Nach der Verarbeitung der Datenaktualisierung kann wx.stopPullDownRefresh die Pulldown-Aktualisierung der aktuellen Seite stoppen.
Ereignisbehandlungsfunktion
Zus?tzlich zu Initialisierungsdaten und Lebenszyklusfunktionen kann Page auch einige spezielle Funktionen definieren: Ereignisbehandlungsfunktionen. In der Rendering-Ebene kann der Komponente eine Ereignisbindung hinzugefügt werden. Wenn das Triggerereignis erreicht ist, wird die in Seite definierte Ereignisverarbeitungsfunktion ausgeführt.
Beispielcode:
Die setData-Funktion wird verwendet, um Daten von der Logikschicht an die Ansichtsschicht zu senden und diese entsprechend zu ?ndern .Datenwert.
Hinweis:
Das direkte ?ndern von this.data ist ungültig, kann den Status der Seite nicht ?ndern und führt zu Dateninkonsistenzen. Der Datensatz darf jeweils nicht gr??er als 1024 KB sein. Bitte vermeiden Sie, zu viele Daten auf einmal festzulegen.
setData()-Parameterformat
Akzeptiert ein Objekt, das den dem Schlüssel in this.data entsprechenden Wert in Form eines Schlüssels darstellt und Wert ?ndern. Der Schlüssel kann sehr flexibel sein und in Form eines Datenpfads angegeben werden, z. B. array[2].message, a.b.c.d, und muss nicht in this.data vordefiniert werden.
Beispielcode:
Page({
viewTap: function() {
console.log('view tap')
}
})<view>{{text}}</view>
<button bindtap="changeText"> Change normal data </button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray"> Change Array data </button>
<view>{{obj.text}}</view>
<button bindtap="changeItemInObject"> Change Object data </button>
<view>{{newField.text}}</view>
<button bindtap="addNewField"> Add new data </button>
Der folgende Inhalt Sie müssen nicht alles sofort herausfinden, aber es wird sp?ter helfen.
Lebenszyklus
Die folgende Abbildung veranschaulicht den Lebenszyklus einer Seiteninstanz.
Seitenrouting
Im Miniprogramm wird das Routing aller Seiten vom Framework For Routing verwaltet Die Ausl?semethode und die Seitenlebenszyklusfunktionen lauten wie folgt:
Routing-Methode
Ausl?sezeit Post-Routing-Seite Pre-Routing-Seite
|
Trigger-Timing |
Seite nach dem Routing | Seite vor dem Routing | |
|---|---|---|---|
| Initialisierung | Die erste vom Applet ge?ffnete Seite | onLoad, onShow | |
| ?ffnen eine neue Seite | Rufen Sie die API wx.navigateTo auf oder verwenden Sie die Komponente |
onLoad, onShow | onHide | tr>
| Seitenumleitung | Rufen Sie die API wx.redirectTo auf oder verwenden Sie die Komponente |
onLoad, onShow | onUnload |
| Seitenrücklauf | Rufen Sie die API wx.navigateBack auf oder der Benutzer drückt den Zurück-Button in der oberen linken Ecke | onShow | onUnload |
| Tab-Wechsel | Benutzer wechselt Tab im Multi-Tab-Modus | ?ffnen Sie onLoad und onshow zum ersten Mal Zeit; ansonsten onShow | onHide |
Das Obige ist der gesamte Inhalt dieses Artikels Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!
|
? ? ?觸發(fā)時機 |
路由后頁面 | 路由前頁面 | |
|---|---|---|---|
| 初始化 | 小程序打開的第一個頁面 | onLoad，onShow | ? |
| 打開新頁面 | 調(diào)用 API?wx.navigateTo?或使用組件 |
onLoad，onShow | onHide |
| 頁面重定向 | 調(diào)用 API?wx.redirectTo?或使用組件 |
onLoad，onShow | onUnload |
| 頁面返回 | 調(diào)用 API?wx.navigateBack或用戶按左上角返回按鈕 | onShow | onUnload |
| Tab切換 | 多 Tab 模式下用戶切換 Tab | 第一次打開 onLoad，onshow；否則 onShow | onHide |
Verwendung von wx:for und wx:for-item im WeChat-Miniprogramm
WeChat mini program Einführung in den Rückruf von program-getUserInfo
Das obige ist der detaillierte Inhalt vonEinführung in die Page()-Funktion des WeChat Mini-Programms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
Hei?e KI -Werkzeuge
Undress AI Tool
Ausziehbilder kostenlos
Undresser.AI Undress
KI-gestützte App zum Erstellen realistischer Aktfotos
AI Clothes Remover
Online-KI-Tool zum Entfernen von Kleidung aus Fotos.
Clothoff.io
KI-Kleiderentferner
Video Face Swap
Tauschen Sie Gesichter in jedem Video mühelos mit unserem v?llig kostenlosen KI-Gesichtstausch-Tool aus!
Hei?er Artikel
Hei?e Werkzeuge
Notepad++7.3.1
Einfach zu bedienender und kostenloser Code-Editor
SublimeText3 chinesische Version
Chinesische Version, sehr einfach zu bedienen
Senden Sie Studio 13.0.1
Leistungsstarke integrierte PHP-Entwicklungsumgebung
Dreamweaver CS6
Visuelle Webentwicklungstools
SublimeText3 Mac-Version
Codebearbeitungssoftware auf Gottesniveau (SublimeText3)
Hei?e Themen
1597
29
1488
72
Das Miniprogramm Xianyu WeChat wurde offiziell gestartet
Feb 10, 2024 pm 10:39 PM
Das offizielle WeChat-Miniprogramm von Xianyu wurde stillschweigend gestartet. Im Miniprogramm k?nnen Sie private Nachrichten posten, um mit K?ufern/Verk?ufern zu kommunizieren, pers?nliche Informationen und Bestellungen anzuzeigen, nach Artikeln zu suchen usw. Wenn Sie neugierig sind, was ist das Xianyu WeChat Mini? Programm namens? Werfen wir einen Blick darauf. Wie hei?t das Xianyu WeChat-Applet? Antwort: Xianyu, Leerlauftransaktionen, Gebrauchtverk?ufe, Bewertungen und Recycling. 1. Im Miniprogramm k?nnen Sie inaktive Nachrichten posten, mit K?ufern/Verk?ufern über private Nachrichten kommunizieren, pers?nliche Informationen und Bestellungen einsehen, nach bestimmten Artikeln suchen usw. 2. Auf der Seite des Miniprogramms gibt es eine Homepage, in der N?he, Posten Sie Leerlauf, Nachrichten und meine 5 Funktionen. 3. Wenn Sie es nutzen m?chten, müssen Sie die WeChat-Zahlung aktivieren, bevor Sie es kaufen k?nnen.
Implementieren Sie Bildfiltereffekte in WeChat-Miniprogrammen
Nov 21, 2023 pm 06:22 PM
Implementieren von Bildfiltereffekten in WeChat-Miniprogrammen Mit der Popularit?t von Social-Media-Anwendungen wenden Menschen immer h?ufiger Filtereffekte auf Fotos an, um den künstlerischen Effekt und die Attraktivit?t der Fotos zu verst?rken. Bildfiltereffekte k?nnen auch in WeChat-Miniprogrammen erzielt werden, wodurch Benutzer interessantere und kreativere Fotobearbeitungsfunktionen erhalten. In diesem Artikel wird erl?utert, wie Bildfiltereffekte in WeChat-Miniprogrammen implementiert werden, und es werden spezifische Codebeispiele bereitgestellt. Zuerst müssen wir die Canvas-Komponente im WeChat-Applet verwenden, um Bilder zu laden und zu bearbeiten. Die Canvas-Komponente kann auf der Seite verwendet werden
Implementieren Sie den Dropdown-Menüeffekt im WeChat-Applet
Nov 21, 2023 pm 03:03 PM
Um den Dropdown-Menüeffekt in WeChat-Miniprogrammen zu implementieren, sind spezifische Codebeispiele erforderlich. Mit der Popularit?t des mobilen Internets sind WeChat-Miniprogramme zu einem wichtigen Bestandteil der Internetentwicklung geworden, und immer mehr Menschen haben begonnen, darauf zu achten Verwenden Sie WeChat Mini-Programme. Die Entwicklung von WeChat-Miniprogrammen ist einfacher und schneller als die herk?mmliche APP-Entwicklung, erfordert jedoch auch die Beherrschung bestimmter Entwicklungsf?higkeiten. Bei der Entwicklung von WeChat-Miniprogrammen sind Dropdown-Menüs eine h?ufige UI-Komponente, um eine bessere Benutzererfahrung zu erzielen. In diesem Artikel wird detailliert beschrieben, wie der Dropdown-Menüeffekt im WeChat-Applet implementiert wird, und es werden praktische Informationen bereitgestellt
Wie hei?t das Xianyu WeChat-Applet?
Feb 27, 2024 pm 01:11 PM
Das offizielle WeChat-Miniprogramm von Xianyu wurde stillschweigend gestartet. Es bietet Benutzern eine praktische Plattform, die es ihnen erm?glicht, ungenutzte Artikel einfach zu ver?ffentlichen und zu handeln. Im Miniprogramm k?nnen Sie über private Nachrichten mit K?ufern oder Verk?ufern kommunizieren, pers?nliche Informationen und Bestellungen einsehen und nach den gewünschten Artikeln suchen. Wie genau hei?t Xianyu im WeChat-Miniprogramm? Dieses Tutorial stellt es Ihnen im Detail vor. Benutzer, die es wissen m?chten, folgen bitte diesem Artikel und lesen Sie weiter! Wie hei?t das Xianyu WeChat-Applet? Antwort: Xianyu, Leerlauftransaktionen, Gebrauchtverk?ufe, Bewertungen und Recycling. 1. Im Miniprogramm k?nnen Sie inaktive Nachrichten posten, mit K?ufern/Verk?ufern über private Nachrichten kommunizieren, pers?nliche Informationen und Bestellungen einsehen, nach bestimmten Artikeln suchen usw. 2. Auf der Seite des Miniprogramms gibt es eine Homepage, in der N?he, Post-Leerlauf, Nachrichten und meine 5 Funktionen;
Das WeChat-Applet implementiert die Funktion zum Hochladen von Bildern
Nov 21, 2023 am 09:08 AM
WeChat-Applet implementiert Bild-Upload-Funktion Mit der Entwicklung des mobilen Internets ist das WeChat-Applet zu einem unverzichtbaren Bestandteil des Lebens der Menschen geworden. WeChat-Miniprogramme bieten nicht nur eine Fülle von Anwendungsszenarien, sondern unterstützen auch vom Entwickler definierte Funktionen, einschlie?lich Funktionen zum Hochladen von Bildern. In diesem Artikel wird erl?utert, wie die Bild-Upload-Funktion im WeChat-Applet implementiert wird, und es werden spezifische Codebeispiele bereitgestellt. 1. Vorbereitende Arbeiten Bevor wir mit dem Schreiben von Code beginnen, müssen wir die WeChat-Entwicklertools herunterladen und installieren und uns als WeChat-Entwickler registrieren. Gleichzeitig müssen Sie auch WeChat verstehen
Verwenden Sie das WeChat-Applet, um einen Karussellwechseleffekt zu erzielen
Nov 21, 2023 pm 05:59 PM
Verwenden Sie das WeChat-Applet, um den Karussellwechseleffekt zu erzielen. Das WeChat-Applet ist eine leichtgewichtige Anwendung, die einfach und effizient zu entwickeln und zu verwenden ist. In WeChat-Miniprogrammen ist es eine h?ufige Anforderung, Karussellwechseleffekte zu erzielen. In diesem Artikel wird erl?utert, wie Sie mit dem WeChat-Applet den Karussell-Umschalteffekt erzielen, und es werden konkrete Codebeispiele aufgeführt. Fügen Sie zun?chst eine Karussellkomponente zur Auslagerungsdatei des WeChat-Applets hinzu. Sie k?nnen beispielsweise den Tag <swiper> verwenden, um den Schalteffekt des Karussells zu erzielen. In dieser Komponente k?nnen Sie b übergeben
Implementieren Sie den Bildrotationseffekt im WeChat-Applet
Nov 21, 2023 am 08:26 AM
Um den Bildrotationseffekt im WeChat Mini-Programm zu implementieren, sind spezifische Codebeispiele erforderlich. Das WeChat Mini-Programm ist eine leichtgewichtige Anwendung, die Benutzern umfangreiche Funktionen und eine gute Benutzererfahrung bietet. In Miniprogrammen k?nnen Entwickler verschiedene Komponenten und APIs nutzen, um unterschiedliche Effekte zu erzielen. Unter diesen ist der Bildrotationseffekt ein g?ngiger Animationseffekt, der dem Miniprogramm interessante und visuelle Effekte verleihen kann. Um Bildrotationseffekte in WeChat-Miniprogrammen zu erzielen, müssen Sie die vom Miniprogramm bereitgestellte Animations-API verwenden. Das Folgende ist ein spezifisches Codebeispiel, das zeigt, wie das geht
Implementieren Sie die Schiebel?schfunktion im WeChat-Miniprogramm
Nov 21, 2023 pm 06:22 PM
Die Implementierung der Schiebel?schfunktion in WeChat-Miniprogrammen erfordert spezifische Codebeispiele. Aufgrund der Beliebtheit von WeChat-Miniprogrammen sto?en Entwickler w?hrend des Entwicklungsprozesses h?ufig auf Implementierungsprobleme. Unter diesen ist die gleitende L?schfunktion eine h?ufige und h?ufig verwendete Funktionsanforderung. In diesem Artikel wird detailliert beschrieben, wie die Schiebel?schfunktion im WeChat-Applet implementiert wird, und es werden spezifische Codebeispiele gegeben. 1. Anforderungsanalyse Im WeChat-Miniprogramm umfasst die Implementierung der Schiebel?schfunktion die folgenden Punkte: Listenanzeige: Um eine Liste anzuzeigen, die verschoben und gel?scht werden kann, muss jedes Listenelement enthalten sein
