今天练习的两个页面有相同的模块，决定用模板来实现代码的复用。

先来看两个页面，首页和浏览记录页列表项格式完全相同，所以，抽取这个列表项作为模板，网上也有同学抽取整个列表作为模板，做法差不多，我没有试，还是习惯抽取一个小模块，这样灵活度更高一些。

抽取模板

模板介绍

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板
使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：

<!--
  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'
    }
  }
})

模板教程见《微信官方学习文档-模板》。

模板实现步骤

创建一个模板文件夹template，在文件夹下创建模板文件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>海淀中关村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>

关于模板样式，我写的比较乱有一部分直接写在模板文件里，另一部分写在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"/>

在响应的位置使用模板创建列表项：

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

此时的页面效果

首页使用模板

模板数据绑定和列表实现

上面3步实现模板的使用，现在的数据是在模板中写死的，而且列表中只有一条列表项。所谓模板，数据肯定是灵活的，下一步修改一下创建的模板来实现一个列表并绑定数据。

在页面js中造一个列表的假数据：

houseList:[
      {
        id:'1001',
        title:'海淀区学院南路68号',
        leaseType:'整租',
        houseType:'三室一厅',
        price:'9800',
        image:'../../images/home/home_1.png'
      },
      {
        id: '1002',
        title: '海淀区中关村南大街17号',
        leaseType: '整租',
        houseType: '一室一厅',
        price: '5500',
        image: '../../images/home/home_2.png'
      },
      {
        id: '1003',
        title: '丰台区马家堡街道嘉园二里',
        leaseType: '合租',
        houseType: '三室一厅',
        price: '2900',
        image: '../../images/home/home_1.png'
      },

修改houseItem.wxml文件，将页面写死的数据替换成活的，由于需要点击跳转，页面元素也修改了一下，外层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>

模板调用修改使用for循环遍历列表数据，进行模板数据绑定。

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

实现效果展示

最终效果.png

页面传值

上面例子中将id值传给了下个页面logs。通过直接在url后面拼接参数是最简单的直接传值方式。

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

在下一个页面logs.js的onLoad方法中接收id值。
logs.js代码：

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

在logs.wxml添加元素，展示传过来的值。

<text>上个页面传过来的id：{{id}}</text>

编译一下，点击列表项跳转：

image.png

后记

模板、列表、传值等的使用都非常简单，开发起来也方便快捷，我在开发过程中浪费时间最多的还是页面样式。
例子中用到的样式边框，居中，各种排列让我真的让我费劲了心思。到最后发现和UI还有一些出入，比如列表项图片背景和文字背景是不同的，但是发现的时候已经晚了，懒得再改了，幸好是联系不是实际开发，还是要继续熟练各种样式~

小程序学习笔记3-模板template、列表和页面传值

小程序学习笔记3-模板template、列表和页面传值

模板介绍

模板实现步骤

模板数据绑定和列表实现

页面传值

后记