Explication détaillée et exemples de liaison de données du mini programme WeChat (explication détaillée avec images et texte)

Cet article présente principalement les informations pertinentes du programme WeChat Mini Liaison de données Explication détaillée et exemples (images et textes détaillés) Les amis dans le besoin peuvent se référer aux

Mises à jour récentes du programme WeChat Mini. Il suffit de regarder les utilisateurs de WeChat pour savoir s'il est populaire ou non. Les amis qui effectuent un travail frontal peuvent montrer leurs compétences et suivre le rythme. Voici une introduction à la liaison de données des mini-programmes WeChat.

>>>Liaison de vues de données

Les étudiants effectuant du développement front-end, en particulier du front-end WEB, doivent gérer des vues tous les jours . Si vous avez utilisé jQuery, vous pouvez apprécier la redondance du code et les inconvénients opérationnels de jQuery. Vous devez gérer manuellement la cohérence des données des vues et des objets.

Les données suivantes sont équivalentes à des objets.

Vue traditionnelle et liaison de données

Alors, comment l'applet WeChat gère-t-elle la liaison de vue et d'objet ? Modèle avec état : flux de données unidirectionnel.

Le modèle d'état définit un objet qui peut gérer son état afin que l'application puisse apporter les modifications correspondantes.

Pour faire simple, l'objet est avec état Tant que l'état de l'objet change, la page sera informée de mettre à jour l'élément de vue.

Trois étapes :

1. Identifiez quel élément de l'interface utilisateur est lié à l'objet correspondant.
2. Surveillez les changements dans l'état de l'objet.
3. Propager toutes les modifications aux vues liées.

Notez que le flux de données est à sens unique, c'est-à-dire que les modifications d'affichage n'affecteront pas l'état de l'objet.

{{ message }}

Page({

 data: {

  message: 'Hello MINA!'

 }

})

Il est si simple de compléter la liaison des vues et des données.

La simple mise à jour de la vue via les données ne suffit pas. Les opérations utilisateur entraînent la mise à jour de la vue. Comment synchroniser les données ?

La différence ici est que l'événement déclenché par l'utilisateur doit non seulement prendre en compte la mise à jour actuelle de l'élément d'interface utilisateur, mais également mettre à jour d'autres vues via l'élément actuel.

Ainsi, les données de la vue doivent être transmises à l'objet via des événements. Ce n'est que lorsque l'utilisateur exploite la vue que les données peuvent être obtenues et l'état de l'objet mis à jour.
Comme indiqué ci-dessous :

Qu'est-ce qu'un « événement » :

Les événements sont la méthode de communication de la couche de vue à la logique couche.

Les chaussures pour enfants qui veulent savoir pourquoi ils peuvent comprendre le flux de données unidirectionnel et bidirectionnel ne seront pas présentées ici.

Regardons l'impact entre les vues ?

Description du processus :

1. déclencher l'événement A
2. Dans la fonction de gestionnaire d'événement A, mettre à jour l'état de l'objet A et de l'objet B
3 En raison du changement d'état des objets A et B, informer les vues A et B de mettre à jour <. 🎜>

(Événement A), le bouton devient désactivé et ne peut pas être cliqué (Vue A), et la boîte d'attente apparaît (Vue B). Une partie du code pour est la suivante :

<view>
 
  <loading hidden="{{loadingHidden}}">正在登录...</loading>
 
  <button type="primary" size="default" disabled="{{disabled}}" bindtap="loginBtn">数据请求</button>
 
</view>

Page({
 
 data:{
 
  disabled: false,
 
  loadingHidden: true
 
 },
 
 //按钮事件
 
 loginBtn: function(event){
 
  //禁用按钮
 
  this.setData({disabled: true});
 
  //弹出正在登录框
 
  this.setData({loadingHidden: false});
 
 }
 
})
　　

Résumé :

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!