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 „`, 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 , 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: 'this is a template',
time: '2016-09-15'
}
}
})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 ? 'even' : 'odd'}}" />
</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.wxssUm 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!
Der Unterschied zwischen Linux und Windows
Was ist mit dem Absturz von Douyin los?
jquery animieren
Einführung in die Hauptarbeitsinhalte des Backends
Eine vollständige Liste der Tastenkombinationen für Ideen
Eine Sammlung häufig verwendeter Computerbefehle
Warum schlägt die Win10-Aktivierung fehl?
Was ist Weidian?
