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

beziehen

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:

onLoad

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:

Attribut

属性	类型	描述
data	Object	页面的初始数据
onLoad	Function	生命周期函数--监听页面加载
onReady	Function	生命周期函数--监听页面渲染完成
onShow	Function	生命周期函数--监听页面显示
onHide	Function	生命周期函数--监听页面隐藏
onUnload	Function	生命周期函数--监听页面卸载
其他	Any	开发者可以添加任意的函数或数据到Object参数中，用this可以访问

Typ

Beschreibung

Daten

Objekt

Anfangsdaten der Seite

Funktion

Lebensdauer Cycle-Funktion – wartet auf das Laden der Seite

onReady

Funktion

Lebenszyklusfunktion – wartet auf den Abschluss des Seitenrenderings td>

onShow

Funktion

Lebenszyklusfunktion – Seitenanzeige überwachen

onHide td>

Funktion

Lebenszyklusfunktion – auf das Ausblenden von Seiten achten

onUnload

Funktion

Lebenszyklusfunktion – auf Seitenentladung warten

Andere

Jeder

Entwickler können dem Objektparameter beliebige Funktionen oder Daten hinzufügen, auf die mit diesem zugegriffen werden kann

Routing-Methode

Trigger-Timing

Seite nach dem Routing

Seite davor Routing

Initialisierung

Die erste vom Applet geöffnete Seite

onLoad, onShow

Neue Seite öffnen

Rufen Sie die API

路由方式	触发时机	路由后页面	路由前页面
初始化	小程序打开的第一个页面	onLoad，onShow
打开新页面	调用 API wx.navigateTo或使用组件	onLoad，onShow	onHide
页面重定向	调用 API wx.redirectTo或使用组件	onLoad，onShow	onUnload
页面返回	调用 API wx.navigateBack或用户按左上角返回按钮	onShow	onUnload
Tab切换	多 Tab 模式下用户切换 Tab	第一次打开 onLoad，onshow；否则 onShow	onHide

wx.navigateTo auf oder verwenden Sie die Komponente

onLoad, onShow

onHide

Seitenintensive Weiterleitung

Rufen Sie die API wx.redirectTo auf oder verwenden Sie die Komponente

onLoad, onShow td>

onUnload

Page return

API wx.navigateBack aufrufen oder Der Benutzer drückt die Zurück-Taste in der oberen linken Ecke

onShow

onUnload

Tab-Schalter

Benutzer wechselt Tab im Multi-Tab-Modus

OnLoad zum ersten Mal öffnen, andernfalls onshow; onShow

onHide

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!