微信小程序学习日记---模板(template)全解析

本文详细介绍了小程序中模板的定义、使用方法及注意事项，包括如何通过name属性定义模板，使用is属性调用模板，并通过data属性传递参数。同时，文章还解释了模板作用域的限制，以及如何通过import和include引入和导入模板文件。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.定义模板:

模板使用<template> </template>定义使用 name 属性作为模板的名字,供下次调用.

<template name='test'>
    <view>测试模板</view>
    <view>{{name}}</view>
    <view>{{age}}</view>
    <view>{{sex}}</view>
</template>

2.使用模板:

使用 is 属性声明要使用的模板名称,然后将模板所需要的数据使用 data 传入.

注意:这里可能会用到 ... 符号用于展开对象.

如果模板内绑定的数据名跟page.js中data对象属性名相同则可以省略value.

详情看代码

//page.wxml
<template is="test" data="{{name:name,age:age,sex:sex}}"/>
<template is="test" data="{{...data1}}"/> <!--注意...这是展开对象的符号,可以理解为去掉对象的大括号-->
<template is="test" data="{{name,age,sex}}"/> <!--可以省略value-->
//page.js

page({
    data:{
        name:"爱憎分明",
        age:20,
        sex:'男',
        data1:{name:'苍老师',age:30,sex:'女'}
    }
})

3.模板作用域:

模板只能使用 is 传入的数据

4.引用模板

例如在page/demo/中定义了页面 demo.wxml 和模板文件template.wxml 就可以使用 import 引入 template.wxml 用 src 属性声明模板路径

注意: import 只会引用目标文件中定义的 template 而不会引用目标文件引用的template

<import src='template.wxml' />

<template is="test" data="{{...data1}}"/>

5.导入文件

include可以将目标文件除模板代码块<template />以外的所有代码引入,相当于拷贝到include位置.用src声明文件路径

//template.wxml

//template 以及所包括的内容不会被include
<template name='test1'>
    <view>测试模板1</view>
    <view>{{name}}</view>
    <view>{{age}}</view>
    <view>{{sex}}</view>
</template>
//这下面的所有代码会被include
<block>
    <view>测试模板1</view>
    <view>{{name}}</view>
    <view>{{age}}</view>
    <view>{{sex}}</view>
</block>

//page.wxml
<include src="template.wxml"/>