【微信小程序】模板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}}"/> 	

使用模板

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

<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。

发布了182 篇原创文章 · 获赞 33 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/weixin_42554191/article/details/104024965