Ausführliche Erläuterung der WeChat-Applet-Vorlage-Mini-Programmentwicklung-php.cn

Ausführliche Erläuterung der WeChat-Applet-Vorlage

小云云

Freigeben： 2018-05-15 10:16:34

Original

3592 Leute haben es durchsucht

Das WeChat-Miniprogramm ermöglicht die Verwendung von Vorlagen, d. h. die gleichen Abschnitte können für die Code-Interoperabilität verwendet werden, wie in der folgenden Darstellung gezeigt, Sie können Vorlagen verwenden. In diesem Artikel werden hauptsächlich relevante Informationen zur Verwendung von WeChat-Miniprogrammvorlagen vorgestellt. Ich hoffe, dass dieser Artikel jedem helfen kann, solche Funktionen zu verstehen und zu beherrschen.

Verwendung der WeChat Mini-Programmvorlage

Rendering

1 Das Wichtigste bei der Definition 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>

Nach dem Login kopieren

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

Nach dem Login kopieren

2. Verwendung von Vorlagen

Einführen der Vorlagendatei

Verwenden Sie die Vorlagendatei mit is . Bei Verwendung der Vorlagendefinition befinden sich die Namensdaten innerhalb der Schleife. Wenn die darin enthaltenen Daten durch „…“ dargestellt werden, müssen Sie nicht „item“ schreiben .xx" in der Vorlage. Sie können die Attribute einfach direkt in das Element schreiben. Sie müssen die Vorlage Programm-WXML-Datei

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

Nach dem Login kopieren

WXSS-Datei

@import &#39;post-item/post-item-template.wxss&#39;;

Nach dem Login kopieren

Verwandte Empfehlungen verwenden:

Was tun, wenn das WeChat-Applet die Prüfung nicht besteht?

Teilen von Beispielen für das WeChat-Applet, das das adaptive Bildbreitenverhältnis von Bildkomponenten implementiert

Detaillierte Erläuterung von Beispielen für das WeChat-Applet, das die folgenden Menüeffekte und das schleifenverschachtelte Laden von Daten implementiert

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