微信小程序（9）：模板及引入

1. 新建 template 文件夹，再右键点击 新建page

2. template.wxml 和 template.wxss 文件代码如下：

<template name="header">
  <view class="header">这是头部</view>
</template>

<template name="footer">
  <view class="footer">这是底部</view>
</template>

.header{
  height: 80rpx;
  background-color: #ccc;
  text-align: center;
  line-height: 80rpx;
}

.footer{
  height: 100rpx;
  background-color: pink;
  text-align: center;
  line-height: 100rpx;
}

3. 分别在index.wxml 和 index.wxss 文件中引入：

<import src="/pages/template/template.wxml" />
<template is="header" />

<template is="footer" />

其中 footer 要写在最下面。

 @import "/pages/template/template.wxss";

4. 效果如下：

5. 还可以进行传值，如下示例

template.wxml 文件：

<template name="header">
  <view class="header">这是头部 - {{tel}} - {{txt}}</view>
</template>

index.wxml文件：

<import src="/pages/template/template.wxml" />
<template is="header" data="{{tel:'1111',txt:'头部'}}" />

效果：