Shulou(Shulou.com)06/03 Report--

How to use Mini Program template template, for this question, this article introduces the corresponding analysis and answer in detail, hoping to help more partners who want to solve this problem to find a more simple and feasible way.

WXML provides templates (template) in which code snippets can be defined and then called in different places.

Basic use of templates to create template files

Create a template folder in page, and you can use 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 file in the template does not work. The logic in the template is handled in the invoked file.

Files can be created according to your own project design, not always like this

Define templat

Define the code snippet inside, using the name attribute as the name of the template.

This is a msg template using template

There are two steps to using templates in wxml

1), declaration, key import tag

2), use, key is attributes

Here the name of is is the same as that of the template name.

Wxss of the template

If the template has its own wxss, such as our template.wxss file, it needs to be imported in the file that called the template (such as the index.wxss of the example), otherwise it will not take effect.

/ * * index.wxss**/@import ".. / template/template.wxss"

Sum up:

Import wxss into wxss

Import wxml into wxml

Invalid js

Data transfer of template

[called wxml] passes values to the template through data

Item is defined in the calling js

Page ({data: {item: {title: 'template', msg: 'this is a template',})

Use directly in the template

{{title}}: {{msg}}

If multiple parameters are passed, separate them with commas

Event handling in template files

The template uses events in the js file that invokes the template.

Definition in your own template.js will not take effect.

{{title}}: {{msg}} handleTap () {console.log ('template template click')}, optimize template event

If it is a common method of the template, the method should be written once in each called file, there will be a lot of repetitive code, we can improve it as follows. Although template templates cannot directly use their own js, we can uniformly write the method in the template.js file and introduce it in the file js that uses the template. )

Unified definition method in any js file

Const template = {handleTap () {console.log ('template template click')}} export default template

Just import where you need it.

/ / index.jsimport template from'.. / template/template';Page ({handleTap:template.handleTap}) about data transfer in js files

You can get the entire data of the index.js file directly in template.js.

Similarities and differences between template template and Component component

Identical point

It's all for the reuse of the code.

Can not be rendered alone, must be attached to the display on the page

Difference

Template template: lightweight, mainly for presentation. There are no configuration files (.json) and business logic files (.js), so variable references and business logic events in the template template need to be defined in the [page js of the reference template] file.

Component component: has its own business logic, made up of four files, similar to page, but js files and json files are different from pages.

Choice

If it's just a presentation, use template is enough.

If there are a lot of business logic interactions involved, it is best to use component components

Scope of import

Import has the concept of scope, that is, it only import the template defined in the target file, not the template of the target file import.

C import B import A template C can use A, but C can't use A, so this is the answer to the question on how to use the Mini Program template template. I hope the above content can be of some help to you. If you still have a lot of questions to solve, you can follow the industry information channel for more related knowledge.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.