Analysis of WeChat applet template-Mini Program Development-php.cn

Analysis of WeChat applet template

不言

Release： 2018-06-23 16:53:03

Original

2719 people have browsed it

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

WeChat mini program template usage

Preface

WeChat mini program provides template usage, that is, the same section can be used for code interoperability, as shown below For renderings, you can use template.

Rendering

1. Template definition

The most important thing about a template is the name of the template, that 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>

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

2. Template use

Introduce the template file

Use the template file with is. The name data when using the template definition is inside the loop. If the data is represented by "...", 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. You need to use template. 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>

Copy after login

wxss file

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

Copy after login

The above is the entire content of this article, I hope it will be helpful to everyone's learning. For more related content, please pay attention to the PHP Chinese website!

Related recommendations:

Introduction to WeChat mini program chart plug-in (wx-charts)

picker in WeChat mini program Simple usage of components

WeChat applet development to implement custom Toast pop-up box

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