今天練習的兩個頁面有相同的模塊责鳍，決定用模板來實現(xiàn)代碼的復(fù)用碾褂。

先來看兩個頁面，首頁和瀏覽記錄頁列表項格式完全相同历葛，所以正塌，抽取這個列表項作為模板，網(wǎng)上也有同學抽取整個列表作為模板恤溶，做法差不多乓诽，我沒有試，還是習慣抽取一個小模塊咒程，這樣靈活度更高一些鸠天。

抽取模板

模板介紹

WXML提供模板（template），可以在模板中定義代碼片段帐姻，然后在不同的地方調(diào)用稠集。

定義模板
使用 name 屬性，作為模板的名字饥瓷。然后在<template/>內(nèi)定義代碼片段剥纷，如：

<!--
  index: int
  msg: string
  time: string
-->
<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>

使用模板
使用 is 屬性，聲明需要的使用的模板呢铆，然后將模板所需要的 data 傳入晦鞋，如：

<template is="msgItem" data="{{...item}}"/>
Page({
  data: {
    item: {
      index: 0,
      msg: 'this is a template',
      time: '2016-09-15'
    }
  }
})

模板教程見《微信官方學習文檔-模板》。

模板實現(xiàn)步驟

創(chuàng)建一個模板文件夾template棺克，在文件夾下創(chuàng)建模板文件houseItem.wxml悠垛。

houseItem.wxml代碼：

<template name="houseItem">
  <view class='houseItem-bg' style='display: flex;flex-direction: column; align-items: center; margin:10px;padding:5px;border-radius: 5px;background-color: white;'>
    <view class='houseItem-img'>
      <image src='../../images/home/home_1.png' mode="aspectFill"></image>
    </view>
    <view class='houseItem-text'>
      <view class='houseItem-text-l' style='border-right: 1px solid #D9D9D9;padding-right:10px'>
        <text>海淀中關(guān)村17號  15棟4單元高層</text>
        <view>
          <text style='border: 1px solid #1AAD00;padding:2px 10px;color:#1AAD00;font-size:14px'>整租</text>
          <text style='border: 1px solid #FF7033;padding:2px 10px;color:#FF7033;font-size:14px;margin-left:15px;'>三室一廳</text>
        </view>
      </view>
      <view class='houseItem-text-r'>
        <text style='color:red;font-size:20px'>￥13500</text>
      </view>
    </view>
  </view>
</template>

關(guān)于模板樣式，我寫的比較亂有一部分直接寫在模板文件里娜谊，另一部分寫在app.wxss中了确买。
還可以單獨寫一個wxss文件來寫樣式，但是注意因俐，一定要在模板使用界面引用wxss樣式文件拇惋。
app.wxss模板樣式代碼：

/*houseItem 模板樣式*/
.houseItem-img {
  width: 100%;
}
.houseItem-img image {
  width: 100%;
}
.houseItem-text {
  display: flex;
  flex-direction: row;
  width: 100%; 
  margin: 10px;
  background-color: white;
}
.houseItem-text-l {
  width: 68%;
}
.houseItem-text-r {
  margin: auto;
}

引用模板

在需要使用模板的開頭先引用模板文件

<!-- 聲明需要使用的模板文件 -->
<import src ="../../template/houseItem.wxml"/>

在響應(yīng)的位置使用模板創(chuàng)建列表項：

<view>
  <template is="houseItem"/> 
</view>

此時的頁面效果

首頁使用模板

模板數(shù)據(jù)綁定和列表實現(xiàn)

上面3步實現(xiàn)模板的使用，現(xiàn)在的數(shù)據(jù)是在模板中寫死的抹剩，而且列表中只有一條列表項撑帖。所謂模板，數(shù)據(jù)肯定是靈活的澳眷，下一步修改一下創(chuàng)建的模板來實現(xiàn)一個列表并綁定數(shù)據(jù)胡嘿。

在頁面js中造一個列表的假數(shù)據(jù)：

houseList:[
      {
        id:'1001',
        title:'海淀區(qū)學院南路68號',
        leaseType:'整租',
        houseType:'三室一廳',
        price:'9800',
        image:'../../images/home/home_1.png'
      },
      {
        id: '1002',
        title: '海淀區(qū)中關(guān)村南大街17號',
        leaseType: '整租',
        houseType: '一室一廳',
        price: '5500',
        image: '../../images/home/home_2.png'
      },
      {
        id: '1003',
        title: '豐臺區(qū)馬家堡街道嘉園二里',
        leaseType: '合租',
        houseType: '三室一廳',
        price: '2900',
        image: '../../images/home/home_1.png'
      },

修改houseItem.wxml文件，將頁面寫死的數(shù)據(jù)替換成活的钳踊，由于需要點擊跳轉(zhuǎn)衷敌，頁面元素也修改了一下勿侯，外層view改為navigator.
修改后的houseItem.wxml代碼

<template name="houseItem">
  <navigator url='../logs/logs?id={{id}}' class='houseItem-bg' style='display: flex;flex-direction: column; align-items: center; margin:10px;padding:5px;border-radius: 5px;background-color: white;'>
    <view class='houseItem-img'>
      <image src='{{image}}' mode="aspectFill"></image>
    </view>
    <view class='houseItem-text'>
      <view class='houseItem-text-l' style='border-right: 1px solid #D9D9D9;padding-right:10px'>
        <text>{{title}}</text>
        <view>
          <text style='border: 1px solid #1AAD00;padding:2px 10px;color:#1AAD00;font-size:14px'>{{leaseType}}</text>
          <text style='border: 1px solid #FF7033;padding:2px 10px;color:#FF7033;font-size:14px;margin-left:15px;'>{{houseType}}</text>
        </view>
      </view>
      <view class='houseItem-text-r'>
        <text style='color:red;font-size:20px'>￥{{price}}</text>
      </view>
    </view>
  </navigator>
</template>

模板調(diào)用修改使用for循環(huán)遍歷列表數(shù)據(jù)，進行模板數(shù)據(jù)綁定缴罗。

<view>
  <block wx:for="{{houseList}}">
    <template is="houseItem" data="{{...item}}"></template>
  </block>
</view>

實現(xiàn)效果展示

最終效果.png

頁面?zhèn)髦?/h1>

上面例子中將id值傳給了下個頁面logs助琐。通過直接在url后面拼接參數(shù)是最簡單的直接傳值方式。

<navigator url='../logs/logs?id={{id}}'/>

在下一個頁面logs.js的onLoad方法中接收id值面氓。
logs.js代碼：

onLoad: function (options) {
    this.setData({
      id:options.id,
      })
    })

在logs.wxml添加元素兵钮，展示傳過來的值。

<text>上個頁面?zhèn)鬟^來的id：{{id}}</text>

編譯一下舌界，點擊列表項跳轉(zhuǎn)：

image.png

后記

模板掘譬、列表、傳值等的使用都非常簡單呻拌，開發(fā)起來也方便快捷葱轩，我在開發(fā)過程中浪費時間最多的還是頁面樣式。
例子中用到的樣式邊框藐握，居中靴拱，各種排列讓我真的讓我費勁了心思。到最后發(fā)現(xiàn)和UI還有一些出入趾娃，比如列表項圖片背景和文字背景是不同的缭嫡，但是發(fā)現(xiàn)的時候已經(jīng)晚了缔御，懶得再改了抬闷，幸好是聯(lián)系不是實際開發(fā)，還是要繼續(xù)熟練各種樣式~