Although the small program development language can only run in wechat small program, its design also follows the main feature of the mainstream front-end framework — componentization. There are two ways to realize componentization in the small program: Template template and Component. These two methods are suitable for different scenarios.

  1. Template templateFor demonstration purposes, there is no event handling involved in the template, and the event logic to be handled is placed in the page that calls the template. aTemplate templateContains onlywxml wxssFile.
  2. Component componentsAs a separate function module, it can contain not only page presentation but also event logic processing of the module. Like a page,Component componentsCan containwxml wxss js jsonFile.

1. Createtemplatetemplate

Unlike page and Component creation, there is no way to quickly create a template in developer tools. So you need to create a separate WXSS WXML file.

template.wxmlFile syntax

A template. WXML file contains one template using the

Variables can be accepted in the template, shown with {{}}. The passer for the variable is passed by the page calling the template.

<template name="A">
    <text>template name: {{name}}</text>
</template>
<template name="B">
    <text>template name: {{name}} {{msg}}</text>
</template>
Copy the code

template.wxssTemplate style file

Templates can have their own style files

text{
    color: #cccccc;
}
Copy the code

2. Referencestemplatetemplate

  1. templateTemplate references need to be used<import>The label. The label ofsrcProperty is the path to which the template needs to be referenced.
  2. templateThe use of templates<template>The label. useisProperty to distinguish between templates defined in the template file.
  3. usedataData passed into the template.

index.wxml

<import src=".. /tpls/template.wxml" />

<view>
    <template is="A" data="{{name}}"/>
    <template is="B" data="{{name, msg}}"/>
<view>
Copy the code

3. Refer to template styles

After template. WXML is referenced in the WXML of the calling page, the template style is not referenced. You need to refer to the template. WXSS file separately in the WXSS of the calling page.

index.wxss

@import "./tpls/template.wxss"
Copy the code

4. Event handling in template files

Events defined in the template need to be executed in the call page. template.wxml

<template name="A">
    <text bindtap="handleTap">template name: {{name}}</text>
</template>
Copy the code

index.js

Page({
    data: {},
    handleTap() {
        console.log('the template template click')}})Copy the code

5. Import is scoped

Import has the concept of scope, that is, only the template defined in the object file is imported, not the template imported from the object file. In short, the import is not recursive.

For example, C refers to B, and B refers to A. In C, you can use the template defined by B, and in B, you can use the template defined by A, but in C, you cannot use the template defined by A

6. Include with the template

Just as you can use

to reference A template, you can also use

Note that:

  1. use<include>When a template file is referenced, the template block of the template file cannot be separately identified<include>Only one template block can be defined in the referenced template file.
  2. Include can be included in the target file<template/> <wxs/>The entire code outside is introduced, which is equivalent to copying into the include location.
<! -- index.wxml --> <include src="header.wxml"/>

<view> body </view>

<include src="footer.wxml"/>
Copy the code
<! -- header.wxml --> <view> header </view>Copy the code
<! -- footer.wxml --> <view> footer </view>Copy the code