Reference

WXML provides two file reference methods: import and include.

import

Import can use the template defined in the target file in the file, such as: a template called item is defined in item.wxml.

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

In index.wxml, item.wxml is referenced, and the item template can be used:

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

Import scope

Import has the concept of scope, that is, it will only import the template defined in the target file, but not the template imported by the target file.

For example: C imports B, B imports A, C can use the template defined by B, B can use the template defined by A, but C cannot use the template defined by A.

<!-- A.wxml -->
<template name="A">
  <text> A template </text>
</template>

<!-- B.wxml -->
<import src="a.wxml"/>
<template name="B">
  <text> B template </text>
</template>

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

include

Include can import the entire code of the target file except <template/> <wxs/>, which is equivalent to copying it to the include location, such as:

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

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>