Detailed explanation of WeChat applet template template

WeChat mini program provides the use of template, that is, the same section can be used for code interoperability, as shown in the rendering below, you can use template. This article mainly introduces the relevant information on the use of WeChat mini program templates. I hope this article can help everyone understand and master such functions. Friends in need can refer to it.

Usage of WeChat Mini Program template

Rendering

1. Template The most important thing in defining a

template is the name of the template, which is ""

The following is the example template code

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

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

2. Template use

Introduce the template file

Use the template file with is. The name data when using the template definition is used for the data in the loop. If "..." means, you can tile out all the data in the item, so you don't need to write "item.xx" in the template, just write the attributes in the item directly. You need to use the template's program wxml file.

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

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

Related recommendations:

What to do if the WeChat applet fails to pass the review

WeChat applet implements image component picture adaptive width ratio example sharing

WeChat applet implements following menu effect and loop nested loading data example detailed explanation

The above is the detailed content of Detailed explanation of WeChat applet template template. For more information, please follow other related articles on the PHP Chinese website!