Wxml template syntax in wechat applet

Catalog

One 、 Data binding

1. Basic principles of data binding

2. stay data Define the data of the page in

3. Mustache The format of grammar  

​4. Mustache Application scenario of Syntax

5. Dynamically bind content  

6. Dynamic binding properties

​7. The ternary operation

Two 、 Event binding  

1. What is an event

2. Events commonly used in applets  

3. Property list of the event object

4. target and currentTarget The difference between  

5. bindtap The grammar of

6. In the event handler function is data Data assignment in  

7. Event biography  

8. bindinput The grammar of

9. Implement text boxes and data Data synchronization between  

3、 ... and 、 Conditions apply colours to a drawing  

1. wx:if

2. combination Use wx:if

3. hidden

​4. wx:if And hidden Comparison of

Four 、 The list of rendering  

1. wx:for

2. Manually specify the index and the variable name of the current item *

​3. wx:key Use

One 、 Data binding

1. Basic principles of data binding

①  stay data Data defined in

②  stay WXML Using data in

2. stay data Define the data of the page in

On the page corresponding to .js In file , Define data to data In the object ：

3. Mustache The format of grammar  

  hold data The data in is bound to render in the page , Use Mustache grammar （ Double brace ） Just wrap the variables . The grammar format is ：

 4. Mustache Application scenario of Syntax

 Mustache The main application scenarios of syntax are as follows ：  

• Binding content  
• Binding properties  
• operation （ The ternary operation 、 Arithmetic operations, etc ）

5. Dynamically bind content  

The data of the page is as follows ：

The structure of the page is as follows ：

6. Dynamic binding properties

  The data of the page is as follows ：

The structure of the page is as follows ：

7. The ternary operation

  The data of the page is as follows ：

  The structure of the page is as follows ：

Two 、 Event binding  

1. What is an event

Events are the means of communication from the rendering layer to the logical layer . Through events, the user's behavior in the render layer can be , Feed back to the logic layer for business processing .

2. Events commonly used in applets  

3. Property list of the event object

When the event callback is triggered , Will receive an event object event, Its detailed properties are shown in the following table ： 

4. target and currentTarget The difference between  

target Is the source component that triggered the event , and currentTarget Is the component bound by the current event . Examples are as follows ：

When you click the internal button , Click the event to bubble outward , It also triggers the outer layer view Of tap Event handler . here , For the outer layer view Come on ：

• e.target It points to the source component that triggers the event , therefore ,e.target It's an internal button component
• e.currentTarget It refers to the component that is currently triggering the event , therefore ,e.currentTarget It is current. view Components  

5. bindtap The grammar of

In the applet , non-existent HTML Medium onclick Mouse click event , But through tap Event in response to the user's touch behavior .

①  adopt bindtap, You can bind to components tap Touch event , The grammar is as follows ： 

②  On page .js Define the corresponding event handling function in the file , Event parameters are defined by formal parameters event（ Generally abbreviated as e） To receive ： 

6. In the event handler function is data Data assignment in  

By calling this.setData(dataObject) Method , You can give pages data Reassign the data in , Examples are as follows ：

7. Event biography  

The event parameters in the applet are special , You cannot pass parameters to an event handler while binding an event . for example , The following code will not work properly ：

  Because the applet will bindtap The attribute value , It is treated as an event name , Equivalent to calling a btnHandler(123) Event handler for .

Can provide... For components data-* Custom attribute transfer parameter , among * Represents the name of the parameter , The sample code is as follows ：

Final ：  

• info Will be resolved to the name of the parameter  
• The number 2 Will be resolved to the value of the parameter  

In the event handler , adopt event.target.dataset. Parameter name You can get the value of specific parameters , The sample code is as follows

 8. bindinput The grammar of

  In the applet , adopt input Event in response to the input event of the text box , The syntax is as follows ：

①  adopt bindinput, You can enter events for text box binding ： 

②  On page .js Event handling functions defined in the file ： 

9. Implement text boxes and data Data synchronization between  

Implementation steps ：

1. Defining data
2. Render structure
3. Beautification style
4. binding input Event handler

1. Defining data ： 

2. Render structure ： 

3. Beautification style ： 

 4. binding input Event handler ：

3、 ... and 、 Conditions apply colours to a drawing  

1. wx:if

In the applet , Use wx:if="{ {condition}}" To determine whether the code block needs to be rendered ：

  It can also be used. wx:elif and wx:else To add else Judge ：

2. combination <block> Use wx:if

  If you want to control the display and hiding of multiple components at one time , You can use one <block></block> Tags wrap multiple components , And in <block> Use on label wx:if Control properties , Examples are as follows ：

  Be careful ： <block> It's not a component , It's just a package container , No rendering in the page .

3. hidden

In the applet , Use it directly hidden="{ { condition }}" It can also control the display and hiding of elements ： 

4. wx:if And hidden Comparison of

①  The operation mode is different  

• wx:if By dynamically creating and removing elements , Control the display and hiding of elements  
• hidden By switching styles （display: none/block;）, Control the display and hiding of elements

②  Use advice  

• When switching frequently , It is recommended to use hidden  
• When the control conditions are complex , It is recommended to use wx:if collocation wx:elif、wx:else Switch between show and hide

Four 、 The list of rendering  

1. wx:for

adopt wx:for According to the specified array , Loop render duplicate component structures , Examples of syntax are as follows ：

  By default , The index reference of the current circular item index Express ; Current circular item item Express .

2. Manually specify the index and the variable name of the current item *

1. Use wx:for-index You can specify the variable name of the index of the current circular item  
2. Use wx:for-item You can specify the variable name of the current item

The sample code is as follows ：

 3. wx:key Use

Be similar to Vue List rendering :key, When the applet realizes list rendering , It is also recommended that you specify a unique name for the rendered list item key value , So as to improve the efficiency of rendering , The sample code is as follows ：