Explication détaillée et exemples simples du modèle de mini-programme WeChat

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 `82570eb81cc0273be68dae335c9f8afa21c97d3a051048b8e55e3c8f199a54b2` 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 7733932d10bb874b734d21e38bc23d19 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: &#39;this is a template&#39;,
   time: &#39;2016-09-15&#39;
  }
 }
})

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 ? &#39;even&#39; : &#39;odd&#39;}}" />
</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.wxss

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