Template syntax

WXML is a set of tag language for framework design. Combined with basic components and event system, it can build the structure of the page

Differences between WXML and HTML:

• text in WXML is equivalent to span in HTML
• view in WXML is equivalent to div in HTML
• Checkboxes in WXML are equivalent to checkbox es in HTML

Data binding

Page({
    data:{
        msg:"hello mina",
        num:10000,
        isGirl:false,
        person:{
            name:"king",
            age:50
        },
        isChecked:false
    }
})

<!--character string-->
<view>{{msg}}</view>
<!--number-->
<view>{{num}}</view>
<!--bool type-->
<view>Is it a fake mother{{isGirl}}</view>
<!--object-->
<view>{{person.age}}</view>
<!--Use in label properties-->
<view data-num="{{num}}">Custom properties</view>
<!--use boll Type when attribute checked
 There should be no space between the string and curly braces, otherwise the recognition will fail
-->
<checkbox checked="{{isChecked}}"></checkbox>

operation

<!--Addition and subtraction-->
<view>{{1+1}}</view>
<view>{{'1'+'1'}}</view>
<!-- Ternary expression-->
<view>{{10%2===0?"even numbers":"Odd number"}}</view>

List rendering

1. wx:for = "{array or object}}" wx:for item = "name of circular item" wx:for index = "index of circular item"

2. wx:key = "unique value" is used to improve the performance of list rendering

   1. When wx:key binds an ordinary string, the string name must be the only attribute of the object in the circular array
   2. wx:key="*this" means that your array is an ordinary array, and "* this" means that it is a circular item

3. When there is a nested loop of arrays, pay particular attention not to duplicate names

4. By default, we do not write Wx: for item = "item" Wx: for index = "index". The applet will also write the name of the circular item and the name of the index item and index

   Wx: for item = "item" Wx: for index = "index" can be omitted only if there is a layer of loop‘

5. Object loop, Wx: for item refers to the value of the object, and Wx: for index refers to the attribute of the object

The variable name of the item is item by default. Wx: for item can specify the variable name of the current element of the array

The subscript variable name defaults to index. Wx: for index can specify the variable name of the current subscript of the array

<view>
	<view wx:for="{{list}}" wx:for-item="item" wx:for-index="index">
    Indexes:{{index}}
        --
    Value:{{item.name}}
    </view>
</view>

wx:key is used to improve the performance of data rendering

Wx: the value of the key binding. The following options are available:

1. string type, which represents the unique property of the circular item

   list:[{id: 0, name: "Fried rice"}, {id: 1, name: "Stir-Fried Noodles with Vegetables"}]
   wx.key="id";
   

   <view>
     <view wx:for="{{list}}" wx:key="index" wx:for-item="item" >
       {{index}}---{{item.name}}
     </view>
   </view>
   

2. The reserved word * this means item itself, * this must represent a unique string and array

   list:[1, 2, 3, 4, 5]
   wx:key="*this"
   

block tag

Block can be seen when writing code, but it will not become a real dom element when running code -- at run time, the block tag disappears, but other tags are not affected

Usage: used to bind loops

<block wx:for="{{list}}">
    <view>
        {{index}}---{{item.name}}
    </view>
</block>

conditional rendering

wx:if

In the framework, use wx:if"{{condition}}" to determine whether the code block needs to be rendered

<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>

• if is executed, elif and else are not executed
• if not, elif is executed, else is not executed
• zhijieif and elif are not valid, else is executed

hidden

1. Add the attribute hidden directly to the tag - the tag is hidden directly
2. hidden = "{conditional expression}}"

<view hidden>11111</view>
<view hidden="{{true}}">22222</view>

Differences and application occasions

1. When the label does not switch display frequently, Wx if is preferred

   Remove tags directly from the page structure

2. When the labels are frequently switched, hidden is preferred

   Toggle display by adding styles