ps：上一节我们对网络数据的请求和动态绑定行了大概的讲解和说明，这一节，我们重点讲动态首页Home的template的使用
传送门：
j：登录Login页面的实现与讲解
重点
这一节的重点是为大家讲解“Template（模板）”这个概念
模板是为了我们更好地封装我们公用的视图view；方便我们在任何一个使用到的页面中，直接引入使用；帮助我们更好地减少代码的书写量。增加代码的重复使用率。
抛出问题：
首先关于动态首页，大家可以看看实现的效果图，
动态首页.png
开始编写如下代码
<view class="dynamicListContainer">
<view class="dynamic1">
<image>头像</image>
<text>姓名</text>
<text>日期</text>
<text>内容</text>
<image>图片</image>
<image>点赞图标</image>
<text>点赞数量</text>
<image>评论图标</image>
<text>评论数量</text>
</view>
<view class="dynamic2">
<image>头像</image>
<text>姓名</text>
<text>日期</text>
<text>内容</text>
<image>图片</image>
<image>点赞图标</image>
<text>点赞数量</text>
<image>评论图标</image>
<text>评论数量</text>
</view>
.
.
.
// 有几个就写多少个
</view>
抛出问题：
代码量繁重，如果后续中出现诸如此类的样式，那么我们是否去复制粘贴，继续这样搞呢，我们猜想下，是否我们能做到，我们猜想下，用以下的代码就能实现呢
<view class="dynamicListContainer">
<模板 id：1 此处是模板代码，而且就那么一行>
<模板 id：2 此处是模板代码，而且就那么一行>
.
.
.
// 有几个就写多少个
</view>
结论：
首先关于动态首页，大家可以看到，所谓的帖子，都是一个个相同的样式（头像+名字+日期+内容+图片+点赞+评论）的帖子组成的帖子列表，那么对于这些相同样式的view，我们是否可以制作一个模板来提供使用，以至于之后所有要用到此种样式的view，我们都可以直接套用此模板呢。
对于一些重复样式的view，我们建议使用“Template”的模板来进行封装。
准备工作
首先我们创建一个template的文件夹，专门用来存在项目中的模板文件，这里我们创建好“dynamicTemplate”的模板文件（）
模板文件
Template的介绍：
注意：模板文件只有.wxml(布局文件)和.wxss(样式文件)，在模板中不做任何的逻辑处理，故此次不需要.js和.json文件
dynamic-template.wxml
//假数据布局
//name是必须要的，作为引用的唯一标志符
<template name="dynamicTemplate">
<view class="dynamicContainer">
<view class="dynamicTopView">
<image class="userAvatar" mode="aspectFill" src = "/images/home.avatar.png"></image>
<view class="userNick-postDate">
<text class="userNick" >名字</text>
<text class="postDate">2019-01-01</text>
</view>
<image src="/images/home/moreIcon.png" class="moreIcon" ></image>
</view>
<text class="contentText"></text>动态内容
<image class="contentImg" mode="aspectFill" src="/images/home/basePic2.jpg"></image>
<view class="dynamicBottomView">
<image class="favoriteIcon" src="/images/home/xin.png" mode="aspectFit" ></image>
<text class="favoriteCount">11</text>
<image class="commentIcon" src="/images/home/pinglun.png"></image>
<text class="commentCount">22</text>
</view>
<view class="bottomLine"></view>
</view>
</template>
dynamic-template.wxss
.dynamicContainer {
display: flex;
flex-direction: column;
padding: 10rpx 0;
}
.dynamicTopView {
display: flex;
flex-direction: row;
}
.userAvatar {
width: 80rpx;
height: 80rpx;
border-radius: 40rpx;
vertical-align: middle;
background-color: lightgray;
}
.userNick-postDate {
margin-left: 20rpx;
display: flex;
flex-direction: column;
justify-content: center;
}
.userNick {
font-size: 28rpx;
color: #333;
}
.postDate {
font-size: 20rpx;
color: lightgray;
}
.contentText {
font-size: 28rpx;
color: #555;
margin-top: 20rpx;
}
.contentImg {
margin-top: 20rpx;
width: 200rpx;
height: 200rpx;
border-radius: 8rpx;
margin-bottom: 20rpx;
background-color: lightgray;
}
.dynamiBottomView {
margin-top: 20rpx;
height: 80rpx;
display: flex;
flex-direction: row;
}
.dynamicBottomView image {
vertical-align: middle;
}
.favoriteIcon {
width: 28rpx;
height: 24rpx;
}
.commentIcon {
width: 28rpx;
height: 30rpx;
}
.dynamicBottomView text {
font-size: 22rpx;
color: #888;
vertical-align: middle;
padding-left: 10rpx;
}
.commentIcon {
margin-left: 20rpx;
margin-top: 2rpx;
}
.bottomLine {
height: 2rpx;
background-color:#f0f0f0;
margin: 20rpx 0rpx 10rpx 0rpx;
}
.moreIcon{
width: 40rpx;
height: 40rpx;
vertical-align: middle;
margin-left: 440rpx;
margin-top: 10rpx;
}
home.wxml
//此处需要引用template布局文件的路径，这样才能使用
<import src='/templates/dynamicTemplate/dynamic-template.wxml' />
<view class="innerContainer">
<template is="dynamicTemplate" ></template>
</view>
home.wxss
//此处需要引用template的样式文件的路径，这样才能配套使用
@import '/templates/dynamicTemplate/dynamic-template.wxss';
.innerContainer {
margin: 0 30rpx 20rpx 30rpx;
display: flex;
flex-direction: column;
}
编译运行：
image.png
我们此处来用一个循环来加载多条假数据
<import src='/templates/dynamicTemplate/dynamic-template.wxml' />
<block wx:for = "{{[1,2,3]}}" wx:for-item = "dynamic">
<view class="innerContainer">
<template is="dynamicTemplate" ></template>
</view>
</block>
编译：
image.png
我们将此模板引入到上节课开发的项目中，我们修改home.wxml文件
home.wxml
<import src='/templates/dynamicTemplate/dynamic-template.wxml' />
<view>
<view class="innerContainer">
<block wx:for = "{{dynamicList}}" wx:for-item = "dynamic">
<template is="dynamicTemplate" data="{{...dynamic}}"></template>
</block>
<view>
</view>
重点说明：
<template is="dynamicTemplate" data="{{...dynamic}}"></template>
此处用...dynamic，相当于是将
{
"":"",
.
.
.
}的内容平铺展开，
所以我们在template中，进行数据绑定的时候，则不需要再以dynamic.user_nick的名称进行绑定，只要写dynamic.user_nick
修改前：
<text class="userNick" >{{dynamic.nick_name}}</text>
修改后：
<text class="userNick">{{nick_name}}</text>
总结：
模板是为了我们更好地封装我们公用的视图view；方便我们在任何一个使用到的页面中，直接引入使用；帮助我们更好地减少代码的书写量。增加代码的重复使用率。
