This article brings you relevant knowledge about WeChat Mini Program, which mainly introduces related issues about the view layer. The view layer is responsible for displaying the data of the logical layer on the page, and at the same time Send the events of the view layer to the logic layer. Let's take a look at it. I hope it will be helpful to everyone.

[Related learning recommendations: 小program learning tutorial]

The view layer of the applet framework is composed of WXML (WeiXin Markup Language, WeChat markup language) and WXSS (WeiXin Style Sheet, WeChat style sheet) are written and displayed by components. The view layer is responsible for displaying data from the logic layer on the page and sending events from the view layer to the logic layer. WXML is used to describe the structure of the page, WXSS is used to describe the style of the page, and components are the basic components of the view. The relationship between these three can be compared to the relationship between HTML, CSS and various tags in HTML. In addition to these three, there is also a scripting language for small programs-WXS (WeiXin Script). WXS and WXML are combined to build a page structure.

1. WXML

1. Data binding

(1) Simple binding

Basic principles of data binding :
1) Define the page data in data: In the .js file corresponding to the page, just define the data into the data object.

Page({
??data:{
????//字符串類(lèi)型的數(shù)據(jù)
????info:?'init?data?'?,
????//數(shù)組類(lèi)型的數(shù)據(jù)
????msgList:?[{msg:?'hello'}，{msg:?"world?'}]
??}
})

2) Use data in WXML: Bind the data in data to the page for rendering, and use Mustache syntax (double braces) to wrap the variables. The syntax format is:

<view>{{要綁定的數(shù)據(jù)名稱(chēng)}}</view>

Mustache The main application scenarios of the syntax are as follows:
①Content. Display data content directly on the page.
②Component properties. Use back-end variables to set the properties of some front-end components. Note that the variables enclosed by double curly braces need to be within the double quotes of the properties.
③Control attributes. Use back-end variables to control the display effect of front-end components. Note that variables enclosed by double curly braces need to be within double quotes of attributes.
④Keywords. Mainly used for logical judgment.

(2) Operation

①Ternary operation. Ternary operations can be performed within double curly braces.
In .js:

Page({
??data:?{
????randomNum:Math.random()*10
??}
})

In .wxml:

<view>{{randomNum>=5?'數(shù)字大于等于5':'數(shù)字小于5'}}</view>

② Arithmetic operations. Within double curly brackets, basic arithmetic operations can be performed, and the results of the operations will be directly displayed.
③Logical judgment. Within the double braces, logical operations can be performed, returning true or false of boolean type, which can be used to control certain attributes.
④String operations. Within double braces, string concatenation operations can be performed.
⑤Data path operation. For array and JSON object type data, the value can be obtained by indexing within double curly brackets.

(3) Combination

①Array
②Object

2. List rendering

(1)wx:for

Through wx:for, you can loop and render repeated component structures based on the specified array. The syntax example is as follows:
In .js:

Page({
??data:?{
????array:['a','b','c']
??}
}）

In .wxml:

<view>
?索引是：{{index}}，當(dāng)前項(xiàng)是：{{item}}
</view>

The effect is as shown in the figure :

By default, the index of the current loop item is represented by index; the current loop item is represented by item.

(2) Manually specify the index and variable name of the current item*

• Use wx:for-index to specify the variable name of the index of the current loop item
• Use wx:for-item to specify the variable name of the current item
  In .wxml:

<view>
?索引是：{{idx}}，當(dāng)前項(xiàng)是：{{itemName}}
</view>

The effect is as shown:

(3) wx :key

is similar to :key in Vue list rendering. When the applet implements list rendering, it is also recommended to specify a unique key value for the rendered list items to improve rendering efficiency. The sample code is as follows:
In .js:

Page({
??data:?{
????userList:[
??????{id:1,name:'冠軍'},
??????{id:2,name:'亞軍'},
??????{id:3,name:'季軍'}
????]
??}
})

In .wxml:

<view>{{item.name}}</view>

The effect is as shown:

The value of wx:key is provided in the following two forms:
1) String. Represents an attribute of an item in the array of the wx:for loop. The value of the attribute needs to be a unique string or number in the list and cannot be changed dynamically.
2) Reserved keyword *this. Represents an item itself in the wx:for loop. This representation requires that the item itself be a unique string or number.

3. Conditional rendering

(1)wx:if

In the mini program, use wx:if="{{condition}}" to judge Whether you need to render the code block, you can also use wx:elif and wx:else to add else judgment. Examples are as follows:
In .js:

Page({
??data:?{
????type:1
??}
})

In .wxml:

