How to use the template of WeChat applet-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to use the template of WeChat applet

May 25, 2018 am 10:12 AM

template use Applets

This time I will show you how to use the template of the WeChat applet. The WeChat applet 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 will give you a good analysis.

Template definition

The most important thing about the template is the name of the template, which is ""

The following is the example template code

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

Copy after login

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

Copy after login

Introducing the template file

Use the template file with is. The name data when using the template definition is the data in the loop. If you use "..." to express it, you can tile out all the data in the item. In this way, you don't need to write "item.xx" in the template. You can just write the attributes in the item directly. To use the template program wxml file

&lt;import src=&quot;post-item/post-item-template.wxml&quot; /&gt;
&lt;view&gt;
 &lt;block wx:for=&quot;{{postList}}&quot; wx:for-item=&quot;item&quot;&gt;
   &lt;template is=&quot;postItem&quot; data=&quot;{{...item}}&quot; /&gt;
 &lt;/block&gt;
&lt;/view&gt;

Copy after login

wxss file

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

Copy after login

I believe you have mastered the method after reading the above introduction. For more exciting information, please pay attention to other related articles on the PHP Chinese website!