Reference of WeChat mini-app tutorial and Wechat mini-app reference

References of mini-program tutorials and mini-program references

Series of articles:

Mini-program tutorial-WXSS
References to mini-program tutorials
Events of mini-program tutorials
Small Program tutorial Template
List rendering of Applet tutorials
Conditional rendering of mini-program tutorials
Data Binding in applet tutorial
Mini-program tutorial-WXML

Reference

WXML provides two file reference methods: import and include.

Import

Import can use the template defined in the target file in this file, for example:

A template named item is defined in item. wxml:

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

You can use the item template by referencing item. wxml in index. wxml:

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

Scope of import

Import has the concept of scope, that is, only the template defined in the target file will be imported, rather than the template of the target file import.
For example, C import B, B import A. in C, you can use the template defined by B. In B, you can use the template defined by A, but C cannot use the template defined by.

<!-- 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:

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

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

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

Thank you for reading this article. I hope it will help you. Thank you for your support for this site!