Modèle de programme WeChat Mini
Modèle
WXML fournit des modèles (Modèle), dans lesquels des extraits de code peuvent être définis puis utilisés à différents endroits. Le format et les données peuvent être garantis identiques.
1-Définir le modèle
Utilisez la balise `` pour définir le modèle, nommer le nom du modèle tempName et attribuer au nom de l'attribut. À l’intérieur de la balise, définissez la structure du modèle. Comme suit :
<!-- template.wxml -->
<!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>2-Utilisez des modèles
Utilisez la balise Si vous souhaitez utiliser les données du fichier js, vous devez ajouter l'attribut data. Comme suit :
<!-- template.wxml -->
<template is="msgItem" data="{{...item}}"/>
<template is="msgItem" data="{{...item}}"/>
<template is="msgItem" data="{{...item}}"/>
此时在页面上就会重复显示三次相同的信息。
data中的数据，来源于js文件，如下：
<!-- template.js -->
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})L'attribut 3-is
cet attribut peut non seulement pointer statiquement vers le modèle rendu, mais également utiliser la syntaxe Moustache pour déterminer dynamiquement le modèle spécifique. le rendu nécessite quel modèle. Comme suit :
<!-- template.wxml -->
// templates
<template name="odd">
<view> odd </view>
</template>
<template name="odd">
<view> even </view>
</template>
// is属性使用Mustache语法动态渲染template
<block wx:for="{{[1, 2, 3, 4,5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}" />
</block>Le code ci-dessus s'affichera impair ou pair sur la page selon les conditions
Référence à 4 modèles
Comme ci-dessus, le modèle est défini et référencé dans le même fichier wxml, mais la définition et la référence du modèle peuvent être séparées. Autrement dit, le modèle est défini dans un fichier et le modèle défini peut être utilisé dans un ou plusieurs autres fichiers wxml.
Pour référencer un modèle à partir d'un fichier externe, utilisez la balise import src="templateUrl" /> Utilisez également l'attribut is pour pointer vers l'étiquette à référencer.
Par exemple, le répertoire est le suivant :
-pages
|--index
|--index.js
|--index.json
|--index.wxml
|--index.wxss
|--template
|--template.js
|--template.json
|--template.wxml
|--template.wxssPour utiliser le modèle défini dans template dans index.wxml, vous devez d'abord importer le modèle dans index :
<!-- index.wxml -->
<import src="../template/template.wxml"
<template is="msgItem" data={{...indexData}}
// 使用的是自己js文件中的数据Faites attention à la portée de l'importation, qui fait uniquement référence au modèle dans le fichier cible. Par exemple : C importe B, B importe A, en C vous pouvez utiliser le modèle défini par B, en B vous pouvez utiliser le modèle défini par A, mais C ne peut pas utiliser le modèle défini par A.
Merci d'avoir lu, j'espère que cela pourra vous aider, merci pour votre soutien à ce site !
Pour des explications plus détaillées sur le modèle de programme WeChat Mini et des exemples simples, veuillez faire attention au site Web PHP chinois !
Comment intercepter les appels harcelants
Oracle effacer les données du tableau
Techniques couramment utilisées par les robots d'exploration Web
Diagramme de topologie de réseau
Quel système oa est le meilleur ?
Que dois-je faire si mon iPad ne peut pas être chargé ?
Avantages de pycharm
Comment résoudre javascriptvoid(o)
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
