小程序开放平台

文档中心
小程序配置
框架接口
XHSML语法参考
数据绑定
列表渲染
条件渲染
模板
引用
2.0架构升级
sjs 语法参考
平台骨架屏(beta)

引用

开发
>
框架
>
XHSML语法参考
>
引用
>
更新时间:2024-11-13 19:05:25

小程序开发者工具 1.59.27,基础库 3.16.4 开始支持改能力

xhsml 提供两种文件引用方式

import
include

import

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

item.xhsml
中定义了一个叫
item
template

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

index.xhsml
中引用了
item.xhsml
,就可以使用
item
模板:

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

import 的作用域

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

如:C import B,B import A,在 C 中可以使用 B 定义的 template,在 B 中可以使用 A 定义的 template,但是 C 不能使用 A 定义的 template。

<!-- A.xhsml -->
<template name="A">
  <text> A template </text>
</template>
<!-- B.xhsml -->
<import src="a.xhsml"/>
<template name="B">
  <text> B template </text>
</template>
<!-- C.xhsml -->
<import src="b.xhsml"/>
<template is="A"/>  <!-- Error! Can not use tempalte when not import A. -->
<template is="B"/>

include

include
可以将目标文件除了
<template/>
外的整个代码引入,相当于是拷贝到
include
位置,如:

<!-- index.xhsml -->
<include src="header.xhsml"/>
<view> body </view>
<include src="footer.xhsml"/>
<!-- header.xhsml -->
<view> header </view>
<!-- footer.xhsml -->
<view> footer </view>
该文档是否对您有帮助?