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
![](https://i-blog.csdnimg.cn/blog_migrate/3eaf4bf5e1ba23dc588ca69192ca5017.png)
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】属性声明模板所在页面的位置
![](https://i-blog.csdnimg.cn/blog_migrate/3d1f7146535c4e6fae4fc63b84f699a0.png)
引用不同页面的模板时,模板的样式不会生效,若要使用模板同样的样式,需要在【app.wxss】中导入模板的样式。
/**app.wxss**/
@import "pages/item/item.wxss";
4.模板的作用域
模板拥有自己的作用域,只能使用 data 传入的数据以及模板定义文件中定义的 <wxs />
模块。