WXML 提供两种文件引用方式import和include。
import 可以在该文件中使用目标文件定义的 template,如:
在 item.wxml 中定义了一个叫 item的 template :
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml,就可以使用 item模板:
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
需要注意的是 import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件中 import 的 template,简言之就是 import 不具有递归的特性。
例如:C 引用 B,B 引用A,在C中可以使用B定义的 template,在B中可以使用A定义的 template ,但是C不能使用A定义的template ,如代码2-19、代码2-20、代码2-21所示。
代码清单2-19 模板 A
<!-- A.wxml -->
<template name="A">
<text> A template </text>
</template>
代码清单2-20 模板 B
<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
<text> B template </text>
</template>
代码清单2-21 模板 C
<!-- C.wxml -->
<import src="b.wxml"/>
<template is="A"/> <!-- 这里将会触发一个警告,因为 b 中并没有定义模板 A -->
<template is="B"/>
include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入,相当于是拷贝到 include 位置,如代码2-22、代码2-23、代码2-24所示。
代码清单2-22 index.wxml
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
代码清单2-23 header.wxml
<!-- header.wxml -->
<view> header </view>
代码清单2-24 footer.wxml
<!-- footer.wxml -->
<view> footer </view>
网站建设开发|APP设计开发|小程序建设开发