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

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

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

src="{{userInfo.avatarUrl}}"

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.

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é.

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.

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

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

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

<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>

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

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>

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

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!