微信小程序wxml中的应用

微信小程序wxml中的应用

---

WXML 提供两种文件引用方式import和include。

01 import

import可以在该文件中使用目标文件定义的template，如：

在 item.wxml 中定义了一个叫item的template：
代码：

<!-- 这是item.wxml文件 -->
<template name="item">
  <view>用户名：{{name}}</view>
</template>

<!--pages/test/test.wxml-->
<!-- 引用  -->
<import src="item.wxml"/>
<template is="item" data="{{name:'tyl'}}"></template>

运行结果：

注意：
import 的作用域

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

02 include

include 可以将目标文件除了 外的整个代码引入，相当于是拷贝到 include 位置，如：
代码：

<!-- 这是header.wxml -->
<view>我是header</view>

<!-- 我是footer -->
<view>我是footer</view>

<!--pages/test/test.wxml-->
<!-- 引用  -->
<include src="header.wxml" />
<view>我是body</view>
<include src="footer.wxml" />

运行结果：

---

-END-