【小程序】模板template的定义、使用与导入

WXML提供模板（template），模板可以自定义代码片段，在不同的地方使用，从而实现代码的复用。

1.定义模板

<!--pages/item/item.wxml-->

<!-- 1.定义模板  -->
<template name="item">
  <view>这是name为item的模板</view>
  <view>name：{{ name }}</view>
</template>

定义模板使用【template】标签，【name】属性对模板命名

2.使用模板

<!-- 2.使用模板 -->
<template is="item" data="{{ name }}"></template>

i【is】属性指定要使用的模板，将需要的data传入

// pages/item/item.js
Page({
  data: {
    name:'item'
  }
})

 数据仓库声明name

运行结果

3.导入模板

以上模板的定义和使用都在同一个WXML页面，但在实际需求中，往往需要跨页面引用模板。

在不同页面引用模板，需要在引用模板的页面导入模板。

<!--pages/index/index.wxml-->

<!-- 在index页面调用item页面的item模板 -->
<view class="title">这是index页面</view>

<!-- 导入模板 -->
<import src="/pages/item/item.wxml"></import>

<!-- 引用模板 -->
<template is="item" data="{{ name }}"></template>

使用【import】标签导入模板，【src】属性声明模板所在页面的位置

在index页面引用item页面的模板

 

引用不同页面的模板时，模板的样式不会生效，若要使用模板同样的样式，需要在【app.wxss】中导入模板的样式。

/**app.wxss**/

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

 

4.模板的作用域

模板拥有自己的作用域，只能使用 data 传入的数据以及模板定义文件中定义的 <wxs /> 模块。