支付寶小程序框架 AXML·引用

axml 提供兩種文件引用方式 import 和 include。

import

import 可以加載已經(jīng)定義好的 template。

比如，在 item.axml 中定義了一個(gè)叫 item 的 template。

<!-- item.axml -->
<template name="item">
  <text>{{text}}</text>
</template>

在 index.axml 中引用 item.axml，就可以使用 item 模板。

<import src="./item.axml"/>
<template is="item" data="{{text: 'forbar'}}"/>

import 有作用域的概念，只會(huì) import 目標(biāo)文件中定義的 template，而不會(huì) import 目標(biāo)文件 import 的 template。

比如，C import B，B import A，在 C 中可以使用 B 定義的 template，在 B 中可以使用 A 定義的 template，但是 C 不能使用 A 中定義的 template。

<!-- a.axml -->
<template name="A">
  <text> A template </text>
</template>
<!-- b.axml -->
<import src="./a.axml"/>
<template name="B">
  <text> B template </text>
</template>
<!-- c.axml -->
<import src="./b.axml"/>
<template is="A"/>  <!-- 注意：不能使用 import A -->
<template is="B"/>

注意 template 的子節(jié)點(diǎn)只能是一個(gè)，例如：

允許的示例：

<template name="x">
  <view />
</template>

不允許的示例：

<template name="x">
  <view />
  <view />
</template>

include

include 可以將目標(biāo)文件除 <template/> 外整個(gè)代碼引入，相當(dāng)于是拷貝到 include 位置。

代碼示例：

<!-- index.axml -->
<include src="./header.axml"/>
<view> body </view>
<include src="./footer.axml"/>
<!-- header.axml -->
<view> header </view>
<!-- footer.axml -->
<view> footer </view>

引入路徑

模板引入路徑支持相對(duì)路徑、絕對(duì)路徑，也支持從 node_modules 目錄載入第三方模塊。

<import src="./a.axml"/> <!-- 相對(duì)路徑 -->
<import src="/a.axml"/> <!-- 項(xiàng)目絕對(duì)路徑 -->
<import src="third-party/x.axml"/> <!-- 第三方 npm 包路徑 -->