Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "what is the method of WeChat Mini Programs event handling and data binding". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "what is the method of WeChat Mini Programs event handling and data binding" can help you solve the problem.

WXML (WeiXin Markup Language) is a set of tag language designed by the framework. Combined with basic components and event system, the structure of the page can be constructed. Its syntax is consistent with XML.

Main screen

The content of the main screen is defined by index.wxml. Its contents are as follows:

{{userInfo.nickName}}

{{motto}}

Let's explain the content of index.wxml in a little more detail. So that the programmer can also understand it.

Annotation

Is a comment line, and the format of the comment line in XML is.

Outermost container

The next line from the second to the last constitutes the outermost container. The class of this container is defined as "container", and this "container" is defined in the app.wxss mentioned in the previous article. Wxml and wxss are linked in this way.

Two containers are defined in the next level, corresponding to user information and "HelloWorld" information.

User information container

The class of the container corresponding to the user information is defined as "userinfo", which is defined in index.wxss.

A bindtap keyword is added here, which is specified as "bindViewTap". It means that when the user clicks on the component, the corresponding event handler bindViewTap will be found in the corresponding Page on the page.

The user information container also contains image objects and text objects. They also use the class keyword to specify the display properties, so we won't explain them one by one. What we are going to show is data binding, which uses Mustache syntax (double curly braces) to wrap variables, and the effect of data binding is equivalent to embedding variables in the page description. It can be assumed that these variables will be replaced by the actual value (or Image) when the program is actually executed. The provider of these values is the .js file, which we will explain in the next article. Specifically, the image object is bound to the userInfo.avatarUrl,text object is bound to userInfo.nickName.

Greeting

Contains a simple text object bound to motto.

Log represents the page

{{index + 1}}. {{log}}

The view-related content in this code has been mentioned above, and only block is explained here. In this example, block defines a presentation region in the container that is populated with the contents of the array:

Use the wx:for control property to specify that the bound array is logs

Use wx:for-item to specify that the variable name of the element taken from the array is log

Use wx:key to specify the relationship between log and array elements. In this case, the setting is "* this", which means that log is the array element itself; if the array element contains multiple attributes, you can specify the attribute name to select a specific attribute.

This is the end of the content about "what is the method of WeChat Mini Programs event handling and data binding". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.