Shulou(Shulou.com)05/31 Report--

This article introduces the relevant knowledge of "how to use the template template in WeChat Mini Programs". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Detailed explanation of WeChat Mini Programs template template

As shown in the figure below, when I am working on Mini Program of China Business School, the structure of the course search results page and the course list page is exactly the same, so it is very suitable to use templates to complete the page construction. Implement a definition once and use it everywhere.

Template

First, define the template

1. Create a new template folder to manage all the templates in the project

2. Create a new courseList.wxml file to define the template

3. Use the name attribute as the name of the template. Then define the code snippet inside.

Note:

a. You can see that multiple templates can be defined in a .wxml file, which only needs to be distinguished by name

b. The data in the template are all expanded attributes.

{{courseName}}-{{teacherName}} {{playCount}} {{score}} {{courseName}}-{{teacherName}} {{playCount}} {{score}} {{studyProgress}}

Second, use the template

1. Use the is attribute to declare the template you need to use

2. Input the data required by the template, and we usually use list rendering.

Note:

a. You can use an expression to determine which template to use is= "{index%2 = 0? 'courseLeft':' courseRight'}}"

Or through wx:if to determine. Index is the subscript of the current item of the array.

B. Data is the data to be rendered by template, data= "{{... item}}" is written by ES6, item is the current item of wx:for,. Is the expansion operator, so that {{item.courseName}} is no longer needed in the template, but directly {{courseName}}.

Third, template style

1. When you create a new template, create a new courseList.wxss file at the same time, and control the style in the same way as CSS.

2. Import in the .wxss file of the page that needs to use the template, or directly in app.wxss, so that you only need to import once and other files do not need to be imported.

@ import url (".. / template/courseList.wxss"); "how to use the template template in WeChat Mini Programs" is introduced here. Thank you for your reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

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.