Bases du développement de mini-programmes - Liaison de données, partie 1 (7)

Comme écrit dans le didacticiel précédent, le framework d'applet WeChat divise le programme en une couche logique (fichier .js) et une couche de vue (fichier .wxml). Il s'agit d'une méthode de programmation courante qui sépare l'interface utilisateur et la logique. Le programme développé est plus flexible et plus facile à étendre.

Cette méthode de programmation résout généralement deux problèmes :

La couche UI répond aux changements de logique et de données dans la couche logique
La couche UI renvoie les opérations de l'utilisateur à la couche logique

De manière générale, la couche UI et la couche logique peuvent exposer les interfaces les unes aux autres. Cependant, dans un souci de flexibilité et d'évolutivité, une couche intermédiaire sera introduite pour la gestion, ce qui peut éviter la couche UI. . et dépendances directes entre les couches logiques.

Le framework d'applet WeChat est conçu sur la base de ce modèle. Le fichier .wxml décrit la couche d'interface utilisateur (le nom officiel de WeChat est view layer, et le didacticiel utilisera également . voir dans la future couche au nom), le fichier .js gère la couche logique et le framework WeChat sert de couche intermédiaire pour gérer les appels entre les deux.

Afin de mieux aider les développeurs à développer des applets WeChat, WeChat définit une syntaxe et des règles pour aider les développeurs à connecter la couche de vue et la couche logique.

Liaison de données

Afficher le contenu de la chaîne

//page.wxml
<text class="user-motto">{{motto}}</text>

//page.js
 data: {
    motto: &#39;Hello World&#39;,
  },

En intégrant "{{motto}}" dans la vue code de couche, l'interface affichera "Hello World"

Modifier le contenu de la chaîne

setData({
  motto:'Hello My World'
  })

Lorsque le code ci-dessus est exécuté, l'interface affichera "Bonjour mon Monde" "

Il y a deux points qui doivent être expliqués dans la partie ci-dessus :

1 : La couche de vue est intégrée avec {{motto}} au lieu de {{data.motto}}. Le framework WeChat définit la variable liée par la couche de vue à définir dans Dans l'attribut de données de l'objet Page, c'est-à-dire que si la variable doit être liée à la couche de vue, assurez-vous de définir l'attribut data dans

2 : En appelant l'objet Page. La méthode setData (objet Page prédéfini) peut mettre à jour les données de l'interface, mais définir directement les variables n'est pas valide , donc pour les variables liées à la couche de vue, utilisez toujours la méthode setData pour les définir Valeur de la variable

Image affichée
Sur la page d'accueil du programme générée par l'outil de développement par défaut , l'avatar de l'utilisateur s'affiche. Le code pertinent est le suivant :

//index.wxml
 <image class="userinfo-avatar" src="{{userInfo.avatarUrl}}" background-size="cover"></image>

//index.js
onLoad: function () {
    console.log(&#39;onLoad&#39;)
    var that = this
    //调用应用实例的方法获取全局数据
    app.getUserInfo(function(userInfo){
      //更新数据
      that.setData({
        userInfo:userInfo
      })
    })
  }

image L'attribut src de la balise est lié à la variable userInfo.avatarUrl, et est défini dans le en appelant la méthode onLoad. setDatauserInfo

Liaison d'attributs

peut lier des variables aux valeurs d'attribut​​du composant de vue (comme l'attribut

de la balise

ci-dessus ), image Notez que lors de la liaison à une propriété, vous devez ajouter une paire de guillemets doubles à l'extérieur. src

En plus d'afficher des images, la liaison d'attributs a de nombreuses fonctions.

src="{{userInfo.avatarUrl}}"

Données associées

Supposons que vous souhaitiez créer un programme de gestion des étudiants. La page utilise une liste pour afficher les données utilisateur lorsque l'utilisateur clique sur certaines informations sur les étudiants. les coordonnées de l'étudiant sont saisies sur les pages.

Lorsque l'événement de clic de l'utilisateur est obtenu, il est nécessaire de savoir sur quelles données de l'élève on a cliqué. À ce stade, l'identifiant de l'élève peut être lié à l'attribut ID du composant de vue pour l'association des données.

Contrôler le masquage/affichage de la vue

Vous pouvez lier des variables à l'attribut caché du composant de vue en modifiant la valeur de l'attribut caché du composant. , vous pouvez contrôler si le composant est affiché.

Contrôler les attributs

Comme mentionné ci-dessus, vous pouvez contrôler si le composant de vue est affiché via la liaison d'attributs, et vous pouvez également obtenir cette fonction en contrôlant les attributs.

En liant les données à l'attribut

//Page.wxml
<view wx:if="{{condition}}"> </view>

//Page.js
Page({
  data: {
    condition: true
  }
})

, vous pouvez contrôler si le composant est affiché.

Le framework fournit également les attributs wx:elif et wx:else, l'utilisation est la suivante :wx:if

Si vous souhaitez contrôler plusieurs composants de vue en même temps, vous pouvez utiliser

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

block wx:if

<block wx:if="{{true}}">
  <view> view1 </view>
  <view> view2 </view>
</block>

De même, vous devez également ajouter des guillemets doubles lors du contrôle de la liaison d'attribut

wx:if vs caché

De manière générale, wx :if a un coût de commutation plus élevé et Hidden a un coût de rendu initial plus élevé. Par conséquent, si des changements fréquents sont nécessaires, il est préférable d'utiliser Hidden

, et s'il est peu probable que les conditions changent au moment de l'exécution, wx:if est préférable.

Mots clés

Le framework fournit deux mots clés pour représenter Vrai
et Faux : vrai de type booléen, représentant la vraie valeur.
true : type booléen false, représentant une valeur fausse.
falseExemple de code

<checkbox checked="{{false}}"> </checkbox>

Remarque spéciale : n'écrivez pas directement check="false" Le résultat du calcul est une chaîne, qui est convertie en type booléen pour représenter un. vraie valeur.

Pour plus d'informations sur la liaison de données, veuillez rester à l'écoute

Bases du développement de mini-programmes - Liaison de données (8)

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!