Template applet of use

The head assembly

New template directory file, the new header template file, write head assembly information.
template Interpretation template .

//pages/template/header.wxml 
<text>
这里是头部组件
</text>

Using Templates

//pages/first/first_demo.wxml 
<include src="../template/header" />

Renderings:
Here Insert Picture Description

Bottom components

In the template directory file, the new footer template file, written in the bottom of the component information.
Particular attention to: The template written references and indicate the name , but also different from the head assembly when the reference. See the Examples.

//pages/template/footer.wxml
<template name="footer1">
这里是底部组件1
</template>

<template name="footer2">
这里是底部组件2
</template>

Using Templates

//pages/first/first_demo.wxml
<import src="../template/footer" />
<template is="footer1" />

FIG Effect:
Here Insert Picture Description
Select the second base assembly, micro-channel interface display where the bottom assembly 2

//pages/first/first_demo.wxml
<import src="../template/footer" />
<template is="footer2" />
  • Add other methods of data
//pages/template/footer.wxml
<template name="footer1">
这里是底部组件1 - {{text}}
</template>
//pages/first/first_demo.wxml
<import src="../template/footer" />
<template is="footer1" data="{{text:'导入设置的内容'}}" />

Renderings:
Here Insert Picture Description

Precautions

  1. If a directory does not establish js file, you do not have the directory information is stored in an external file app.json. Examples of established herein e.g. header file move.
    Here Insert Picture Description

  2. Prohibit import a template to another template, it will fail.

Guess you like

Origin blog.csdn.net/xiaoyuting_/article/details/95310827