page()-Funktion für die Entwicklung kleiner Programme

Seite

Die Funktion „Page()“ wird zum Registrieren einer Seite verwendet. Akzeptiert einen Objektparameter, der die Anfangsdaten, die Lebenszyklusfunktion, die Ereignisverarbeitungsfunktion usw. der Seite 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.
  },
  onPullDownRefresh: function() {
    // Do something when pull down.
  },  onReachBottom: function() {
    // Do something when page reach bottom.
  },  onShareAppMessage: function() {
    // return custom share date when user share.
  },
  // Event handler.
  viewTap: function() {
    this.setData({
      text: 'Set some data for updating view.'
    })
  },
  customData: {
    hi: 'MINA'
  }
})

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: &#39;init data&#39;,
    array: [{msg: &#39;1&#39;}, {msg: &#39;2&#39;}]
  }
})

Lebenszyklusfunktion

onLoad: Seitenladen

Eine Seite wird nur einmal aufgerufen .

Empfangende Seitenparameter können wx.navigateTo, wx.redirectTo abrufen und in abfragen.

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 interagieren kann Ansichtsebene.

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.

Lebenszyklusaufrufe und Seiten-Routing Methoden werden im

onLoad-Parameter

Seitenbezogene Ereignisverarbeitungsfunktion

onPullDownRefresh: Pulldown-Aktualisierung

Überwachen Sie Benutzer-Pulldown-Aktualisierungsereignisse.

Sie müssen „enablePullDownRefresh“ in der Fensteroption der Konfiguration aktivieren.

Wenn die Datenaktualisierung verarbeitet wird, kann wx.stopPullDownRefresh die Pulldown-Aktualisierung der aktuellen Seite stoppen.

onShareAppMessage: User Share

Nur wenn dieser Event-Handler definiert ist, wird die Schaltfläche „Teilen“

im Menü oben rechts angezeigt

Wenn der Benutzer auf die Schaltfläche „Teilen“ klickt, wird diese aufgerufen

Dieses Ereignis muss ein Objekt für benutzerdefinierte Freigabeinhalte zurückgeben

Benutzerdefiniertes Freigabefeld

Beispielcode

Page({
  onShareAppMessage: function () {    return {
      title: '自定义分享标题',
      path: '/page/user?id=123'
    }
  }
})

Ereignisbehandlungsfunktion

Zusätzlich zu Initialisierungsdaten und Lebenszyklusfunktionen kann Page Definieren Sie auch einige Sonderfunktionen: Ereignisbehandlungsfunktion. 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:

<view bindtap="viewTap"> click me </view>Page({
  viewTap: function() {
    console.log(&#39;view tap&#39;)
  }})
Page.prototype.setData()

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

Hinweis:

Das direkte Ändern dieser Daten ist ungültig und kann den

Status der Seite nicht ändern, was ebenfalls 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

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.

Hinweis:

Das direkte Ändern von this.data ohne Aufruf von this.setData ändert nicht den Status der Seite und führt außerdem zu Dateninkonsistenzen

Der Datensatz darf jeweils nicht größer als 1024 KB sein. Bitte vermeiden Sie, zu viele Daten auf einmal festzulegen.

示例代码：

<!--index.wxml--><view>{{text}}</view><button bindtap="changeText"> Change normal data </button><view>{{num}}</view><button bindtap="changeText"> Change normal num </button><view>{{array[0].text}}</view><button bindtap="changeItemInArray"> Change Array data </button><view>{{object.text}}</view><button bindtap="changeItemInObject"> Change Object data </button><view>{{newField.text}}</view><button bindtap="addNewField"> Add new data </button>
//index.jsPage({
  data: {
    text: &#39;init data&#39;,
    num: 0,
    array: [{text: &#39;init data&#39;}],
    object: {
      text: &#39;init data&#39;
    }
  },

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

以下内容你不需要立马完全弄明白，不过以后它会有帮助。

生命周期函数

下图说明了Page实例的生命周期。

【相关推荐】

1. 特别推荐：“php程序员工具箱”V0.1版本下载

2. 微信小程序完整源码下载

3. 微信小程序demo：阳淘

Das obige ist der detaillierte Inhalt vonpage()-Funktion für die Entwicklung kleiner Programme. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!