Analyse der WeChat-Applet-Vorlage

In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von WeChat Mini-Programmvorlagen vorgestellt. Ich hoffe, dass dieser Artikel jedem helfen kann, solche Funktionen zu verstehen und zu beherrschen.

WeChat Mini Verwendung von Programmvorlagen

Vorwort

Das WeChat-Miniprogramm bietet die Verwendung von Vorlagen, das heißt, dieselben Abschnitte können für die Code-Interoperabilität verwendet werden, wie unten gezeigt Für Renderings , können Sie eine Vorlage verwenden.

Rendering

1 Vorlagendefinition

Das Wichtigste an einer Vorlage ist der Name der Vorlage, d

<template name="postItem">
 <view class=&#39;post-container&#39;>
  <view class=&#39;post-author-date&#39;>
   <image class=&#39;post-author&#39; src=&#39;{{avatar}}&#39;></image>
   <text class=&#39;post-date&#39;>{{date}}</text>
  </view>
  <text class=&#39;post-title&#39;>{{title}}</text>
  <image class=&#39;post-image&#39; src=&#39;{{imgSrc}}&#39;></image>
  <text class=&#39;post-content&#39;>{{content}}</text>
  <view class=&#39;post-like&#39;>
   <image class=&#39;post-like-image&#39; src=&#39;/images/icon/chat.png&#39;></image>
   <text class=&#39;post-link-text&#39;>{{collection}}</text>
   <image class=&#39;post-like-image&#39; src=&#39;/images/icon/view.png&#39;></image>
   <text class=&#39;post-link-text&#39;>{{reading}}</text>
  </view>
 </view>
</template>

2. Vorlagen verwenden

Vorlagendateien einführen

Vorlagendateien mit den Namensdaten verwenden Wenn sich die Vorlagendefinition innerhalb der Schleife befindet, können Sie alle Daten im Element kacheln. Auf diese Weise müssen Sie nicht „item.xx“ in die Schleife schreiben Vorlage. Sie können die Attribute einfach direkt in das Element schreiben. Sie müssen die Vorlage WXML-Datei

WXSS-Datei verwenden 🎜>

 .post-container {
 display: flex;
 flex-direction: column;
 margin-top: 20rpx;
 margin-bottom: 40rpx;
 background-color: white;
 border-bottom: 1px solid #ededed;
 border-top: 1px solid #ededed;
 padding-bottom: 5px;
}
.post-author-date {
 margin: 10rpx 0 20rpx 10rpx;
}
.post-author {
 width: 60rpx;
 height: 60rpx;
 vertical-align: middle;
}
.post-date {
 margin-left: 20rpx;
 vertical-align: middle;
 margin-bottom: 5px;
 font-size: 26rpx;
}
.post-title {
 font-size: 34rpx;
 font-weight: 600;
 color: #333;
 margin-bottom: 10px;
 margin-left: 10px;
 margin-right: 10px;
}
.post-image {
 margin-left: 16px;
 width: 100%;
 height: 340rpx;
 margin: auto 0;
 margin-bottom: 15rpx;
}
.post-content {
 color: #666;
 font-size: 28rpx;
 margin-bottom: 20rpx;
 margin-left: 20rpx;
 margin-right: 20rpx;
 letter-spacing: 2rpx;
 line-height: 40rpx;
}
.post-like {
 font-size: 13px;
 flex-direction: row;
 line-height: 16px;
 margin-left: 16px;
 color: gray;
}
.post-like-image {
 height: 16px;
 width: 16px;
 margin-right: 8px;
 vertical-align: middle;
}
.post-link-text {
 vertical-align: middle;
 margin-right: 20px;
}

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er wird für das Lernen aller hilfreich sein. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website!

Verwandte Empfehlungen:

Einführung in das WeChat Mini-Programmdiagramm-Plug-in (wx-charts)

Auswahl in WeChat Miniprogramm Einfache Verwendung von Komponenten

WeChat-Applet-Entwicklung zur Implementierung einer benutzerdefinierten Toast-Popup-Box

Das obige ist der detaillierte Inhalt vonAnalyse der WeChat-Applet-Vorlage. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!