Ausführliche Erklärung und einfache Beispiele der WeChat Mini-Programmvorlage

WeChat Mini-Programmvorlage

Vorlage

WXML stellt Vorlagen (Template) zur Verfügung, in denen Codeschnipsel definiert und dann an verschiedenen Stellen verwendet werden können. Es kann garantiert werden, dass das Format und die Daten identisch sind.

1-Definieren Sie die Vorlage

Verwenden Sie das Tag „82570eb81cc0273be68dae335c9f8afa21c97d3a051048b8e55e3c8f199a54b2`, um die Vorlage zu definieren, benennen Sie den Vorlagennamen tempName und weisen Sie ihn zu es dem Attribut name zuordnen. Definieren Sie innerhalb des Tags die Vorlagenstruktur. Wie folgt:

<!-- template.wxml -->
<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
  <text> {{index}}: {{msg}} </text>
  <text> Time: {{time}} </text>
 </view>
</template>

2-Vorlagen verwenden

Verwenden Sie das Tag 7733932d10bb874b734d21e38bc23d19, wenn Sie eine Vorlage verwenden müssen. Wenn Sie die Daten in der js-Datei verwenden möchten, müssen Sie das Datenattribut hinzufügen. Wie folgt:

<!-- 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;
  }
 }
})

3-is-Attribut

is-Attribut kann nicht nur statisch auf die gerenderte Vorlage verweisen, sondern auch die Mustache-Syntax verwenden, um das Spezifische dynamisch zu bestimmen Das Rendern benötigt welche Vorlage. Wie folgt:

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

Der obige Code zeigt je nach den Bedingungen ungerade oder gerade auf der Seite an

4-Vorlagen-Referenz

Wie Oben wird die Vorlage in derselben WXML-Datei definiert und referenziert, die Definition und Referenz der Vorlage können jedoch getrennt werden. Das heißt, die Vorlage ist in einer Datei definiert und die definierte Vorlage kann in einer oder mehreren anderen WXML-Dateien verwendet werden.
Um eine Vorlage aus einer externen Datei zu referenzieren, verwenden Sie das Tag import src="templateUrl" /> Verwenden Sie außerdem das Attribut is, um auf die Bezeichnung zu verweisen, auf die verwiesen werden soll.
Das Verzeichnis lautet beispielsweise wie folgt:

-pages
  |--index
    |--index.js
    |--index.json
    |--index.wxml
    |--index.wxss
  |--template
    |--template.js
    |--template.json
    |--template.wxml
    |--template.wxss

Um die in template in index.wxml definierte Vorlage zu verwenden, müssen Sie die Vorlage zuerst in index importieren:

<!-- index.wxml -->
<import src="../template/template.wxml"
<template is="msgItem" data={{...indexData}}
// 使用的是自己js文件中的数据

Achten Sie auf den Importumfang, der sich nur auf die Vorlage in der Zieldatei bezieht. Zum Beispiel: C importiert B, B importiert A, in C können Sie die von B definierte Vorlage verwenden, in B können Sie die von A definierte Vorlage verwenden, aber C kann die von A definierte Vorlage nicht verwenden.

Vielen Dank fürs Lesen, ich hoffe, es kann Ihnen helfen, vielen Dank für Ihre Unterstützung dieser Website!

Ausführlichere Erklärungen der WeChat Mini-Programmvorlage und einfache Beispiele finden Sie auf der chinesischen PHP-Website!