【微信小程序】模板template

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

如果有些页面结构内容需要重复在不同页面显示，则可以创建模板，在不同页面引用。

模板虽然是相同的，但页面传的参数值可以不同，所以可以在模板中显示不同信息。

定义模板

使用name属性，作为模板的名字。然后在内定义代码片段，如

<template name="msgItem"> 
		<view> {{msg}} </view>
<view>{{stu.name}}--{{stu.id}}--{{stu.sex}}</view>
</template>

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

<template name="odd"> 
<view> odd </view> 
</template>
<template name="even"> 
<view> even </view> 
</template> 

<block wx:for="{{[1, 2, 3, 4, 5]}}"> 
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
 </block>

模板的作用域

使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，也可以传入对象类型。模板拥有自己的作用域，只能使用data传入的数据。通过data={{}}语法。可传入多个数据，用逗号隔开。如使用扩展运算符 … 可将一个对象展开成多个数据传入模板。

<template is="msgItem" data="{{...item}}"/>

使用模板

<template is="msgItem" data="{{msg,stu}}"/>

data: {
msg:"这是模板中的内容",
stu:{"name":"张三","id":"100","sex":"男"}
}

如将data="{{msg,stu}}“改成data=”{{msg,…stu}}"，则在模板里就不需要写stu.name等，直接可以使用name/id等数据。

模板在外部引用

WXML 提供两种文件引用方式 import 和 include。
import可以在该文件中使用目标文件定义的template，如果目标文件template之外有代码， import无法读取和使用。import一般放在wxml文件的上面，具体使用位置根据模板的确定。
include 可以将目标文件除了的整个代码引入，相当于是拷贝到 include 位置。也就是就想到哪里使用目标文件代码，就在哪里include代码。

import引入模板

import import 可以在该文件中使用目标文件定义的 template，一般在项目根目录新建一个template目录专门用于放模板，如：
在template中新建一个 header.wxml 中定义了一个叫 header 的 template：

<template name="header"> 
  <view>header--{{text}}</view> 
</template>

<import src="../../templates/header.wxml"/>

<!-- 使用模板 -->
<template is="header" data="{{text}}"></template>

include引入模板

include 可以将目标文件除了的整个代码引入，相当于是拷贝到 include 位置，如：
在template中新建一个 footer.wxml 中定义了一个叫 footer 的 template：

<template name="footer"> 
  <view>footer--{{text}}</view> 
</template> 
<view>这是模板文件template标签外的代码{{text}}</view>

<include src="../../templates/footer.wxml"/>

<!-- 使用模板 -->
<template is="footer" data="{{text}}"></template>

结果发现footer模板中template标签内的内容没有显示，template标签外的内容反而显示了，并且显示到了<include …>代码所在的位置，并且也能正常显示页面传过来的data。

import 的作用域

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

来源：CSDN

作者：Dwell_hls

链接：https://blog.csdn.net/weixin_42554191/article/details/104024965

标签

微信小程序

微信页面