微信小程序中经常会用到模板片段,需要在不同的地方调用,于是引入了模板概念。
WXML提供了两种文件引用方式import和include.
- import可以在该文件中使用目标文件定义的template
代码如下:
在a..wxml中定义一个叫A的template:
<!--pages/a/a.wxml-->
<template name="A">
<text>{{text}}</text>
</template>
在b.wxml中引用a.wxml,就可以使用A模板:
<!--pages/b/b.wxml-->
<import src="../../pages/a/a.wxml" />
<template is="A" data="{{text:'b import a'}}" />
import有作用域的概念,即只会import目标文件中定义的template,而不会import目标文件import的template。c import b,b import a,在c 中可以使用b定义的template ,在b中可以使用a定义的template ,但是c不能使用a定义的template。
代码如下:
<!--page/a/a.wxml-->
<template name="A">
<text>{{text}}</text>
</template>
<!--page/b/b.wxml-->
<import src="../../page/a/a.wxml" />
<template is="A" data="{{text:'b import a'}}" />
<template name="B">
<text>{{text}}</text>
</template>
<!--page/c/c.wxml-->
<import src="../../pages/b/b.wxml" />
<template is="B" data="{{text:'c import b'}}" />
<template is="A" data="{{text:'c import a'}}" /><!--c不能使用a定义的template,会报错-->
<template name="C">
<text>{{text}}</text>
</template>
- include可以将目标文件除了的整个代码引入,相当于复制到include位置,
例如:c.wxml文件include a.wxml和b.wxml文件,则c.wxml文件会显示a.wxml 和b.wxml文件的内容。代码如下:
<!--page/c/c.wxml-->
<view> </view>
<view> c.wxml 开始</view>
<include src="../../pages/a/a.wxml" />
<include src="../../pages/b/b.wxml" />
<view> c.wxml结束</view>
import与include的区别:
import可以在文件中使用目标文件定义的template,仅是使用,不会把代码拷贝到import位置。
include可以将目标文件除了的整个代码引入,相当于复制到include位置。