小程序笔记—wxml布局文件的模板，使用template抽离公共布局

摘要

在上一篇小程序笔记—模块化，抽离公共函数，common.js文章中，我们了解到一些公共的函数可以抽离到统一的模块中，那么这篇我们就来看一下wxml中一些公共布局如何抽离。

分类

抽离的方式大概分为两种：template和非template

对应的引用方法也不同：
template——定义与使用若在同一文件中则无需引用，若不在同一文件中则需使用import引用
非template——使用include引用

示例

template

定义与使用在同一wxml文件中

//定义与使用在同一wxml文件中
//定义
<template name="msgItem">
  <view>
    <text> {{text}} </text>
  </view>
</template>
//使用
<template is="msgItem" data="{{...item}}"/>

//js提供数据
Page({
  data: {
    item: {
      text: "hanwei"   
     }
  }
})

定义与使用不在同一wxml文件中

//定义文件:item.wxml
<template name="item">
  <text>{{text}}</text>
</template>

//使用文件：index.wxml
<import src="item.wxml"/>
<template is="item" data="{{text: 'hanwei'}}"/>

非template

//定义文件：header.wxml
<view> header </view>

//使用文件：index.wxml
<include src="header.wxml"/>
<view> body </view>