Einführung in die Registrierungsseite für die Entwicklung des WeChat Mini-Programms

In diesem Artikel werden hauptsächlich die relevanten Informationen zum WeChat Mini-Programm Registrierungsseite vorgestellt. Freunde in Not können sich auf die

WeChat Mini-Programm-Seite

Page()Funktion wird zum Registrieren einer Seite verwendet. Akzeptiert einen Objekt-Parameter, der die Anfangsdaten der Seite, die Lebenszyklus--Funktion, die Ereignisbehandlungs--Funktion usw. angibt.

Objektparameterbeschreibung:

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.
 },
 // Event handler.
 viewTap: function() {
 this.setData({
  text: 'Set some data for updating view.'
 })
 }
})

Initialisierungsdaten

Initialisierungsdaten werden beim ersten Rendern der Seite verwendet. 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: String, Zahlen, Boolesche Werte, Objekt, Array.

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'}]
 }
})

Ereignishandlerfunktion

Zusätzlich zu Initialisierungsdaten und Lebenszyklusfunktionen, Seite Außerdem können einige spezielle Funktionen definiert werden: Ereignisbehandlungsfunktionen. In der Rendering-Ebene kann der Komponente eine Ereignisbindung hinzugefügt werden. Wenn das Triggerereignis erreicht ist, wird die in der Seite definierte Ereignisverarbeitungsfunktion ausgeführt.

Beispielcode:

click me

Page({
 viewTap: function() {
 console.log('view tap')
 }
})

Page.prototype.setData()

Die setData-Funktion wird verwendet, um Daten von der Logikschicht an die Ansichtsschicht zu senden und dabei den entsprechenden Wert von this.data zu ändern.

Hinweis:

Das direkte Ändern dieser Daten ist ungültig und der Status der Seite kann nicht geändert werden geändert werden, was zu Dateninkonsistenzen führt.
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 in der Form von Schlüssel, Wert, der den Wert darstellt, der dem Schlüssel darin entspricht .data In 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:

<!--index.wxml-->
<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>

//index.js
Page({
 data: {
 text: 'init data',
 array: [{text: 'init data'}],
 object: {
  text: 'init data'
 }
 },
 changeText: function() {
 // this.data.text = 'changed data' // bad, it can not work
 this.setData({
  text: 'changed data'
 })
 },
 changeItemInArray: function() {
 // you can use this way to modify a danamic data path
 var changedData = {}
 var index = 0
 changedData['array[' + index + '].text'] = 'changed data'
 this.setData(changedData)
 },
 changeItemInObject: function(){
 this.setData({
  'object.text': 'changed data'
 });
 },
 addNewField: function() {
 this.setData({
  'newField.text': 'new data'
 })
 }
})

Sie müssen Folgendes nicht sofort verstehen, aber es wird später hilfreich sein.

Lebenszyklusfunktion

Die folgende Abbildung veranschaulicht den Lebenszyklus einer Seiteninstanz.

Das Routing der Seite

Das Routing aller Seiten im Miniprogramm werden alle von Framework verwaltet. Die Routing-Trigger-Methode und die Seitenlebenszyklusfunktion sind wie folgt:

Vielen Dank fürs Lesen, ich hoffe, es kann allen helfen, vielen Dank an alle für die Unterstützung diese Seite!

Das obige ist der detaillierte Inhalt vonEinführung in die Registrierungsseite für die Entwicklung des WeChat Mini-Programms. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!