La couche d'affichage WXML de l'applet WeChat lie les données, les modèles, la logique...

L'article précédent a présenté la structure MVC du mini programme :

page.js est la couche de contrôle (C), également appelée couche de logique métier

l'attribut de données dans la page ; .js, c'est la couche de modèle de données (M) ;

page.wxml est la couche de présentation (V) ;

page.wxss est css, ce qui améliore l'effet de la couche de présentation.

Modifiez l'attribut de données (M) via la couche de logique métier (C) et affichez-le dans la couche de présentation (V).

C'est le modèle de conception MVC.

1. Liaison de données

Jetez d'abord un œil au diagramme de structure du processus MVC de la page Page

Si une variable est définie dans les données, telle que

Page({
    data:{
        title: '小程序实战教程',
        desc: '视图层—WXML'
    }
})

, transmettez {{title} dans la page }, vous pouvez afficher l'effet, comme le montre l'animation suivante :

2. Syntaxe de liaison de données couramment utilisée

2.1, contenu

{{ message }}

2.2, attributs du composant (doivent être entre guillemets doubles)

Identique au contenu

2.3, attribut de contrôle

2.4, mot-clé (requiert { { }})

true : vrai de type booléen, représentant la vraie valeur.

false : false de type booléen, représentant une valeur fausse.

Remarque : n'écrivez pas directement vérifié="false", c'est calcul Le résultat est une chaîne convertie en type booléen pour représenter une valeur vraie.

2.5, opération ternaire

2.6, opérations arithmétiques
{{a b}} {{c} } d

2.7, opération de chaîne
{{"bonjour" nom} }< ;/view>

2.8, opération du chemin de données

Pour le type d'objet, vous pouvez transmettre un objet .key obtient la valeur ;

Pour le type de tableau, vous pouvez obtenir la valeur via l'index d'indice, l'index commence à 0

{{object.key}} {{ array[0]}}

Code et rendus :

3. Syntaxe de rendu logique
3.1, jugement logique wx:if

ou

1
2
3

bloquer wx:if

;/view>

3.2, wx:for

tableau par défaut Le Le nom de variable en indice de l'élément actuel est par défaut index, et le nom de variable de l'élément actuel dans le tableau est par défaut item. Peut également être spécifié via wx:for-index et wx:for-item.

{{index}} : {{item.message}}

Spécifier

{{idx}} : {{itemName.message}}

bloquer wx:pour

index}} :
{{item}}

3.3, wx:key

Si la position des éléments dans la liste change dynamiquement ou si de nouveaux éléments sont ajoutés à la liste et que vous souhaitez que les éléments de la liste conservent leurs propres caractéristiques et l'état (tels que le contenu d'entrée de , l'état sélectionné de ), vous devez utiliser wx:key pour spécifier l'identifiant unique de l'élément dans la liste.

La valeur de wx:key est fournie sous deux formes

1) Chaîne, représentant une certaine propriété de l'élément dans le tableau de la boucle for, la valeur de la propriété doit être une liste. La seule chaîne ou nombre dans la chaîne et ne peut pas être modifié dynamiquement.

2) Le mot-clé réservé *this représente l'élément lui-même dans la boucle for. Cette représentation nécessite que l'élément lui-même soit une chaîne ou un nombre unique

.

Lorsque des modifications de données déclenchent le nouveau rendu de la couche de rendu, les composants avec des clés seront corrigés. Le framework garantira qu'ils sont réorganisés plutôt que recréés pour garantir que les composants conservent leur propre état et améliorent l'efficacité du rendu de la liste. .

id}}

Voir photo

4. Modèle

WXML fournit des modèles, qui sont appelés à différents endroits. Obtenez l'effet de réutilisation.

Par balise