<view>男</view>
<view>女</view>
<view>保密</view>

（2）結(jié)合 <block></block> 使用 wx:if

如果要一次性控制多個(gè)組件的展示與隱藏，可以使用一個(gè) <block></block> 標(biāo)簽將多個(gè)組件包裝起來(lái)，并在<block></block> 標(biāo)簽上使用 wx:if 控制屬性，示例如下：

<block>
?<view>view1</view>
?<view>view2</view>
</block>

注意： <block></block> 并不是一個(gè)組件，它只是一個(gè)包裹性質(zhì)的容器，不會(huì)在頁(yè)面中做任何渲染。

（3）hidden

在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的顯示與隱藏：

<view>true隱藏，false顯示</view>

（4）wx:if 對(duì)比 hidden

1）運(yùn)行方式不同：
wx:if 以動(dòng)態(tài)創(chuàng)建和移除元素的方式，控制元素的展示與隱藏。
hidden 以切換樣式的方式（display: none/block;），控制元素的顯示與隱藏。
2）使用建議：
頻繁切換時(shí)，建議使用 hidden。
控制條件復(fù)雜時(shí)，建議使用 wx:if 搭配 wx:elif、wx:else 進(jìn)行展示與隱藏的切換。

4.事件

事件是視圖層到邏輯層的通信方式，它可以將用戶(hù)的行為反饋到邏輯層講行處理。事件一般綁定在組件上，當(dāng)設(shè)定監(jiān)聽(tīng)的事件被觸發(fā)時(shí)，視圖層會(huì)將攜帶了id、dataset、touches等信息的事件對(duì)象發(fā)送到邏輯層中，此時(shí)框架就會(huì)執(zhí)行邏輯層中
對(duì)應(yīng)的事件處理函數(shù)，來(lái)響應(yīng)用戶(hù)的操作。

事件分為冒泡事件和非冒泡事件。

• 冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件會(huì)向父節(jié)點(diǎn)傳遞。
• 非冒泡事件：當(dāng)一個(gè)組件上的事件被觸發(fā)后，該事件不會(huì)向父節(jié)點(diǎn)傳遞。

（1）事件的使用方式

.wxml中：

<button>按鈕</button>

.js中定義事件處理函數(shù)：

Page({
??//?定義按鈕的事件處理函數(shù)
??btnTapHandler(event){
????console.log(event)
??}
})

效果如圖：

調(diào)試器的Console面板輸出信息大致為：

（2）事件的分類(lèi)

（3）事件的綁定和冒泡

（4）事件的捕獲階段

（5）事件對(duì)象

當(dāng)組件觸發(fā)事件時(shí)。邏輯層綁定該事件的處理函數(shù)會(huì)收到一個(gè)事件對(duì)象。

（6）在事件處理函數(shù)中為 data 中的數(shù)據(jù)賦值

通過(guò)調(diào)用 this.setData(dataObject) 方法，可以給頁(yè)面 data 中的數(shù)據(jù)重新賦值。示例如下：
.wxml中：

<button>+1</button>

.js中定義事件處理函數(shù)：

Page({
??data:?{
????count:0
??},
??
??//+1?按鈕的事件處理函數(shù)
??countChange(){
????this.setData({
??????count:this.data.count?+1
????})
??}
})

效果如圖：

（7）事件傳參

小程序中的事件傳參比較特殊，不能在綁定事件的同時(shí)為事件處理函數(shù)傳遞參數(shù)?？梢詾榻M件提供 data-* 自定義屬性傳參，其中 * 代表的是參數(shù)的名字，示例代碼如下：

.wxml中：（ info 會(huì)被解析為參數(shù)的名字，數(shù)值 2 會(huì)被解析為參數(shù)的值。）

<button>+2</button>

.js中：（在事件處理函數(shù)中，通過(guò) event.target.dataset.參數(shù)名 即可獲取到具體參數(shù)的值）

Page({
??data:?{
????count:0
??},
??
??//+2?
??binTap2(event){
????this.setData({
??????count:this.data.count?+?event.target.dataset.info
????})
??}
})

效果如圖：

（8）bindinput 的語(yǔ)法格式

在小程序中，通過(guò) input 事件來(lái)響應(yīng)文本框的輸入事件。
.wxml中：

<input>

.js 中定義事件處理函數(shù)：

Page({
??//input輸入框的事件處理函數(shù)
??inputHandler(event){
????console.log(event.detail.value)
??}
})

效果如圖：

（9）實(shí)現(xiàn)文本框和 data 之間的數(shù)據(jù)同步

