WXML template syntax

1. Data binding

---

1. Basic principles of data binding

1. dataDefine data in
2. WXMLUse data in

2. Define the data of the page in data

• In the file corresponding to the page .js, define the data in data对象:
  

3. Formatting of Mustache syntax

• Bind the data in data to the page for rendering, and use Mustache 语法(double braces) to wrap the variables. The syntax format is:
  

4. Application Scenarios of Mustache Grammar

• binding content
• bind property
• Operations (ternary operations, arithmetic operations, etc.)

5. Dynamically bind content

• The page data is as follows:
  
• The structure of the page is as follows:
  

6. Dynamically bind properties

• The page data is as follows:
  

• The structure of the page is as follows:
  

7. Ternary operation

• The page data is as follows:
  
• The structure of the page is as follows:

8. Arithmetic operations

• The page data is as follows:
  

• The structure of the page is as follows:
  

2. Event binding

---

1. What is an event

• event is 渲染层到逻辑层的通讯方式. Events can be used to feed back user actions in the rendering layer to the logic layer for business processing.
  

2. Events commonly used in applets

3. The property list of the event object

• When the event callback is triggered, an event will be received 对象event, and its detailed properties are shown in the following table:
  

4. The difference between target and currentTarget

---

5. Grammatical format of bindtap

• In the applet, there is no onclick mouse click event in HTML, but to tap事件respond to the user's touch behavior through.

---

1. Through bindtap, the tap touch event can be bound to the component, the syntax is as follows:
   
2. Define the corresponding event processing function in the .js file of the page, and the event parameters are received through formal parameters event(general ):简写成 e
   

6. Assign values ​​to the data in data in the event processing function

• By calling this.setData(dataObject)the method, you can reassign the data in the page data, as shown in the following example:
  

7. Event parameter passing

• Event parameter passing in applets is special, 不能在绑定事件的同时为事件处理函数传递参数. For example, the following code will not work properly:
  
  because the applet will uniformly treat the attribute value of bindtap as the event name, which is equivalent to calling an btnHandler(123) event processing function named .

---

• Components can be provided with data-* custom attribute parameters, 其中 * 代表的是参数的名字, the sample code is as follows:
  
• infowill be parsed as参数的名字
• The value 2will be parsed as参数的值

---

• In the event processing function, it event.target.dataset.参数名can be obtained by passing 具体参数的值, the sample code is as follows:
  

8. Syntax format of bindinput

• In the applet, through input事件to respond to the input event of the text box, the syntax format is as follows:

---

1. Through bindinput, you can bind the input event for the text box:
   
2. Define the event handler function in the .js file of the page:
   

9. Realize data synchronization between text box and data

Implementation steps:

• define data
• rendering structure
• beautification style
• Binding input event handler function

• define data
  

• rendering structure
  

• beautification style
  

• Binding input event handler function
  

3. Conditional rendering

---

1. wx:if

• In the applet, use wx:if="{ {condition}}"to determine whether the code block needs to be rendered:
  
• You can also use wx:elifand wx:elseto add else judgment:
  

2. Use wx:if in conjunction with <block>

• If you want 一次性控制多个组件的展示与隐藏, you can use a <block></block>tag to wrap multiple components, and use the wx:if control attribute on the <block> tag, the example is as follows:
  
• 注意：<block> 并不是一个组件, which is just a wrapping container, 不会在页面中做任何渲染.

3. hidden

• In the applet, directly use hidden="{ { condition }}"can also control the display and hiding of elements:
  

4. Comparison of wx:if and hidden

4. List rendering

---

1. wx:for

• Through wx:for, the repeated component structure can be rendered cyclically according to the specified array. The syntax example is as follows:
  
• By default, the current loop item is 索引denoted indexby ; 当前循环项denoted itemby .

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

• Variable names wx:for-indexcan be specified using当前循环项的索引
• Variable names wx:for-itemcan be specified using当前项
  

3. Use of wx:key

• Similar to Vue list rendering :key, it is also recommended to specify a unique key value for the rendered list items when the applet implements list rendering. Therefore, the 提高渲染的效率sample code is as follows: