1. WXML syntax
The wxml syntax mainly includes: data binding list rendering condition rendering template reference
1.wxml overview and function
WXML (WeiXin Markup Language) is a set of labeling languages designed by the framework. Combined with basic components and event systems, the structure of the page can be constructed, and the function is similar to html.
2. Data Binding
The dynamic data in WXML all come from the data of the corresponding Page. Use the { {variable|js single number line expression}} syntax to parse the output on the corresponding .wxml page.
The business data needed for the first rendering of the page, when the page is loaded, the data will pass the data from the logic layer to the view layer in the form of json string.
Use the syntax :
<!-- ============= data binding { {variable|js single-line expression}}========== -->
<!-- 1. Component content binding { {}} -->
<!-- <view>hello</view>
<view>{ {str}}</view>
<view>{ {'Hello'}}</view>
<view>{ {[1,2,3]}}</view>
<view>{ { {id:1,name:"李四"} }}</view> -->
<!-- 2. Component attribute id Note that there are no spaces between quotation marks and curly braces -->
<!-- <view id="11">id</view>
<view id="{ {id}}">id--attribute variable</view> -->
<!--Question: -->
<!-- <view id="{ {id}}">id-- attribute variable</view> -->
<!-- 3. Component attribute class -->
<!-- <view class="box">class</view>
<view class="{ {className}}">class--variable writing</view> -->
<!-- 4. Component attribute style -->
<!-- <view style="margin: 40px;background: red;">style</view>
<view style="margin: { {magin}}px;background: red;">style-variable writing</view> -->
<!-- 5. The component attribute keyword bool(true | false) must be nested in { {}} -->
<!--Incorrect usage: <view hidden="false">hello</view> -->
<!-- <view hidden="{ {false}}">hello</view>
<view hidden="{ {true}}">hello</view> -->
<!-- 6. Operation expression + - * / Ternary operation data path value (array object) -->
<!-- <view>{ {1+1+3}}+5</view>
<view>{ {'hello'+'Hello'+str}}</view>
<view>{ {5>13 ? 'greater than' : 'less than'}}</view>
<view class="{ {5 >23 ? className : ''}}">ternary dynamic class</view> -->
<!-- Note: complex single-line expressions, js built-in functions are not supported -->
<!-- <view>{ {Math.random()}}</view>
<view>{ {score[1]}}</view>
<view>The user name is: { {user.name}}</view>
<view>Id: { {userInfo[0].id}}--The user name is: { {userInfo[0].name}}</view> -->
Note:
1. Note that there should be no spaces between quotation marks and curly braces
2. If the value of the attribute is bool type, note that the bool type must be nested in { {}}, if the value is true, it can be abbreviated (only write the attribute name but not the value)
3. Whether it is the value or content of the attribute on the component, as long as it is a variable, it must be nested in { {}}
3. List rendering wx:for
Binding an array using the `wx:for` control property on a component will render the component repeatedly using the data from each item in the array.
The subscript variable name of the current item of the default array defaults to `index`, and the variable name of the current item of the array defaults to `item`
Use the syntax:
wx:for default subscript name: index default value name: item modify subscript name: wx:for-index modify item value name: wx:for-item
<!-- 2. List rendering (loop) The loop syntax is also an attribute and a control attribute -->
<!-- Syntax: wx:for Default subscript name: index Default value name: item
Modify subscript name: wx:for-index Modify item value name: wx:for-item -->
<!-- 2.1 Loop array[] -->
<!-- <view wx:for="{ {score}}" wx:key="*this"> -->
<view wx:for="{ {score}}" wx:key="index">
The subscript is: { {index}}----The value is: { {item}}
</view>
<!-- Rewrite the default subscript name and variable name wx:for-index wx:for-item nested loop needs to be rewritten -->
<view wx:for="{ {score}}" wx:for-index="i" wx:for-item="m">
The subscript is: { {i}}----The value is: { {m}}
</view>
<!-- 2.2 Loop object {} vue: (value,key,index) in user-->
<view wx:for="{ {user}}">
The subscript is: { {index}}----The value is: { {item}}
</view>
<!-- 2.3 Loop object array [{},{}] -->
<!--Incorrect usage: <view wx:for="{ {userInfo}}" wx:key="{ {item.id}}"> -->
<view wx:for="{ {userInfo}}" wx:key="id">
The subscript is: { {index}}----The value is: { {item.name}}
</view>
<!-- 2.4 Note that there can be no spaces between quotation marks and curly braces -->
<view wx:for="{ {[1,2,3]}} ">
The subscript is: { {index}}--the value is { {item}}
</view>
<view wx:for="{ {[1,2,3]+' '}}">
The subscript is: { {index}}--the value is { {item}}
</view>
Note:
1. No spaces between quotation marks and curly braces
wx:key：
effect:
When data changes trigger the rendering layer to re-render, the components with keys will be corrected, and the framework will ensure that they are reordered instead of recreated to ensure that the components maintain their own state and improve the efficiency of list rendering.
Define key:
1. If the list is static, you do not need to define the key.
2. String, representing a certain property (object array format) of the item in the array of the for loop. The value of this property needs to be the only string or number in the list, and cannot be changed dynamically. (the id of the data).
3. The reserved keyword `*this` represents the item itself (number/string type array) in the for loop. This representation requires the item itself to be a unique string or number.
1.
<view
wx:for="{ {array}}"
wx:for-index="i"
wx:for-item='m'
wx:key="*this"
>
The subscript is { {i}} --- the value is { {m}}
</view> -->
2.
<view wx:for="{ {userInfo}}" wx:key="id">
The subscript is { {index}} --- the value is { {item.name}}
</view>
Note:
The value of key does not need to be nested in { {}}, even if it is a variable
4. Conditional rendering
In the process of applet development, we often encounter branch operations, which we call conditional rendering here, and to implement conditional rendering in applets, we use wx:if
Use the syntax :
wx:if wx:elif wx:else
<view wx:if="{ {score[0] > 90}}">优秀</view>
<view wx:elif="{ {score[0] > 70}}">良好</view>
<view wx:else="">一般</view>
if VS hidden：
`wx:if` is also **lazy**, if the condition is `false` during the initial render, the framework does nothing, and only starts partial rendering when the condition becomes true for the first time.
In contrast, `hidden` is much simpler, the component will always be rendered, just simply control showing and hiding.
In general, `wx:if` has a higher switching cost and `hidden` has a higher initial rendering cost. Therefore, `hidden` is better for situations where frequent switching is required, and `wx:if` is better if conditions are unlikely to change at runtime.
<view wx:if="{ {true}}">if-显示</view>
<view wx:if="{ {false}}">if-do not display</view>
<view hidden="{ {false}}">hidden-显示</view>
<view hidden="{ {true}}">hidden-do not display</view>
block uses :
The use of block will not be displayed on the page output mainly to place the loop (wx:for) and judge (wx:if) multiple code segment output, hidden block cannot be used
<!-- <block wx:for="{ {array}}">
The subscript is { {index}}----the value is { {item}}
</block> -->
<view class="info">
<!-- The user has logged in to display information -->
<block wx:if="{ {buffer}}">
<image src="../../images/0.jpg"></image>
<text>Li Si</text>
</block>
<!-- The user is not logged in and prompted to log in -->
<button wx:else>Please log in</button>
</view>
5. Template
Similar to vue.js, WeChat applets also have template syntax. WXML provides templates (templates), which can define code fragments in the templates and then call them in different places. Can improve code reuse rate
Define the template:
<templatename='the name of the template'>
Business Components...
</template>
Use templates:
<templateis='The name of the template'/>
Template pass parameters:
data="" <templateis='The name of the template' data="param1,"param2...." />
Use the syntax :
<!--Code reuse template name is data -->
<!-- 1. Basic use -->
<!-- 1.1 Define a code fragment (small program label) name-->
<!-- <template name="demo1">
<view>
<text>User name is: Li Si--age is: 20</text>
</view>
</template> -->
<!-- 1.2 Use code snippet is -->
<!-- <template is="demo1" />
<template is="demo1" /> -->
<!-- 2.data transfer-->
<!-- There is no data in the template that needs to be passed by the user. There is no style, and the user needs to set the style -->
<!-- 2.1 Define Templates -->
<!-- <template name="demo2">
<view>
<text>User name is: { {name}} -- age is: { {age}}</text>
</view>
</template> -->
<!-- 2.2 Using templates -->
<!-- <template is="demo2" data="{ {name,age}}" /> -->
<!-- 3.data transfer object format -->
<!-- 3.1 Define Templates -->
<!-- <template name="demo3">
<view>
<text>User name is: { {user.name}} -- age is: { {user.age}}</text>
</view>
</template> -->
<!-- 3.2 Using templates -->
<!-- <template is="demo3" data="{ {user}}" /> -->
<!-- 4.data transfer object format: {} ... -->
<!-- 4.1 Define Templates -->
<!-- <template name="demo4">
<view>
<text>User name is: { {name}} -- age is: { {age}}</text>
</view>
</template> -->
<!-- 4.2 Using templates -->
<!-- <template is="demo4" data="{ {...user}}" /> -->
<!-- 5.data transfer format array object: [{},{}...] -->
<!-- 5.1 Define Templates -->
<!-- <template name="demo5">
<view>
<text>User name is: { {name}} -- age is: { {age}}</text>
</view>
</template> -->
<!-- 5.2 Using templates -->
<!-- <template
is="demo5"
wx:for="{ {userInfo}}"
wx:key="id"
data="{ {...item}}"
/> -->
Note:
1. The template itself has no data, whoever uses it will pass it (data)
2. The template does not have js logic files and wxss style files, and the user needs to set the style and logic
6. Quote
1.import
import imports the template defined in the target file.
<!-- 1.import introduces the template in the target file (.wxml file) -->
<!-- 1. Import template -->
<importsrc="../../temp/demo6.wxml"/>
<!-- 2. Use the imported template -->
<templateis="demo6"data="{ {...user}}"/>
WXML provides two file reference methods import and include.
Import scope: import has the concept of scope, that is, only the template defined in the target file will be imported, and the template imported by the target file will not be imported.
<!-- 3. The scope of import cannot be used as a file template, it must be a direct use relationship -->
<importsrc="../../temp/demo6.wxml"/>
<!-- Template `demo7` not found. -->
<templateis="demo7"/>
2.include
include can import the entire code of the target file except <template/> and wxs module, which is equivalent to copying to the include location.
<!-- 1. Introduce the code fragment in the target file -->
<includesrc="../../temp/demo6.wxml"/>