小程序筆記—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>