Detailed description of WeChat mini-app Template and simple examples

This article mainly introduces the details of the mini-program Template and the relevant information of simple examples. if you need more information, refer to the mini-program Template.

Template

WXML provides a Template. you can define code snippets in the Template and use them in different places. Ensure that the format and data are the same.

1-define a template

Use' 'Tag defines the template, name the template as tempName, and assign the value to the attribute name. Inside the tag, define the template structure. As follows:

 
 
   
    
   
     {{index}}: {{msg}} 
     
   
     Time: {{time}} 
    
  
 

2-use templates

Use Tag, where the template needs to be used. If you want to use data in the js file, you need to add the data attribute. As follows:

  
 
 
 The same information is displayed three times on the page. The data in data comes from the js file, as follows:
 Page ({data: {item: {index: 0, msg: 'This is a template', time: '2017-09-15 '}}})

3-is attribute

The is attribute can not only point to the rendering template statically, but also use the Mustache syntax to dynamically decide which template to render. As follows:

 // Templates
   
  
   
Odd
  
 
   
  
   
Even
  
 // The is attribute uses the Mustache syntax to dynamically render the template
   
  
 

The above code displays the odd or even based on the conditions on the page.

4-Template reference

The preceding templates are defined and referenced in the same wxml file, and the template definitions and references can be separated. That is, defining templates in one file, while defining templates in one or more wxml files.
Reference the template from an external file and use the import src = "templateUrl"/> label. Similarly, the is attribute is used to point to the tag to be referenced.
The directory is as follows:

-pages  |--index    |--index.js    |--index.json    |--index.wxml    |--index.wxss  |--template    |--template.js    |--template.json    |--template.wxml    |--template.wxss

To use the template defined in template in index. wxml, you must first use import in index to import the template:

 
 
  

  
Pay attention to the import scope, which only references the template in the target file. For example, C import B, B import A. in C, you can use the template defined by B. in B, you can use the template defined by A, but C cannot use the template defined by.
  
Thank you for reading this article. I hope it will help you. thank you for your support for this site!
  
For more details about the small program Template and simple examples, please follow the PHP Chinese network!