Explication détaillée de la fonction Page() de l'applet WeChat

Programme WeChat Mini—Page() :

Lorsque vous rencontrez une fonction ou quelque chose que vous ne comprenez pas lors du développement d'un mini programme WeChat, il est préférable d'aller sur le site officiel pour vérifier le correspondant. connaissances, l'éditeur ici vous aidera à trier l'utilisation de la fonction page().

La fonction Page() est utilisée pour enregistrer une page. Accepte un paramètre d'objet, qui spécifie les données initiales de la page, les fonctions de cycle de vie, les fonctions de gestion des événements, etc.

Description du paramètre d'objet :

Description du type d'attribut

data Object Données initiales de la page

Fonction onLoad Fonction de cycle de vie - - Surveiller le chargement de la page

Fonction onReady Fonction de cycle de vie --Écouter l'achèvement du rendu initial de la page

Fonction onShow Fonction de cycle de vie --Écouter l'affichage de la page

onHide Function Fonction de cycle de vie -- Surveillance du masquage de la page

onUnload Function Fonction de cycle de vie -- Surveillance du déchargement de la page

onPullDownRefreash Function Fonction de traitement des événements liés à la page -- Surveillance de l'action déroulante de l'utilisateur

Autres Tous les développeurs peuvent ajouter des fonctions arbitraires ou des données dans le paramètre d'objet sont accessibles avec cet

Exemple de code :

//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.'   
  })   
 }   
})

Données d'initialisation

Initialisation les données seront utilisées comme premier rendu de la page. Les données seront transmises de la couche logique à la couche de rendu sous forme de JSON, les données doivent donc être dans un format pouvant être converti en JSON : chaînes, nombres, valeurs booléennes, objets et tableaux.

La couche de rendu peut lier des données via WXML.

Exemple de code :

<view>{{text}}</view>   
<view>{{array[0].msg}}</view>

Page({   
 data: {   
  text: 'init data',   
  array: [{msg: '1'}, {msg: '2'}]   
 }   
})

Fonction de cycle de vie

onLoad : Chargement de la page

Une page ne sera appelée qu'une seule fois. Le paramètre

peut récupérer la requête dans wx.navigateTo, wx.redirectTo et .

onShow : L'affichage de la page

sera appelé à chaque ouverture de la page.

onReady : Le rendu initial de la page est terminé

Une page ne sera appelée qu'une seule fois, ce qui signifie que la page est prête et peut interagir avec la couche de vue.

Veuillez définir les paramètres d'interface tels que wx.setNavigationBarTitle après onReady. Pour plus de détails, voir Cycle de vie

onHide : Page Hide

Appelé lorsque NavigTo ou l'onglet inférieur est basculé.

onUnload : Déchargement de la page

Appelé lors de redirectTo ou naviguerBack.

Fonction de traitement des événements liés à la page

onPullDownRefresh : déroulez pour actualiser

Écoutez le déroulement de l'utilisateur pour actualiser les événements.

Vous devez activer activatePullDownRefresh dans l'option de fenêtre de config.

Après avoir traité l'actualisation des données, wx.stopPullDownRefresh peut arrêter l'actualisation déroulante de la page actuelle.

Fonction de gestion des événements

En plus des données d'initialisation et des fonctions de cycle de vie, Page peut également définir certaines fonctions spéciales : fonctions de gestion des événements. Dans la couche de rendu, une liaison d'événement peut être ajoutée au composant. Lorsque l'événement déclencheur est atteint, la fonction de traitement d'événement définie dans Page sera exécutée.

Exemple de code :

cliquez sur moi

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

Page.prototype.setData()

La fonction setData est utilisée pour envoyer des données de la couche logique à la couche de vue et modifier la valeur correspondante de this.data en même temps.

Remarque :

La modification directe de this.data n'est pas valide et ne peut pas changer le statut de la page. Cela entraînera également une incohérence des données.

Les données définies à la fois ne peuvent pas dépasser 1 024 Ko. Veuillez essayer d'éviter de définir trop de données à la fois.

Le format du paramètre setData()

accepte un objet sous forme de clé et de valeur pour changer la valeur correspondant à la clé dans this.data en valeur.

La clé peut être très flexible, donnée sous la forme d'un chemin de données, tel que array[2].message, a.b.c.d, et n'a pas besoin d'être prédéfinie dans this.data.

Exemple de code :

<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   
  this.setData({   
   'array[0].text':'changed data'   
  })   
 },   
 changeItemInObject: function(){   
  this.setData({   
   'object.text': 'changed data'   
  });   
 },   
 addNewField: function() {   
  this.setData({   
   'newField.text': 'new data'   
  })   
 }   
})

Vous n'avez pas besoin de comprendre ce qui suit tout de suite, mais cela vous aidera plus tard.

Cycle de vie

La figure suivante illustre le cycle de vie d'une instance de Page.

Routage des pages


Dans le mini programme, le routage de toutes les pages est géré par le framework, et la méthode de déclenchement du routage et la durée de vie des pages cycle La fonction est la suivante :

Méthode de routage

Minutage de déclenchement Page post-routage Page de pré-routage

Déclenchement timing                                                                   Avant le routage Page

Initialisation La première page ouverte par l'applet onLoad, onShow

Ouvrez une nouvelle page Appelez l'API wx.navigateTo ou utilisez le composant onLoad, onShow onHide

Redirection de page Appelez l'API wx.redirectTo ou utilisez le composant , onShow onUnload

Retour de page Appelez l'API wx.navigateBack ou l'utilisateur appuie sur le bouton de retour dans le coin supérieur gauche onShow onUnload

Changement d'onglet L'utilisateur change d'onglet en mode multi-onglets Ouvrir onLoad pour le première fois, onshow ; sinon onShow onHide

Ce qui précède est l'explication détaillée de la fonction Page() de l'applet WeChat. Pour plus de contenu connexe, veuillez prêter attention au site Web PHP chinois. (www.php.cn) !