Template syntax

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

1. Data binding

1.1. Common writing

<view> {{ message }} </view>
Copy the code

Page({
  data: {
    message: 'Hello MINA! '}})Copy the code

1.2. Component properties

<view id="item-{{id}}"> </view>
Copy the code

Page({
  data: {
    id: 0}})Copy the code

1.3. Bool type

Don’t just check =”false”; it evaluates to a string

<checkbox checked="{{false}}"> </checkbox>
Copy the code

2. Operation

2.1. Ternary operation

<view hidden="{{flag ? true : false}}"> Hidden </view>
Copy the code

2.2. Arithmetic operations

<view> {{a + b}} + {{c}} + d </view>
Copy the code

Page({
  data: {
    a: 1,
    b: 2,
    c: 3}})Copy the code

2.3. Logical judgment

<view wx:if="{{length > 5}}"> </view>
Copy the code

2.4. String operations

<view>{{"hello" + name}}</view>
Copy the code

Page({
  data:{
    name: 'MINA'}})Copy the code

2.5. Pay attention to

Spaces between curly braces and quotes will eventually be parsed as strings

3. List rendering

3.1 wx: the for

The variable name of the item is item by default. Wx :for–item specifies the variable name of the current element of the array with subscript. The variable name is index by default The options are as follows

A string that represents a unique attribute in a loop item such as

list:[{id:0,name:"Fried rice"},{id:1,name:"Fried noodles"}]
wx:key="id"
Copy the code

Reserved wordsthisIt means item itself,thisMust represent a unique string and array.

list:[1.2.3.4.5]
wx:key="*this"
Copy the code

Code:

<view wx:for="{{array}}" wx:key="id">
 {{index}}: {{item.message}}
</view>
Copy the code

Page({
  data: {
    array: [{
      id:0,
      message: 'foo',
   }, {
      id:1,
      message: 'bar'}]}})Copy the code

3.2. The block

Rendering a block containing multiple nodes does not end up as a real DOM element

<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>
Copy the code

4. Conditional rendering

4.1 wx: the if

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

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

4.2. hidden

<view hidden="{{condition}}"> True </view>
Copy the code

Similar to wx:if frequently toggled with hidden not often used with wx:if

Wechat small program from entry to ground tutorial (01)
The template syntax of wechat Applets (02)
Wechat small program from entry to ground tutorial (03)
Common Components for getting started with wechat Applets (04)
Wechat Applets for starting custom Components (05)

More related articles and my contact information I put here: gitee.com/haiyongcsdn…

And finally, don’t forget ❤ or 📑

The template syntax of wechat Applets (02)