小程序开发十：动态首页Home的模板Template介绍和使用

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；方便我们在任何一个使用到的页面中，直接引入使用；帮助我们更好地减少代码的书写量。增加代码的重复使用率。

下一节：
传送门：
十一：事件传递和数据dataset