Artikel ini membawakan anda pengetahuan yang berkaitan tentang Program Mini WeChat Ia terutamanya memperkenalkan isu berkaitan tentang lapisan paparan bertanggungjawab untuk memaparkan data lapisan logik pada halaman masa Hantar peristiwa lapisan paparan ke lapisan logik. Saya harap ia akan membantu semua orang.

[Cadangan pembelajaran berkaitan: Tutorial pembelajaran program mini]

Lapisan paparan rangka kerja program mini terdiri daripada WXML ( Bahasa Penanda WeiXin, bahasa penanda WeChat) dan WXSS (Helaian Gaya WeiXin, helaian gaya WeChat) ditulis dan dipaparkan oleh komponen. Lapisan paparan bertanggungjawab untuk memaparkan data daripada lapisan logik pada halaman dan menghantar peristiwa dari lapisan paparan ke lapisan logik. WXML digunakan untuk menerangkan struktur halaman, WXSS digunakan untuk menerangkan gaya halaman, dan komponen ialah komponen asas paparan. Hubungan antara ketiga-tiga ini boleh dibandingkan dengan hubungan antara HTML, CSS dan pelbagai tag dalam HTML. Sebagai tambahan kepada ketiga-tiga ini, terdapat juga bahasa skrip untuk program kecil-WXS (WeiXin Script). WXS dan WXML digabungkan untuk membina struktur halaman.

1. WXML

1. Pengikatan data

(1) Pengikatan mudah

Prinsip asas pengikatan data :
1) Tentukan data halaman dalam data: Dalam fail .js yang sepadan dengan halaman, hanya tentukan data ke dalam objek data.

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

2) Gunakan data dalam WXML: Ikat data dalam data ke halaman untuk pemaparan dan gunakan sintaks Misai (kurung kurung berganda) untuk membalut pembolehubah. Format sintaks ialah:

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

Senario aplikasi utama sintaks Misai adalah seperti berikut:
①Kandungan. Paparkan kandungan data terus pada halaman.
②Sifat komponen. Gunakan pembolehubah hujung belakang untuk menetapkan sifat beberapa komponen bahagian hadapan Harap maklum bahawa pembolehubah yang disertakan dengan pendakap kerinting berganda perlu berada dalam petikan berganda sifat.
③Kawal atribut. Gunakan pembolehubah hujung belakang untuk mengawal kesan paparan komponen hujung hadapan Ambil perhatian bahawa pembolehubah yang disertakan dengan pendakap kerinting berganda perlu berada dalam petikan berganda atribut.
④Kata kunci. Terutamanya digunakan untuk pertimbangan logik.

(2) Operasi

①Kendalian Ternary. Operasi ternary boleh dilakukan dalam pendakap kerinting berganda.
Dalam .js:

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

Dalam .wxml:

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

② Operasi aritmetik. Dalam kurungan kerinting berganda, operasi aritmetik asas boleh dilakukan dan hasil operasi akan dipaparkan terus.
③Penghakiman logik. Dalam pendakap berganda, operasi logik boleh dilakukan, mengembalikan benar atau palsu jenis boolean, yang boleh digunakan untuk mengawal atribut tertentu.
④Operasi rentetan. Dalam pendakap berganda, operasi penggabungan rentetan boleh dilakukan.
⑤Kendalian laluan data. Untuk data jenis objek tatasusunan dan JSON, nilai boleh diperoleh dengan mengindeks dalam kurungan kerinting berganda.

(3) Gabungan

①Array
②Objek

2 rendering senarai

(1) wx:for

Menggunakan. wx:for, anda boleh gelung untuk memaparkan struktur komponen berulang berdasarkan tatasusunan yang ditentukan Contoh sintaks adalah seperti berikut:
Dalam .js:

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

Dalam .wxml:

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

Kesannya adalah seperti yang ditunjukkan:

Secara lalai, indeks item gelung semasa diwakili oleh indeks item gelung semasa;

(2) Tentukan indeks dan nama pembolehubah item semasa secara manual*

• Gunakan wx:for-index untuk menentukan nama pembolehubah indeks item gelung semasa
• Gunakan wx:for-item untuk menentukan nama pembolehubah item semasa
  Dalam wxml:

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

Kesannya adalah seperti berikut:

Dalam .js:

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

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

<.>
Nilai wx:key disediakan dalam dua bentuk berikut: 1) Rentetan. Mewakili atribut item dalam tatasusunan gelung wx:for Nilai atribut perlu rentetan atau nombor unik dalam senarai dan tidak boleh diubah secara dinamik.
2) Kata kunci terpelihara *ini. Mewakili item itu sendiri dalam gelung wx:for Perwakilan ini memerlukan item itu sendiri menjadi rentetan atau nombor yang unik.

3. Paparan bersyarat

(1) wx:if

Dalam program mini, gunakan wx:if="{

Dalam .js:

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

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

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

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

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

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

（3）hidden

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

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

（4）wx:if 對比 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.事件

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

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

• 冒泡事件：當(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）事件的分類

（3）事件的綁定和冒泡

（4）事件的捕獲階段

（5）事件對象

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

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

通過調(diào)用 this.setData(dataObject) 方法，可以給頁面 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ù)中，通過 event.target.dataset.參數(shù)名 即可獲取到具體參數(shù)的值）

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

效果如圖：

（8）bindinput 的語法格式

在小程序中，通過 input 事件來響應(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)是一套樣式語言，用于美化 WXML 的組件樣式，類似于網(wǎng)頁開發(fā)中的 CSS。WXSS 具有 CSS 大部分特性，同時(shí)，WXSS 還對 CSS 進(jìn)行了擴(kuò)充以及修改，以適應(yīng)微信小程序的開發(fā)。
與 CSS 相比，WXSS 擴(kuò)展的特性有：

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

1.尺寸單位

rpx（responsive pixel）是微信小程序獨(dú)有的，用來解決屏適配的尺寸單位。
rpx 的實(shí)現(xià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 的樣式單位換算成對應(yīng)的像素單位來渲染，從而實(shí)現(xiàn)屏幕適配。

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

2.樣式導(dǎo)入

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

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

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

4.選擇器

和CSS一樣，WXSS也需要使用選擇器來決定樣式的作用對象。

5.全局樣式與局部樣式

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

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

三、WXS

1.概念

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

2.應(yīng)用場景

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

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

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

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

（2）wxs 不支持類似于 ES6 及以上的語法形式

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

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

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

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

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

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

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

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

wxs 代碼還可以編寫在以 .wxs 為后綴名的文件內(nèi)，就像 javascript 代碼可以編寫在以 .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 用來指定模塊的名稱
• src 用來指定要引入的腳本的路徑，且必須是相對路徑

示例代碼如下：

<!--調(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 語言在設(shè)計(jì)時(shí)借大量鑒了 JavaScript 的語法。但是本質(zhì)上，wxs 和 JavaScript 是完全不同的兩種語言！
（2）不能作為組件的事件回調(diào)
wxs 典型的應(yīng)用場景就是“過濾器”，經(jīng)常配合 Mustache 語法進(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)行效率無差異

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

Atas ialah kandungan terperinci Penjelasan terperinci tentang lapisan paparan applet WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!