Heim > Web-Frontend > js-Tutorial > So verwenden Sie die Vorlage des WeChat-Applets

So verwenden Sie die Vorlage des WeChat-Applets

php中世界最好的语言
Freigeben: 2018-05-25 10:12:23
Original
3813 Leute haben es durchsucht

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

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>
Nach dem Login kopieren

WXSS-Datei

@import &#39;post-item/post-item-template.wxss&#39;;
Nach dem Login kopieren

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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage