Résumé de la syntaxe du modèle WXML du mini programme WeChat

Cet article vous apporte des connaissances pertinentes sur le WeChat Mini Program, qui présente principalement le contenu pertinent sur la syntaxe des modèles WXML, y compris la liaison de données, la liaison d'événements, le rendu conditionnel, le rendu de liste et d'autres problèmes. j'espère que cela sera utile à tout le monde.

【Recommandations d'apprentissage associées : Tutoriel d'apprentissage du mini programme】

WXML Syntaxe du modèle- Liaison de données

1.Données de base principes de liaison

① Définition des données dans données ② Utilisation des données dans

WXML 2. est dans le .js

fichier correspondant à la page, définissez simplement les données dans l'objet

data  :

3 Moustache Format grammatical Liez les données dans atData à la page à restituer, et utilisez

mustache

grammaire (deux crochets) pour envelopper les variables. Semblable à l'expression d'interpolation dans vue, le format de syntaxe est :

4 Scénarios d'application de Moustache syntaxe Lier le contenu Lier les attributs . Opération (Opérations ternaires , opérations arithmétiques, etc.)

5.

6.

                                                                                                                                                                    ​

Opération ternaire

Les données sur la page

sont les suivantes :

La structure de la page est la suivante :

8.

WXML

Syntaxe du modèle

-

Liaison d'événement :

1. un événement Grâce à des événements, le comportement de l'utilisateur dans la couche de rendu peut être renvoyé à la couche logique pour le traitement métier.

2. Événements couramment utilisés dans les mini-programmes

Méthode de liaison Description de l'événement

appuyez

bindtap

ou lier :appuyez

Partez immédiatement après avoir touché le doigt, semblable à

HTML cliquez sur event

input

bindinput ou bind:input

Événement d'entrée de la zone de texte

changement

bindchange ou bind:change

Déclenché lorsque le statut change

3. Liste d'attributs de l'objet événement

Lorsque le rappel d'événement est déclenché, un objet événement event sera reçu. Ses attributs détaillés sont affichés dans le tableau suivant :

Propriété	Type	Description
type	Chaîne	Type d'événement
timeStamp	Integer	Le nombre de millisecondes écoulées depuis l'ouverture de la page jusqu'à l'événement a été déclenché
target	Object	Une collection de certaines valeurs de propriété du composant qui a déclenché l'événement
currentTarget	Objet	Une collection de quelques valeurs d'attribut du composant actuel
detail	Object	Informations supplémentaires
touches	Array	Événement tactile, tableau d'informations sur les points de contact restant actuellement à l'écran
changedTouches	Array	Événements tactiles, tableau des informations sur les points de contact actuellement modifiées

4. La différence entre target et currentTarget

currentTarget est l'événement current Le composant lié . Un exemple est le suivant : Lorsque vous cliquez sur le bouton interne, l'événement de clic se propage vers l'extérieur à la manière d'une bulle

, et déclenche également le gestionnaire d'événement

tap

du externe. voir . À ce moment, pour la vue externe :

1.target pointe vers le composant source qui a déclenché l'événement, donc e.target

est interne Le bouton Le composant 2.currentTarget pointe vers le composant qui déclenche actuellement l'événement, donc e.currentTarget

est la view composant actuelle 5 . Le format syntaxique de

bindtap

Dans le mini programme, il n'y a pas d'événement onclick mouse click dans

HTML

, mais le clic de souris. l'événement est transmis appuyez sur Événement pour répondre au comportement tactile de l'utilisateur. ①Grâce à bindtap

, vous pouvez lier tap des événements tactiles à des composants, la syntaxe est la suivante : ②

Dans le

.js de la page

La fonction de traitement d'événement correspondante est définie dans le fichier, et les paramètres d'événement sont reçus via le paramètre formel

event

(généralement est abrégé en e) :

6. Attribuez les données dans data dans la fonction de gestionnaire d'événements

