So verwenden Sie die Vorlage des WeChat-Applets

Was ich Ihnen dieses Mal zeigen werde, ist, wie Sie die Vorlage des WeChat-Applets verwenden. Das WeChat-Applet bietet die Verwendung einer Vorlage, das heißt, derselbe Abschnitt kann für die Code-Interoperabilität verwendet werden, wie in der Darstellung unten gezeigt. Sie können eine Vorlage verwenden. Dieser Artikel gibt Ihnen eine gute Analyse.

Vorlagendefinition

Das Wichtigste an einer Vorlage ist der Name der Vorlage, also „“

Das Folgende ist der Beispiel-Vorlagencode

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>

wxss-Datei

.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;
}

Vorlagendatei einführen

Vorlagendatei verwenden mit ist Der Name, wenn Vorlagendefinitionsdaten verwendet werden, enthält die Daten in der Schleife Wenn es mit „…“ ausgedrückt wird, können alle Daten im Element reduziert werden. Auf diese Weise ist es nicht erforderlich, „item.xx“ in die Vorlage zu schreiben, sondern nur die Attribute direkt in das Element zu schreiben. Um die WXML-Datei des Vorlagenprogramms

<import src="post-item/post-item-template.wxml" />
<view>
 <block wx:for="{{postList}}" wx:for-item="item">
   <template is="postItem" data="{{...item}}" />
 </block>
</view>

WXSS-Datei

@import 'post-item/post-item-template.wxss';

zu verwenden, glaube ich, dass Sie die Methode nach dem Lesen der obigen Einführung beherrschen. Weitere spannende Informationen finden Sie hier Verwandte Artikel auf der chinesischen PHP-Website!

Verwandte Lektüre:

Detaillierte Erklärung der vue.js-Syntax und allgemeine Anweisungen

So verwenden Sie JS zum Deaktivieren von Schaltflächen Und aktivieren Sie

So übergeben Sie Parameter von der übergeordneten zur untergeordneten Komponente in vue.js

Das obige ist der detaillierte Inhalt vonSo verwenden Sie die Vorlage des WeChat-Applets. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!