WeChat applet WXML template syntax summary

This article brings you relevant knowledge about WeChat Mini Program, which mainly introduces the relevant content about WXML template syntax, including data binding, event binding, conditional rendering, List rendering and other issues, let’s take a look at them below, I hope it will be helpful to everyone.

【Related learning recommendations: 小program learning tutorial】

WXML Template syntax- Data binding

1. Basic principles of data binding

① Define data in data #②

Using data in

WXML

2.

In# Define the data of the page in ##data In the

.js file corresponding to the page, define the data Just go to the data object:

3. Mustache

Grammar format##             

Bind the data in

data To render in the page, use Mustache syntax (double braces) to wrap the variables . Similar to the interpolation expression in vue, the syntax format is:

4. Mustache

Application scenarios of grammar Binding content

Binding attributes

1. Operations (ternary operations, arithmetic operations etc.)
5.

Dynamic binding content

# page of the data as follows:

The structure of the page is as follows:

                                                                                                                                               

The data on the

page is as follows:

Q

7.

Ternary operation

The data on the page is as follows:

The structure of the page is as follows:

#8.

Arithmetic operations

##       

WXML Template Syntax

- Event binding:1. What is an event

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

2.

Commonly used events in mini programs

##Type

bindtap #event

3. Attribute list of event object

## When the event callback is triggered, an event object event will be received. Its detailed attributes are as shown in the following table:

Tied Defined method	Event description	tap
or bind: tap	The finger touches and leaves immediately, similar to click ## in HTML
input	##bindinput or bind:input	Input event of text box
change	bindchange or bind:change	Triggered when status changes

##TypeDescription##typetimeStamptargetcurrentTarget

4. The difference between target and currentTarget

## ​ target is the source component that triggered the event, and currentTarget is The component to which the current event is bound. For example:

##When you click the internal button, the click event will

bubble External diffusion will also trigger the tap event processing function of the outer view .

At this time, for the outer

view :

1

.target points to the source component that triggered the event, therefore, e.target is the internal button component

2

.currentTarget points to the component that is currently triggering the event, therefore, e.currentTarget is the current view Component

##5.

The syntax format of bindtap does not exist in the mini program

HTML ## The onclick mouse click event in # responds to the user's touch behavior through the tap event . ①Through

bindtap , you can bind the component tap Touch event, the syntax is as follows:

## ②

In the ## of the page

#.js

The corresponding event processing function is defined in the file, and the event parameters are passed through the formal parameters

event (usually is abbreviated as e) To receive:                                                         

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

        By calling the this.setData(dataObject) method, you can give the page ## The data in #data is reassigned, the example is as follows:

                                                                                    7.

Event parameter passing

                                                                                                                                                                                                                    When binding the event, pass parameters to the event processing function. For example, the following code will not work properly:

        

Because the applet will bindtap # The attribute value of

## is uniformly treated as the event name, which is equivalent to calling an event processing function named

btnHandler(123) .

You can provide data-* to the component, where * represents the name of the parameter

. The sample code is as follows: Finally: 1 info

will be parsed as

The name of the parameter

2 value 2 will be parsed into the value of the parameter

In the event processing function, pass event.target.dataset. Parameter nameYou can get the value of the specific parameter

. The sample code is as follows: 8. The syntax format of

bindinput

##         In the mini program, respond to the input event of the text box through input event, the syntax format is as follows:① Through

bindinput , you can bind input events to the text box:     ②

Define the event processing function in the

.js file of the page:

9. Implement text box and data Data synchronization between

Implementation steps:

① Define data

② Rendering structure

③ Beautification style

④ Binding input Event handling function

Definition data:

##                                                                                         ##Rendering structure:

                                                                                                                     

Binding

input Event handling function:

#WXML

Template Syntax-

Conditional rendering ：

 

1. wx:if#                           ##1. #In the mini program, use wx:if="{{condition}}"

To determine whether the code block needs to be rendered:

You can also use wx:elif and wx:else To addelse Judgment:

##2.

combination## Use wx:if

        If you want to

Control multiple components at one time To display and hide, you can use a tag to wrap multiple components and place them in Use wx:if to control attributes. The example is as follows:

     

##Note: is not A component , it is just a wrapping container, will not do any rendering in the page.

3.hidden ="{{ condition

}}" can also control the display and hiding of elements:

4. wx:if

and

hidden Comparison ①Different operating methods1 wx:if

Control the display and hiding of elements by

dynamically creating and removing elements

2 hidden Control the display and hiding of elements by switching styles

(

display: none/block; )② Usage suggestions1

Frequent switching

It is recommended to use hidden##2 control condition When

is complex, it is recommended to use wx:if Match wx:elif、wx:else Switch between showing and hidingWXML Template syntax- List rendering

1. wx:for

#Through

wx:for , you can loop and render repeated component structures based on the specified array. The syntax example is as follows:

       

      By default, the index of the current loop item is represented by index ; is currently The loop item is represented by item .

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

1 Use wx:for-index to specify the index of the current loop item## The variable name of

#2 uses wx:for-item to specify the current item The variable name

The sample code is as follows:

                                                                                   3. How to use wx:key

#:key in list rendering. When the applet implements list rendering, it is also recommended to specify a unique # for the rendered list items. ##key

value, thereby

Improve rendering efficiency, the sample code is as follows:       [Related learning recommendations: 小program learning tutorial]

##Attributes
String	Event Type
Integer	page opens The number of milliseconds that elapsed until the event was triggered
Object	A collection of some property values ​​of the component that triggers the event
Object	##A collection of some attribute values ​​of the current component	##detail
##Object	Additional information	touches	Array	Touch event, array of touch point information currently staying on the screen
changedTouches	##Array	Touch event, array of currently changed touch point information

The above is the detailed content of WeChat applet WXML template syntax summary. For more information, please follow other related articles on the PHP Chinese website!