WeChat's widget WXML provides import and include references

Reference

WXML provides two file import and include

import

import use templates defined by the target file in template such as:

A template called item is defined in item.wxml: item

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

If you reference item.wxml in index.wxml, you can use the item template:

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

The scope of import

Import has the concept of scope, i.e. only the template defined in the import target file, not the template of the impport target file.

For example: C import B, B import A, you can use template defined by B in C, template defined by A can be template but C can not use template defined template template

<!-- 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 introduce the target file in addition to the entire code include <template/>

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

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

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