En appelant this.setData(dataObject ) méthode, vous pouvez donner le page Les données dans data sont réaffectées, l'exemple est le suivant :

                                        Le paramètre d'événement passant dans le mini programme est assez particulier,

Vous ne pouvez pas passer paramètres au gestionnaire d'événements lors de la liaison de l'événement

. Par exemple, le code suivant ne fonctionnera pas correctement :

car l'applet traitera les valeurs d'attribut de bindtap comme des noms d'événements, ce qui équivaut à appeler un événement nommé btnHandler(123)

fonction de gestion des événements.

Vous pouvez fournir des paramètres d'attribut personnalisés

data-* pour les composants, où * représente le nom du paramètre . L'exemple de code est le suivant :

Enfin. : 1 info sera analysé comme paramètre

nom

2 valeur

2

sera analysé comme valeur de paramètre Dans la fonction de traitement d'événements, la valeur de

paramètre spécifique

peut être obtenue via event.target.dataset.nom du paramètre, exemple de code As suit :

8. Le format de syntaxe de bindinput

dans l'applet, répondez à la zone de texte via l'événement input

Participez à l'événement, le format de grammaire est le suivant : ① Bindinput peut lier l'événement d'entrée pour la zone de texte :

②

traitement des dossiers Fonction :

9. Implémenter la synchronisation des données entre la zone de texte et données Étapes de mise en œuvre :

①

Définir les données

②

Structure de rendu

③

Style d'embellissement

④

binding input

Event Handler Données de définition:

Rendaring Structure:

Style d'embellissement:

Liaison input Gestionnaire d'événements :

WXML

Syntaxe du modèle- Rendu conditionnel  :  1.wx:if

Dans le mini-programme, utilisez wx:if="{{ condition}}" Pour déterminer si le bloc de code doit être rendu : ​​​​​ ​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​Vous pouvez également utiliser wx:elif

et

wx:else

pour ajouter else Jugement:​​​​ ​​Si vous souhaitez contrôler l'affichage et le masquage de plusieurs composants à la fois

, vous pouvez utiliser une balise

pour envelopper plusieurs composants et utiliser

wx:if pour contrôler les attributs sur le tag, les exemples sont les suivants :

      

Remarque : ne faites aucun rendu dans la page. 3. caché                                                                                                                                                                    Dans le mini programme, utilisez directement hidden="{{

condition

}}" peut également contrôler l'affichage et le masquage des éléments :

            4. wx:if et

caché

   ①Les méthodes de fonctionnement sont différentes 1 wx:if avec Créer et supprimer dynamiquement éléments , contrôlez l'affichage et le masquage des éléments2 cachés

Contrôlez les éléments en changeant de style

( affichage : aucun/bloc ; ) Afficher et masquer ② U suggestions sages

1 Lorsque vous changez fréquemment, il est recommandé d'utiliser

caché

2 Les conditions de contrôle sont complexes Quand , c'est recommandé d'utiliser wx:if

avec wx:elif、wx:else Basculer entre afficher et masquer​​​​​ ​via wx:for peut être basé sur le tableau spécifié, boucle pour restituer les structures de composants répétées, l'exemple de syntaxe est le suivant :    

             Par défaut, l'index de l'élément de boucle actuel est représenté par index l'élément de boucle actuel est représenté par item  ;

2. Spécifiez manuellement l'index et le nom de la variable de l'élément actuel*

1Utilisez wx:for-index peut être spécifié L'indice de l'élément de boucle actuel Le nom de la variable de

2 peut être spécifié en utilisant wx:for-item Le nom de la variable de élément actuel est le suivant :

3 . L'utilisation de wx:key

est similaire à :key dans le rendu de liste Vue

Lors de l'implémentation du rendu de liste dans l'applet, il est également recommandé d'utiliser la liste rendue. L'élément spécifie une valeur

key unique, améliorant ainsi l'efficacité du rendu . L'exemple de code est le suivant : .

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!