小程序之模板使用

头部组件

新建 template 目录文件，新建 header 模板文件，写入头部组件信息。
template 释义 模板。

//pages/template/header.wxml 
<text>
这里是头部组件
</text>

使用模板

//pages/first/first_demo.wxml 
<include src="../template/header" />

效果图：

底部组件

在 template 目录文件中，新建 footer 模板文件，写入底部组件信息。
尤其注意：用 template 标号写，且注明 name，引用时也要区别于头部组件。详见下例。

//pages/template/footer.wxml
<template name="footer1">
这里是底部组件1
</template>

<template name="footer2">
这里是底部组件2
</template>

使用模板

//pages/first/first_demo.wxml
<import src="../template/footer" />
<template is="footer1" />

效果图：

选择第二个底部组件，微信界面显示 这里是底部组件2

//pages/first/first_demo.wxml
<import src="../template/footer" />
<template is="footer2" />

• 加入其他数据方法

//pages/template/footer.wxml
<template name="footer1">
这里是底部组件1 - {{text}}
</template>

//pages/first/first_demo.wxml
<import src="../template/footer" />
<template is="footer1" data="{{text:'导入设置的内容'}}" />

效果图：

注意事项

1. 若一个目录不建立js文件，则不必将该目录信息存入外部文件app.json中。例如本文中所举建立头部文件的例子。
   

2. 禁止将一个模板导入到另一个模板中，会失效。