做自由与创造的先行者

引用

小程序开发手册

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设计开发|小程序建设开发
下一篇:共同属性
上一篇:模板