This article will give you a detailed understanding of the usage of the mini program template. I hope it will be helpful to you!
#WXML provides templates, in which code snippets can be defined and then called in different places. [Related learning recommendations:小program development tutorial]
You will gain
How to use the small program template
Handling of mini program template data and events
Some precautions and optimization of mini program templates
Create a template folder in the page. You can use the mini program development tool [New Page] to quickly create files
Note: When calling the template, only the wxml and wxss files work, and the JS files in the template do not work. The logic in the template must be processed in the filecalled by.
Create files can be designed according to your own project, this is not always the case
InDefine code snippets within, using the name attribute as the name of the template.
这是一个msg模板
To use templates in wxml, there are two steps
1), declaration, key import tag
2), use, Key is attribute
The name of is here is consistent with the name of the template
If the template has its own wxss, such as Ourtemplate.wxssfile needs to be imported into the file that calls the template (such asindex.wxssin the example), otherwise it will not take effect
/**index.wxss**/ @import "../template/template.wxss";
Summary:
- wxss import into wxss
- wxml import into wxml
- js is invalid
[Calling wxml] Pass the value to the template throughdata
item is defined in the calling js
Page({ data: { item: { title: '模板', msg: 'this is a template', } } })
is used directly in the template
{{title}}: {{msg}}
If multiple parameters are passed, separate them with commas
Copy after login
Used by the template It is an event in [the js file that calls the template].
template.jswill not take effect
{{title}}: {{msg}}
templatetemplate cannot directly use its own js, we can write the methods uniformly in thetemplate.jsfile, and then introduce it into the js file that uses the template.)
handleTap() { console.log('template 模版 click') },
const template = { handleTap() { console.log('template 模版 click') } } export default template;
template.jsyou can directly get the entire data of theindex.jsfile
are all to achieve code reuse
template template
: lightweight, mainly for display, no configuration file (.json) and Business logic file (.js), so the variable references and business logic events in the template template need to be defined in the [page js referencing the template] file;
Component component: Yes Your own business logic consists of 4 files, similar to the page, but the js files and json files are different from the page.
Select
// index.js import template from '../template/template'; Page({ handleTap:template.handleTap })
https://developers.weixin.qq.com/miniprogram/dev/reference /wxml/template.html
For more programming related knowledge, please visit:Programming Video! !
The above is the detailed content of In-depth analysis of how to use mini program templates. For more information, please follow other related articles on the PHP Chinese website!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
