background

In the last article, we have introduced the host environment, startup process and page rendering process of wechat applets. We also introduced life cycle functions. Behaviors can be used to make multiple pages have the same data fields and methods, and Components can be used to build more complex pages. The previous articles have given us an overview of the various parts of wechat applet development. In this article, we will introduce the capabilities of WXML. WXML is a set of markup languages designed for the framework, written in WXML as mentioned earlier, which will define the structure of the page, with data binding, list rendering, conditional rendering, templates, and events capabilities.

Data binding

When rendering a Page in wechat mini program, the framework binds the WXML file to the corresponding Page’s data. In the Page, you can directly use the data attributes using Mustache syntax, which is to wrap variables or simple arithmetic rules with double braces. The main rendering methods are as follows:

Simple binding

Simple binding is simply using Mustache syntax (double curly braces) to wrap variables and use them directly in the template as string output, which can be used for content, component properties, control properties, keywords, etc. Keyword output is the output of JavaScript keywords according to their truth values. Create a test page with the test.wxml content as follows:

<! --pages/test/test.wxml--> <! <view>{{content}}</view> <! As output -- -- - > < view style = "border: {{border}}" > render as properties < / view > <! -- -- > keyword < checkbox checked = "{{false}}" > < / checkbox >Copy the code

Test. json contains the following content

*/ data: {content: 'as content ', border: 'solid 1px #f00', showContent: 'false'}, /** * lifecycle function -- listen for page load */ onLoad: function (options) {},})Copy the code

The final result is as follows

Check = “false”; check = “{{false}}”; check = “{{false}}”

operation

In {{}} can not only directly display data, but also support some simple operations such as ternary operation, arithmetic operation, judgment logic, string operation. Again, take the test page, whose test.wxml looks like this

<! --pages/test/test.wxml--> <! --> <view>{{showContent? 'Display text' : 'display text '}}</view> <! - arithmetic operator - > < view > {{num1 + num2}} + 1 + {{num3}} =? </view> <! <view>{{"name: "+ name}}</view> <! {{num3 > 3}}</view> <! - data path arithmetic -- -- > < view > {{student. Age}} {{myArray on [0]}} < / view >Copy the code

Test. The js as follows

Data: {showContent:false, num1:1, num2:2, num3:3, name: 'QStack', student: {age: 1}, myArray: ['arr1', 'arr2']}, /** * life cycle function --Copy the code

The end result is as follows

combination

This combination is often used in arrays or objects. Array composition is relatively simple, and object composition is often used in templates, as we will cover in more detail in the next article. Array composition is simply placing values directly under one of the subscripts of the array:

<! - array combination - > < view > {{[myValue, 2, 3, "string"]}} < / view >Copy the code
Page({myValue: 1,}, /** * life cycle function -- listen to Page load */ onLoad: function (options) {},})Copy the code

The final result is zero

1, 2, 3, string
Copy the code

Conditions apply colours to a drawing

wx:if

In addition to simple data binding, logical branching is often used to control whether or not to render the part, using wx:if=”{{criterion}}” to render or not, rendering the code block if the criterion is true and not rendering otherwise.

<view wx:if="{{showContent}}" >{{[myValue, 2, 3, "string"]}}</view>
Copy the code
Data: {myValue: 1, showContent: false}, /** * life cycle function -- listen to Page load */ onLoad: function (options) { }, })Copy the code

While the code above does not render, WXML also supports using wx:elif and wx:else, as shown below

<view wx:if="{{showContent}}" >{{1}}</view> <view wx:elif="{{showContent}}" >{{2}}</view> <view wx:else="{{! showContent}}" >{{3}}</view>Copy the code

block wx:if

Wx :if is a control property that can be applied to any component, but if you want to control multiple controls without affecting the layout, you can use block:if. A block is not a component but a wrapper element that does no rendering during rendering and is controlled by the property.

Wx: if and hidden

Wx: If controls whether to render, hidden controls whether to display, and whatever value hidden calls the render thread to render the component. Hidden works for scenarios where the state changes frequently, avoiding repeated rendering that affects performance.

The list of rendering

The wX :for control property of the component is used to iterate over the number group and repeatedly render the component. During the traversal process, the subscript variable of the current item defaults to index and the variable name of the current item of the array defaults to item. For example:

<view wx:for="{{myArray}}">{{index}} : {{item}}</view>
Copy the code
// pages/test/test.js Page({myArray: [0, 1, 2],}, // myArray: [0, 1, 2],}, / function (options) { }, })Copy the code

Index and item variable names can be changed by wx:for-index and wx:for-item attributes. In ordinary traversal, it is not necessary to change index and item. When Wx :for is nested, it is necessary to set variable names to avoid variable names duplication, such as traversing a two-dimensional array.

<view wx:for="{{myArray}}" wx:for-index="myIndex" wx:for-item="myItem">
    <block wx:for="{{myItem}}" wx:for-index="subIndex" wx:for-item="subItem">
        {{subItem}}
    </block>
</view>
Copy the code
// pages/test/test.js Page({/** ** */ data: {myArray: [[1, 2, 3], [4, 5, 6], [7, 8, 9]]}, function / * * * life cycle - listening page load * / onLoad: function (options) {},})Copy the code

The last

If you are interested, you can follow the public account QStack, which will share some articles and free learning resources regularly.