WeChat applet WXML template syntax summary

This article brings you relevant knowledge aboutWeChat 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】

WXMLTemplate syntax-Data binding

1. Basic principles of data binding

①Define data indata#②

Using data in

WXML

2.

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

.jsfile corresponding to the page, define the data Just go to thedataobject:

3. Mustache

Grammar format##

Bind the data in

dataTo render in the page, useMustachesyntax(double braces) to wrap the variables . Similar to the interpolation expression in vue, the syntax format is:

4. Mustache

Application scenarios of grammarBinding 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 thepage is as follows:

The structure of the page is as follows:

#8.

Arithmetic operations

##

WXMLTemplate Syntax

-Event binding:1.What is an event

Events arethe 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

3.Attribute list of event object

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

bindtap #event

Tied Defined method	Event description	tap
or bind: tap	The finger touches and leaves immediately, similar toclick## inHTML
input	##bindinputorbind:input	Input event of text box
change	bindchangeorbind:change	Triggered when status changes

4. The difference between targetandcurrentTarget

##targetis thesource componentthat triggered the event, andcurrentTargetisThe component to which the current event is bound. For example:

bubbleExternal diffusion will also trigger thetapevent processing function of the outerview.

view:

.targetpoints to the source component that triggered the event, therefore,e.targetis the internal button component

.currentTargetpoints to the component that is currently triggering the event, therefore,e.currentTargetis the currentviewComponent

The syntax format of bindtapdoes not exist in the mini program

HTML## Theonclickmouse click event in # responds to the user's touch behavior through thetapevent.①Through

bindtap, you can bind the componenttapTouch event, the syntax is as follows:

## ②

#.js

event(usuallyis abbreviated ase) To receive:

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

7.

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

Because the applet willbindtap # The attribute value of

btnHandler(123).

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

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

The name of the parameter

2 value2will be parsed into the value of theparameter

In the event processing function, passevent.target.dataset.Parameter nameYou can get the value of thespecific 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 throughinputevent, the syntax format is as follows:①Through

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

.jsfile of the page:

9.Implement text box anddataData synchronization between

Implementation steps:

①Define data

②Rendering structure

③Beautification style

④BindinginputEvent handling function

Definition data:

## ##Rendering structure:

inputEvent handling function:

#WXML

Template Syntax-

Conditional rendering：

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

To determine whether the code block needs to be rendered:

You can also usewx:elifandwx:else To addelseJudgment:

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 Usewx: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:

and

hiddenComparison①Different operating methods1 wx:if

dynamically creating and removing elements

2 hiddenControl the display and hiding of elements byswitching styles

display: none/block;)②Usage suggestions1

Frequent switching

It is recommended to usehidden##2control condition When

is complex, it is recommended to usewx:ifMatchwx:elif、wx:elseSwitch between showing and hidingWXMLTemplate syntax-List rendering

1. wx:for

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

By default, theindex of the current loop itemis represented byindex;is currently The loop itemis represented byitem.

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

1Usewx:for-indexto specify the index of thecurrent loop item## The variable name of

#2 useswx:for-itemto specify thecurrent itemThe variable name

The sample code is as follows:

3. How to use wx:key

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

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

##Type Description ##type timeStamp target currentTarget ##When you click the internal button, the click event willAt this time, for the outer12##5.In the ## of the pageThe corresponding event processing function is defined in the file, and the event parameters are passed through the formal parameters

6.in the event handler function isdataData assignment in

Event parameter passing## is uniformly treated as the event name, which is equivalent to calling an event processing function namedwill be parsed asDefine the event processing function in the

Binding##2.4. wx:ifControl the display and hiding of elements by(#Throughvalue, thereby

##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!