WeChat Open Platform

Mini Programs Documentation

Referencing

WXML provides two file reference methods: import and include.

import

Import can use a template defined by the target file in a file. For example:

A template called item has been defined in item.wxml:

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

If item.wxml is referenced in index.wxml, then the item template can be used:

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

import scope

import has a scope concept, that is, only templates defined in a target file will be imported. Templates imported by a target file will not be imported.

For example: C imports B, B imports A. A template defined by B can be used in C, and a template defined by A can be used in B, but C cannot use a 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 template when not import A. -->
<template is="B"/>

include

include can import the entire code for the target file excluding <template/>. It is equivalent to being copied to the include position. For example:

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