實(shí)現(xiàn)步驟：①定義數(shù)據(jù)；②渲染結(jié)構(gòu)；③美化樣式；④綁定 input 事件處理函數(shù)。

5.模板

6.引用

WXML提供兩種文件引用方式：import 和 include
1）import 可以在該文件中使用目標(biāo)文件定義的模板。import 有作用域的概念，即只會(huì)導(dǎo)入目標(biāo)文件中定義的模板，而不會(huì)導(dǎo)入目標(biāo)文件導(dǎo)入的模板。
2）include 可以將目標(biāo)文件除了<template></template><wxs></wxs>外的整個(gè)代碼引入，相當(dāng)于復(fù)制到 include 位置。

二、WXSS

WXSS (WeiXin Style Sheets)是一套樣式語(yǔ)言，用于美化 WXML 的組件樣式，類(lèi)似于網(wǎng)頁(yè)開(kāi)發(fā)中的 CSS。WXSS 具有 CSS 大部分特性，同時(shí)，WXSS 還對(duì) CSS 進(jìn)行了擴(kuò)充以及修改，以適應(yīng)微信小程序的開(kāi)發(fā)。
與 CSS 相比，WXSS 擴(kuò)展的特性有：

• rpx 尺寸單位
• @import 樣式導(dǎo)入

1.尺寸單位

rpx（responsive pixel）是微信小程序獨(dú)有的，用來(lái)解決屏適配的尺寸單位。
rpx 的實(shí)現(xiàn)原理非常簡(jiǎn)單：鑒于不同設(shè)備屏幕的大小不同，為了實(shí)現(xiàn)屏幕的自動(dòng)適配，rpx 把所有設(shè)備的屏幕，在寬度上等分為 750 份（即：當(dāng)前屏幕的總寬度為 750rpx）。

• 在較小的設(shè)備上，1rpx 所代表的寬度較小
• 在較大的設(shè)備上，1rpx 所代表的寬度較大

小程序在不同設(shè)備上運(yùn)行的時(shí)候，會(huì)自動(dòng)把 rpx 的樣式單位換算成對(duì)應(yīng)的像素單位來(lái)渲染，從而實(shí)現(xiàn)屏幕適配。

在 iPhone6 上，屏幕寬度為375px，共有 750 個(gè)物理像素，等分為 750rpx。則：
750rpx = 375px = 750 物理像素
1rpx = 0.5px = 1物理像素
官方建議：開(kāi)發(fā)微信小程序時(shí)，設(shè)計(jì)師可以用 iPhone6 作為視覺(jué)稿的標(biāo)準(zhǔn)。

2.樣式導(dǎo)入

使用 WXSS 提供的 @import 語(yǔ)法，可以導(dǎo)入外聯(lián)的樣式表。
@import 后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用 ; 表示語(yǔ)句結(jié)束。

3.內(nèi)聯(lián)樣式

內(nèi)聯(lián)樣式是框架組件上支持使用 style、class 屬性來(lái)控制組件的樣式。
1）style：用于接收動(dòng)態(tài)樣式，在運(yùn)行時(shí)會(huì)進(jìn)行解析。
2）class：用于指定樣式規(guī)則。其值是樣式規(guī)則中類(lèi)選擇器名（樣式類(lèi)名）的集合。一般將靜態(tài)樣式寫(xiě)到對(duì)應(yīng)樣式類(lèi)名的定義中。多個(gè)樣式類(lèi)名之間用空格分隔。

4.選擇器

和CSS一樣，WXSS也需要使用選擇器來(lái)決定樣式的作用對(duì)象。

5.全局樣式與局部樣式

1）全局樣式：定義在 app.wxss 中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。
2）局部樣式：在頁(yè)面的 .wxss 文件中定義的樣式為局部樣式，只作用于當(dāng)前頁(yè)面。

注意：
當(dāng)局部樣式和全局樣式?jīng)_突時(shí)，根據(jù)就近原則，局部樣式會(huì)覆蓋全局樣式。
當(dāng)局部樣式的權(quán)重大于或等于全局樣式的權(quán)重時(shí)，才會(huì)覆蓋全局的樣式。

三、WXS

1.概念

WXS（WeiXin Script）是小程序獨(dú)有的一套腳本語(yǔ)言，結(jié)合 WXML，可以構(gòu)建出頁(yè)面的結(jié)構(gòu)。

2.應(yīng)用場(chǎng)景

wxml 中無(wú)法調(diào)用在頁(yè)面的 .js 中定義的函數(shù)，但是，wxml 中可以調(diào)用 wxs 中定義的函數(shù)。因此，小程序中 wxs 的典型應(yīng)用場(chǎng)景就是“過(guò)濾器”。

