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.
Template template
For 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 template
Contains onlywxml
wxss
File.Component components
As a separate function module, it can contain not only page presentation but also event logic processing of the module. Like a page,Component components
Can containwxml
wxss
js
json
File.
1. Createtemplate
template
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.wxml
File syntax
A template. WXML file contains one template using the
tag, and a template. WXML file can contain multiple
templates using the name attribute as the template name.
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.wxss
Template style file
Templates can have their own style files
text{
color: #cccccc;
}
Copy the code
2. Referencestemplate
template
template
Template references need to be used<import>
The label. The label ofsrc
Property is the path to which the template needs to be referenced.template
The use of templates<template>
The label. useis
Property to distinguish between templates defined in the template file.- use
data
Data 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
Note that:
- 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. - 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