[WeChat Mini Program] Learn about data binding and event binding of Mini Programs

Hits: 0

Article directory

1. Data binding

Basic principles of data binding:

  1. define data in data
  2. Working with data in WXML

In the .jsfile , define the data into the data object, then bind the data in the data to the page for rendering, and use the Mustachesyntax (double curly braces) to wrap the variables.

< view > {{data name}} < view >

Use Cases:

First define the data in data, and then Mustacherender the data to the page through syntax in wxml.

data: {


Application of Mustache syntax:

  • Dynamically bind content
  • Dynamically bound properties
  • Operations (ternary operations, arithmetic operations, etc.)

1.1 [Dynamic binding] content

Define data in data:
Use data in wxml:

1.2 Dynamically Binding Events

The page data is as follows:
The page structure is as follows:

1.3 Ternary operations

Page data:
Page structure:

1.4 Arithmetic operations

The page data is as follows:
The page structure is as follows:

2. Event binding

2.1 What is an event

Events are the communication method from the rendering layer to the logic layer. Through events, the behavior generated by the user in the rendering layer can be fed back to the logic layer for business processing.

2.2 Commonly used events in Mini Programs

2.3 Attribute list of event object

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

2.4 Difference between target and currentTarget

targetis the source component that triggered the event, and currentTargetis current event is bound. An example is as follows:
When the inner button is clicked, the click event spreads out in a bubbling manner, and also triggers the tap event handler of the outer view. At this point, for the outer view:

  • e.targetIt points to the source component that triggers the event, so e.target is the internal button component
  • e.currentTargetPoints to the component that is currently triggering the event, so e.currentTarget is the current view component

2.5 Syntax of bindtap

In the applet, there is no onclick mouse click event in HTML, but the tap event is used to respond to the user’s touch behavior. Through bindtap, you can bind tap touch events for components, the syntax is as follows:
The corresponding event handler function is defined in the .jsfile , and the event parameters are received through the formal parameter event(usually abbreviated as e):

2.6 Assign values ​​to the data in data in the event handler

By calling the this.setData(dataObject)method , the data in the page data can be reassigned, for example:

2.7 Event parameter transfer

The event parameter passing in the applet is special, and it is not possible to pass parameters for the event handler function when binding the event. For example, the following code will not work properly:
because the applet will treat bindtapthe property value of as the event name, which is equivalent to calling an btnHandler(123)event handler named .

You can provide data-*custom , where * represents the name of the parameter. The sample code is as follows:


  • info will be parsed as the name of the parameter
  • The value 2 will be parsed as the value of the parameter

In the event processing function, the value of the specific parameter can be obtained through the event.target.dataset. parameter name. The sample code is as follows:

2.8 Syntax format of bindinput

In the applet, the input event of the text box is responded to by the input event. The syntax format is as follows:

bindinputYou can bind input events to text boxes by: define event handlers
in the page’s .jsfile :

2.9 Implement data synchronization between the text box and data

Implementation steps:

  1. define data
  2. render structure
  3. beautify style
  4. Bind the input event handler

Define data:

Rendering structure
Beautification style:
binding input event handler

You may also like...

Leave a Reply

Your email address will not be published.