preface

In the last summary, we know the logic layer of wechat small program. There are two big examples. The App() instance is used to register a small program, and the Page() instance is used to register a Page. So let’s take a look at the view layer of wechat applet.

Wechat applet view layer

The view layer of wechat applet is written in.wxSS and.wxml and is presented by components. Render data from the logical layer in the view layer, and send events from the view layer to the logical layer. WXML is used to describe the construction of the page, WXSS is used to describe the style of the page, and components are the basic constituent units of the view.

Data binding

The view layer of wechat applet wraps the variables with double curly braces {{}} and finally displays the data values in the WXML page. Example code is as follows:

In the index. The WXML

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

In the index. In js

Page({
    data:{
        message:"Hello World"
    }
});
Copy the code

Component property binding

Component property binding is to bind the data in data to the components of wechat applet. Example code is as follows:

In the index. The WXML

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

In the index. In js

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

Control property binding

The control property binding is used to determine if statement conditions, executing if conditions are met, and not executing otherwise. Example code is as follows:

In the index. The WXML

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

In the index. In js

Page({
    data:{
        contition:true
    }
});
Copy the code

Keyword binding

Keyword binding is often used to bind some keywords of a component. Example code is as follows:

In the index. The WXML

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

Note: Do not write checked=”false”, otherwise it evaluates to a string.

operation

Simple operations can be performed within the view layer, mainly supporting the following operations.

The ternary operation

Example code is as follows:

<view hidden={{flag? True, false}} < / view > > hiddenCopy the code

Mathematical operations

Example code is as follows:

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

logic

Example code is as follows:

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

String operation

Example code is as follows:

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

Page({
    data:{
        name:"DaLin"
    }
});
Copy the code

Data path operation

Example code is as follows:

<view>{{object.key}}{{array[0]}}</view>
Copy the code

Page({
    data:{
        object:{key:'Hellow'},
        array:["DaLin"]
    }
});
Copy the code

Conditions apply colours to a drawing

Wx :if single component

In wechat applet, use wx:if to determine whether the module needs to be rendered. Similar to if else statement. Example code is as follows:

<view wx:if="{{contition}}">True</view>
Copy the code

Multi-condition judgment render statement. Example code is as follows:

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

Block WX: If determines multiple components

Block Wx :if can be used for multi-component rendering when you need to determine whether or not multiple components are rendered. Example code is as follows:

<block wx:if="{{true}}">
    <view>1</view>
    <view>2</view>
</block>
Copy the code

Note:
is not a component, just a wrapper element. No rendering is done on the render page, only control properties are accepted.

The list of rendering

Wx: For list renders individual components

Bind an array on the component using the WX :for control property to render the component repeatedly using the data from the items in the array.

Where the default array scalar is index, and the variable name of the current item is item. Example code is as follows:

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

Page ({data: {array: [{name: "li Ming"}, {name: 'zhang'}]}});Copy the code

You can use wx:for-item to specify the variable name of the current element of the array, and wx:for-index to specify the variable name of the current element of the array. The following is an example:

<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}:{{itemName.name}}
</view>
Copy the code

Block WX: For list renders multiple components

Renders a structure block containing multiple nodes, which can be implemented with wx:for on the

tag. Example code is as follows:

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

3. Wx :key Specifies the unique identifier

If the position of an item in the list changes dynamically or new items are added to the list, and you want the item in the list to maintain its identity and status, you need to use wX :key to specify a unique identifier in the list.

The value of wx:key can be expressed in two ways.

Method 1: String: An attribute that represents an item in the array of the for loop. The value of this attribute needs to be a unique string or number in the list and cannot be changed dynamically. Method 2: Keep the keyword: *this represents the item itself in the for loop, which requires the item itself to be a unique string or number. When data changes trigger layer re-rendering, components with keywords are corrected and the framework ensures that they are reordered. Instead of recreating, ensure the state of the components themselves, and improve efficiency at rendering time. Example code is as follows:

<switch wx:for="{{array}}" wx:key="unique">{{item.id}}</switch>
Copy the code

Page({
    data:{
        array:[
            {id:1,unique:'unique1'},
            {id:2,unique:'unique2'},
            {id:3,unique:'unique3'},
        ]
    }
});
Copy the code

Note: a warning appears if you do not use wx:key. If you know that the list is static, or if you don’t care about its order, you can ignore it.

Define the template

WXML provides template functionality that allows you to define common code snippets in templates and then call them in different places to write once and use them many times.

Define the template

Define the code snippet inside
, specifying the template name using the name attribute. The following is an example:

<template name="msgItem">
    <view>
        <text>{{index}}:{{msg}}</text>
        <text>Time:{{item}}</text>
    </view>
</template>
Copy the code

Use the template

Declare that the template is needed in WXML using the IS attribute, and then pass in the data required by the template. Example code is as follows:

<template is="msgItem" data="{{item}}"></template>
Copy the code

Page ({data: {item: {index: 0, MSG: 'this is a template, time:' 2020-03-02 '}}});Copy the code

The IS property can also use the ternary operator to dynamically render components that need to be displayed. The following is an example:

<template name="odd"> <view> odd </view> </template> <template name="even"> <view> </template> <block Wx: for = "{{[1, 2, 3, 4, 5]}}" > < template is = "{{item % 2 = = 0? 'even':'odd'}}"></template> </block>Copy the code

Reference function

WXML provides import references and include references. The difference is that the former refers to the template file, while the latter refers to the file (except for
).

Impotrt reference

Templates defined by the target file can be referenced in the current file. Example code is as follows:

Declare a template in item. WXML

<template name="itme">
    <text>{{text}}</text>
</template>
Copy the code

Use the defined template in index. WXML.

<import src='item.wxml'></import>
<template is="item" data="{{text:'forbar'}}"></template>
Copy the code

Include references

Include can import the entire object file with the exception of
. That’s like copying it to the location of the include. Example code is as follows:

In the index. WXML page

<include scr="header.wxml"></include>
<view>body</view>
<include scr="footer.wxml"></include>
Copy the code

In the header. WXML page

<view>header</view>
Copy the code

In the footer. WXML page

<view>footer</view>
Copy the code

To be continued…