3.wxs 和 JavaScript 的關(guān)系

雖然 wxs 的語(yǔ)法類(lèi)似于 JavaScript，但是 wxs 和 JavaScript 是完全不同的兩種語(yǔ)言：
（1）wxs 有自己的數(shù)據(jù)類(lèi)型：

• number 數(shù)值類(lèi)型
• string 字符串類(lèi)型
• boolean 布爾類(lèi)型
• object 對(duì)象類(lèi)型
• function函數(shù)類(lèi)型
• array 數(shù)組類(lèi)型
• date 日期類(lèi)型
• regexp 正則

（2）wxs 不支持類(lèi)似于 ES6 及以上的語(yǔ)法形式

• 不支持：let、const、解構(gòu)賦值、展開(kāi)運(yùn)算符、箭頭函數(shù)、對(duì)象屬性簡(jiǎn)寫(xiě)、etc…
• 支持：var 定義變量、普通 function函數(shù)等類(lèi)似于 ES5 的語(yǔ)法

（3）wxs 遵循 CommonJS 規(guī)范

• module 對(duì)象
• require() 函數(shù)
• module.exports 對(duì)象

4.內(nèi)嵌 wxs 腳本

wxs 代碼可以編寫(xiě)在 wxml 文件中的 <wxs></wxs> 標(biāo)簽內(nèi)，就像 Javascript 代碼可以編寫(xiě)在 html 文件中的 <script></script> 標(biāo)簽內(nèi)一樣。
wxml 文件中的每個(gè) <wxs></wxs> 標(biāo)簽，必須提供 module 屬性，用來(lái)指定當(dāng)前 wxs 的模塊名稱(chēng)，方便在 wxml 中訪(fǎng)問(wèn)模塊中的成員。
.wxml中：

<view>{{m1.toUpper(username)}}</view>

<wxs>
??//將文本轉(zhuǎn)為大寫(xiě)形式zs?->?ZS
??module.exports.toUpper?=?function(str)?{
????return?str.toUpperCase()
??}
</wxs>

5.定義外聯(lián)的 wxs 腳本

wxs 代碼還可以編寫(xiě)在以 .wxs 為后綴名的文件內(nèi)，就像 javascript 代碼可以編寫(xiě)在以 .js 為后綴名的文件中一樣。示例代碼如下：

//tools.wxs文件
function?toLower(str)?{
??return?str.toLowerCase()
}

module.exports?=?{
??toLower:?toLower
}

6.使用外聯(lián)的 wxs 腳本

在 wxml 中引入外聯(lián)的 wxs 腳本時(shí)，必須為 標(biāo)簽添加 module 和 src 屬性，其中：

• module 用來(lái)指定模塊的名稱(chēng)
• src 用來(lái)指定要引入的腳本的路徑，且必須是相對(duì)路徑

示例代碼如下：

<!--調(diào)用m2模塊中的方法-->
<viewr>{{m2.toLower(country)}}

<!--引用外聯(lián)的tools.wxs腳本，并命名為 m2-->
<wxs></wxs></viewr>

7.WXS 的特點(diǎn)

（1）與 JavaScript 不同
為了降低 wxs（WeiXin Script）的學(xué)習(xí)成本， wxs 語(yǔ)言在設(shè)計(jì)時(shí)借大量鑒了 JavaScript 的語(yǔ)法。但是本質(zhì)上，wxs 和 JavaScript 是完全不同的兩種語(yǔ)言！
（2）不能作為組件的事件回調(diào)
wxs 典型的應(yīng)用場(chǎng)景就是“過(guò)濾器”，經(jīng)常配合 Mustache 語(yǔ)法進(jìn)行使用。但是，在 wxs 中定義的函數(shù)不能作為組件的事件回調(diào)函數(shù)。
（3）隔離性
隔離性指的是 wxs 的運(yùn)行環(huán)境和其他 JavaScript 代碼是隔離的。體現(xiàn)在如下兩方面：
①wxs 不能調(diào)用 js 中定義的函數(shù)
②wxs 不能調(diào)用小程序提供的 API
（4）性能好
①在 iOS 設(shè)備上，小程序內(nèi)的 WXS 會(huì)比 JavaScript 代碼快 2 ~ 20 倍
②在 android 設(shè)備上，二者的運(yùn)行效率無(wú)差異

【相關(guān)學(xué)習(xí)推薦：小程序?qū)W習(xí)教程】

The above is the detailed content of Detailed explanation of WeChat applet view layer. For more information, please follow other related articles on the PHP Chinese website!