Knowledge:
WXML template syntax WXSS template style
WXML template syntax
1. Data binding
1. Basic principles of data binding
① Define data in DATA ② use data in WXML
2. Define page data in data
In the corresponding.js file of the page, you can define the data into the data object
- The format of Mustache grammar
Bind data from data to render in the page using Mustache syntax (double braces) to wrap variables. The syntax format is:
- Mustache grammar in action
The main application scenarios for Mustache syntax are as follows: ⚫ binding content ⚫ binding properties ⚫ operation (triadic operation, arithmetic operation, etc.)
5. Dynamically bind content
6. Dynamically bind properties
7. Triple operation
8. Arithmetic
2. Event binding
Events are the means of communication from the render layer to the logic layer. Through events, users’ behaviors generated in the rendering layer can be fed back to the logic layer for business processing.
2. Common events in applets
The property list of the event object
When the event callback is triggered, an event object is received, whose properties are detailed in the following table:
3. Difference between Target and currentTarget
5. Syntax format of bindtap
In applets, there is no ONclick mouse click event in HTML, but a TAP event that responds to the user’s touch behavior.
Bindtap is used to bindtap touch events to components. The syntax is as follows:
(2) Define the corresponding event handler function in the.js file of the page, and the event parameter is received by the parameter event (commonly abbreviated as e) :
6. Assign values to data in data in event handlers
Data in a page data can be reassigned by calling the this.setData(dataObject) method, as shown in the following example:
7. Event parameter transfer
Event-passing in applets is special. You cannot bind events and pass parameters to event handlers at the same time. For example, the following code will not be positive
Often work:
Because it’s going to treat the bindtap property value as the event name, so it’s going to call a btnHandler(123)
The event handler of.
In the event handler, through event.target.dataset. Parameter name to obtain the value of the specific parameter, the example code is as follows:
8. Bindinput syntax format
In applets, input events are used to respond to the input events of a text box. The syntax is as follows:
Bindinput allows you to bindinput events to text boxes:
