ps：上一節(jié)我們對(duì)網(wǎng)絡(luò)數(shù)據(jù)的請(qǐng)求和動(dòng)態(tài)綁定行了大概的講解和說(shuō)明，這一節(jié)，我們重點(diǎn)講動(dòng)態(tài)首頁(yè)Home的template的使用
傳送門(mén)：
j：登錄Login頁(yè)面的實(shí)現(xiàn)與講解

重點(diǎn)

這一節(jié)的重點(diǎn)是為大家講解“Template（模板）”這個(gè)概念

模板是為了我們更好地封裝我們公用的視圖view；方便我們?cè)谌魏我粋€(gè)使用到的頁(yè)面中，直接引入使用；幫助我們更好地減少代碼的書(shū)寫(xiě)量。增加代碼的重復(fù)使用率。

拋出問(wèn)題：
首先關(guān)于動(dòng)態(tài)首頁(yè)，大家可以看看實(shí)現(xiàn)的效果圖，

動(dòng)態(tài)首頁(yè).png

開(kāi)始編寫(xiě)如下代碼

<view class="dynamicListContainer">
  <view class="dynamic1">
    <image>頭像</image>
    <text>姓名</text>
    <text>日期</text>
    <text>內(nèi)容</text>
    <image>圖片</image>
    <image>點(diǎn)贊圖標(biāo)</image>
    <text>點(diǎn)贊數(shù)量</text>
    <image>評(píng)論圖標(biāo)</image>
    <text>評(píng)論數(shù)量</text>
  </view>
  <view class="dynamic2">
    <image>頭像</image>
    <text>姓名</text>
    <text>日期</text>
    <text>內(nèi)容</text>
    <image>圖片</image>
    <image>點(diǎn)贊圖標(biāo)</image>
    <text>點(diǎn)贊數(shù)量</text>
    <image>評(píng)論圖標(biāo)</image>
    <text>評(píng)論數(shù)量</text>
  </view>
  .
  .
  .
 // 有幾個(gè)就寫(xiě)多少個(gè)
</view>

拋出問(wèn)題：
代碼量繁重，如果后續(xù)中出現(xiàn)諸如此類的樣式，那么我們是否去復(fù)制粘貼，繼續(xù)這樣搞呢，我們猜想下，是否我們能做到，我們猜想下，用以下的代碼就能實(shí)現(xiàn)呢

<view class="dynamicListContainer">

  <模板 id：1 此處是模板代碼，而且就那么一行>
  <模板 id：2 此處是模板代碼，而且就那么一行>
  .
  .
  .
 // 有幾個(gè)就寫(xiě)多少個(gè)
</view>

結(jié)論：

首先關(guān)于動(dòng)態(tài)首頁(yè)，大家可以看到，所謂的帖子，都是一個(gè)個(gè)相同的樣式（頭像+名字+日期+內(nèi)容+圖片+點(diǎn)贊+評(píng)論）的帖子組成的帖子列表，那么對(duì)于這些相同樣式的view，我們是否可以制作一個(gè)模板來(lái)提供使用，以至于之后所有要用到此種樣式的view，我們都可以直接套用此模板呢。

對(duì)于一些重復(fù)樣式的view，我們建議使用“Template”的模板來(lái)進(jìn)行封裝。

準(zhǔn)備工作

首先我們創(chuàng)建一個(gè)template的文件夾，專門(mén)用來(lái)存在項(xiàng)目中的模板文件，這里我們創(chuàng)建好“dynamicTemplate”的模板文件（）

模板文件

Template的介紹：

注意：模板文件只有.wxml(布局文件)和.wxss(樣式文件)，在模板中不做任何的邏輯處理，故此次不需要.js和.json文件

dynamic-template.wxml

//假數(shù)據(jù)布局
//name是必須要的，作為引用的唯一標(biāo)志符
<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>動(dòng)態(tài)內(nèi)容

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

編譯運(yùn)行：

image.png

我們此處來(lái)用一個(gè)循環(huán)來(lái)加載多條假數(shù)據(jù)

<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

我們將此模板引入到上節(jié)課開(kāi)發(fā)的項(xiàng)目中，我們修改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>

重點(diǎn)說(shuō)明：

<template is="dynamicTemplate" data="{{...dynamic}}"></template>

此處用...dynamic，相當(dāng)于是將
{
"":"",
.
.
.
}的內(nèi)容平鋪展開(kāi)，

所以我們?cè)趖emplate中，進(jìn)行數(shù)據(jù)綁定的時(shí)候，則不需要再以dynamic.user_nick的名稱進(jìn)行綁定，只要寫(xiě)dynamic.user_nick

修改前：

 <text class="userNick" >{{dynamic.nick_name}}</text>

修改后：

 <text class="userNick">{{nick_name}}</text>

總結(jié)：

模板是為了我們更好地封裝我們公用的視圖view；方便我們?cè)谌魏我粋€(gè)使用到的頁(yè)面中，直接引入使用；幫助我們更好地減少代碼的書(shū)寫(xiě)量。增加代碼的重復(fù)使用率。

下一節(jié)：
傳送門(mén)：
十一：事件傳遞和數(shù)據(jù)dataset