1. WXML 模板語(yǔ)法

1.1 數(shù)據(jù)綁定

（1） 數(shù)據(jù)綁定的基本原則

① 在 data 中定義數(shù)據(jù)

② 在 WXML 中使用數(shù)據(jù)

（2）在 data 中定義頁(yè)面的數(shù)據(jù)

在頁(yè)面對(duì)應(yīng)的 .js 文件中，把數(shù)據(jù)定義到 data 對(duì)象中即可：

（3）Mustache 語(yǔ)法的格式

把 data 中的數(shù)據(jù)綁定到頁(yè)面中渲染，使用 Mustache 語(yǔ)法（雙大括號(hào)）將變量包起來(lái)即可。語(yǔ)法格式為：

（4） Mustache 語(yǔ)法的應(yīng)用場(chǎng)景

Mustache 語(yǔ)法的主要應(yīng)用場(chǎng)景如下：

? 綁定內(nèi)容
? 綁定屬性
? 運(yùn)算（三元運(yùn)算、算術(shù)運(yùn)算等）

（5）動(dòng)態(tài)綁定內(nèi)容

頁(yè)面的數(shù)據(jù)如下：

頁(yè)面的結(jié)構(gòu)如下：

（6）動(dòng)態(tài)綁定屬性

頁(yè)面的數(shù)據(jù)如下：

頁(yè)面的結(jié)構(gòu)如下：

（7） 三元運(yùn)算

頁(yè)面的數(shù)據(jù)如下：

頁(yè)面的結(jié)構(gòu)如下：

（8）算數(shù)運(yùn)算

頁(yè)面的數(shù)據(jù)如下：

頁(yè)面的結(jié)構(gòu)如下：

1.2 事件綁定

（1）什么是事件

事件是渲染層到邏輯層的通訊方式。通過(guò)事件可以將用戶在渲染層產(chǎn)生的行為，反饋到邏輯層進(jìn)行業(yè)務(wù)的處理。

（2）小程序中常用的事件

（3）事件對(duì)象的屬性列表

當(dāng)事件回調(diào)觸發(fā)的時(shí)候，會(huì)收到一個(gè)事件對(duì)象 event，它的詳細(xì)屬性如下表所示：

（4）target 和 currentTarget 的區(qū)別

target 是觸發(fā)該事件的源頭組件，而 currentTarget 則是當(dāng)前事件所綁定的組件。舉例如下：

點(diǎn)擊內(nèi)部的按鈕時(shí)，點(diǎn)擊事件以冒泡的方式向外擴(kuò)散，也會(huì)觸發(fā)外層 view 的 tap 事件處理函數(shù)。

此時(shí)，對(duì)于外層的 view 來(lái)說(shuō)：

• e.target 指向的是觸發(fā)事件的源頭組件，因此，e.target 是內(nèi)部的按鈕組件。
• e.currentTarget 指向的是當(dāng)前正在觸發(fā)事件的那個(gè)組件，因此，e.currentTarget 是當(dāng)前的 view 組件。

（5）bindtap 的語(yǔ)法格式

在小程序中，不存在 HTML 中的 onclick 鼠標(biāo)點(diǎn)擊事件，而是通過(guò) tap 事件來(lái)響應(yīng)用戶的觸摸行為。

① 通過(guò) bindtap，可以為組件綁定 tap 觸摸事件，語(yǔ)法如下：

② 在頁(yè)面的 .js 文件中定義對(duì)應(yīng)的事件處理函數(shù)，事件參數(shù)通過(guò)形參 event（一般簡(jiǎn)寫成 e） 來(lái)接收：

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

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

（7）事件傳參

小程序中的事件傳參比較特殊，不能在綁定事件的同時(shí)為事件處理函數(shù)傳遞參數(shù)。例如，下面的代碼將不能正常工作：

因?yàn)樾〕绦驎?huì)把 bindtap 的屬性值，統(tǒng)一當(dāng)作事件名稱來(lái)處理，相當(dāng)于要調(diào)用一個(gè)名稱為 btnHandler(123) 的事件處理函數(shù)。

可以為組件提供 data-* 自定義屬性傳參，其中 * 代表的是參數(shù)的名字，示例代碼如下：

最終：

• info 會(huì)被解析為參數(shù)的名字。
• 數(shù)值 2 會(huì)被解析為參數(shù)的值。

在事件處理函數(shù)中，通過(guò) event.target.dataset.參數(shù)名 即可獲取到具體參數(shù)的值，示例代碼如下：

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

在小程序中，通過(guò) input 事件來(lái)響應(yīng)文本框的輸入事件，語(yǔ)法格式如下：

① 通過(guò) bindinput，可以為文本框綁定輸入事件：

② 在頁(yè)面的 .js 文件中定義事件處理函數(shù)：

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

實(shí)現(xiàn)步驟：

① 定義數(shù)據(jù)

② 渲染結(jié)構(gòu)

③ 美化樣式

④ 綁定 input 事件處理函數(shù)

1.3 條件渲染

（1）wx:if

在小程序中，使用 wx:if="{{condition}}" 來(lái)判斷是否需要渲染該代碼塊：

也可以用 wx:elif 和 wx:else 來(lái)添加 else 判斷：

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

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

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

（3） hidden

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

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

① 運(yùn)行方式不同

wx:if 以動(dòng)態(tài)創(chuàng)建和移除元素的方式，控制元素的展示與隱藏。

hidden 以切換樣式的方式（display: none/block;），控制元素的顯示與隱藏。

② 使用建議

• 頻繁切換時(shí)，建議使用 hidden。
• 控制條件復(fù)雜時(shí)，建議使用 wx:if 搭配 wx:elif、wx:else 進(jìn)行展示與隱藏的切換。

1.4 列表渲染

（1）wx:for

通過(guò) wx:for 可以根據(jù)指定的數(shù)組，循環(huán)渲染重復(fù)的組件結(jié)構(gòu)，語(yǔ)法示例如下：

默認(rèn)情況下，當(dāng)前循環(huán)項(xiàng)的索引用 index 表示；當(dāng)前循環(huán)項(xiàng)用 item 表示。

（2）手動(dòng)指定索引和當(dāng)前項(xiàng)的變量名*

• 使用 wx:for-index 可以指定當(dāng)前循環(huán)項(xiàng)的索引的變量名。
• 使用 wx:for-item 可以指定當(dāng)前項(xiàng)的變量名。

示例代碼如下：

（3）wx:key 的使用

類似于 Vue 列表渲染中的 :key，小程序在實(shí)現(xiàn)列表渲染時(shí)，也建議為渲染出來(lái)的列表項(xiàng)指定唯一的 key 值，從而提高渲染的效率，示例代碼如下：

2. WXSS 模板樣式

2.1 WXSS

（1）什么是 WXSS

WXSS (WeiXin Style Sheets)是一套樣式語(yǔ)言，用于美化 WXML 的組件樣式，類似于網(wǎng)頁(yè)開發(fā)中的 CSS。

（2） WXSS 和 CSS 的關(guān)系

WXSS 具有 CSS 大部分特性，同時(shí)，WXSS 還對(duì) CSS 進(jìn)行了擴(kuò)充以及修改，以適應(yīng)微信小程序的開發(fā)。
與 CSS 相比，WXSS 擴(kuò)展的特性有：

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

2.2 rpx

（1）什么是 rpx 尺寸單位

rpx（responsive pixel）是微信小程序獨(dú)有的，用來(lái)解決屏適配的尺寸單位。

（2）rpx 的實(shí)現(xiàn)原理

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)屏幕適配。

（3）rpx 與 px 之間的單位換算*

在 iPhone6 上，屏幕寬度為375px，共有 750 個(gè)物理像素，等分為 750rpx。則：

750rpx = 375px = 750 物理像素 1rpx = 0.5px = 1物理像素

官方建議：開發(fā)微信小程序時(shí)，設(shè)計(jì)師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)。
開發(fā)舉例：在 iPhone6 上如果要繪制寬100px，高20px的盒子，換算成rpx單位，寬高分別為 200rpx 和 40rpx。

2.3 樣式導(dǎo)入、全局樣式和局部樣式

（1）什么是樣式導(dǎo)入

使用 WXSS 提供的 @import 語(yǔ)法，可以導(dǎo)入外聯(lián)的樣式表。

（2）@import 的語(yǔ)法格式

@import 后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用 ; 表示語(yǔ)句結(jié)束。示例如下：

（3）全局樣式

定義在 app.wxss 中的樣式為全局樣式，作用于每一個(gè)頁(yè)面。

（4）局部樣式

在頁(yè)面的 .wxss 文件中定義的樣式為局部樣式，只作用于當(dāng)前頁(yè)面。

注意：

當(dāng)局部樣式和全局樣式?jīng)_突時(shí)，根據(jù)就近原則，局部樣式會(huì)覆蓋全局樣式。

當(dāng)局部樣式的權(quán)重大于或等于全局樣式的權(quán)重時(shí)，才會(huì)覆蓋全局的樣式。

3. 全局配置

3.1 全局配置文件及常用的配置項(xiàng)

小程序根目錄下的 app.json 文件是小程序的全局配置文件。常用的配置項(xiàng)如下：

• pages
  • 記錄當(dāng)前小程序所有頁(yè)面的存放路徑。
• window
  • 全局設(shè)置小程序窗口的外觀。
• tabBar
  • 設(shè)置小程序底部的 tabBar 效果。
• style
  • 是否啟用新版的組件樣式。

3.2 window

（1）小程序窗口的組成部分

（2）了解 window 節(jié)點(diǎn)常用的配置項(xiàng)

（3）設(shè)置導(dǎo)航欄的標(biāo)題

設(shè)置步驟：app.json -> window -> navigationBarTitleText
需求：把導(dǎo)航欄上的標(biāo)題，從默認(rèn)的 “WeChat” 修改為 “黑馬程序員”，效果如圖所示：

（4）設(shè)置導(dǎo)航欄的背景色

設(shè)置步驟：app.json -> window -> navigationBarBackgroundColor
需求：把導(dǎo)航欄標(biāo)題的背景色，從默認(rèn)的 #fff 修改為 #2b4b6b ，效果如圖所示：

（5）設(shè)置導(dǎo)航欄的標(biāo)題顏色

設(shè)置步驟：app.json -> window -> navigationBarTextStyle
需求：把導(dǎo)航欄上的標(biāo)題顏色，從默認(rèn)的 black 修改為 white ，效果如圖所示：

注意： navigationBarTextStyle 的可選值只有 black 和 white。

（6）全局開啟下拉刷新功能

概念：下拉刷新是移動(dòng)端的專有名詞，指的是通過(guò)手指在屏幕上的下拉滑動(dòng)操作，從而重新加載頁(yè)面數(shù)據(jù)的行為。

設(shè)置步驟：app.json -> window -> 把 enablePullDownRefresh 的值設(shè)置為 true

注意：在 app.json 中啟用下拉刷新功能，會(huì)作用于每個(gè)小程序頁(yè)面！

（7）設(shè)置下拉刷新時(shí)窗口的背景色

當(dāng)全局開啟下拉刷新功能之后，默認(rèn)的窗口背景為白色。如果自定義下拉刷新窗口背景色，設(shè)置步驟為: app.json -> window -> 為 backgroundColor 指定16進(jìn)制的顏色值 #efefef。效果如下：

（8）設(shè)置下拉刷新時(shí) loading 的樣式

當(dāng)全局開啟下拉刷新功能之后，默認(rèn)窗口的 loading 樣式為白色，如果要更改 loading 樣式的效果，設(shè)置步驟為 app.json -> window -> 為 backgroundTextStyle 指定 dark 值。效果如下：

注意： backgroundTextStyle 的可選值只有 light 和 dark。

（9）設(shè)置上拉觸底的距離

概念：上拉觸底是移動(dòng)端的專有名詞，通過(guò)手指在屏幕上的上拉滑動(dòng)操作，從而加載更多數(shù)據(jù)的行為。
設(shè)置步驟： app.json -> window -> 為 onReachBottomDistance 設(shè)置新的數(shù)值。

注意：默認(rèn)距離為50px，如果沒有特殊需求，建議使用默認(rèn)值即可。

3.3 tabBar

（1）什么是 tabBar

tabBar 是移動(dòng)端應(yīng)用常見的頁(yè)面效果，用于實(shí)現(xiàn)多頁(yè)面的快速切換。小程序中通常將其分為：

• 底部 tabBar
• 頂部 tabBar

注意：

• tabBar 中只能配置最少 2 個(gè)、最多 5 個(gè) tab 頁(yè)簽。

• 當(dāng)渲染頂部 tabBar 時(shí)，不顯示 icon，只顯示文本。
  
  （2）tabBar 的 6 個(gè)組成部分

  • backgroundColor：tabBar 的背景色
  • selectedIconPath：選中時(shí)的圖片路徑
  • borderStyle：tabBar 上邊框的顏色
  • iconPath：未選中時(shí)的圖片路徑
  • selectedColor：tab 上的文字選中時(shí)的顏色
  • color：tab 上文字的默認(rèn)（未選中）顏色

  
  （3）tabBar 節(jié)點(diǎn)的配置項(xiàng)

（4）每個(gè) tab 項(xiàng)的配置選項(xiàng)

4. 頁(yè)面配置

（1）頁(yè)面配置文件的作用

小程序中，每個(gè)頁(yè)面都有自己的 .json 配置文件，用來(lái)對(duì)當(dāng)前頁(yè)面的窗口外觀、頁(yè)面效果等進(jìn)行配置。

（2）頁(yè)面配置和全局配置的關(guān)系

小程序中，app.json 中的 window 節(jié)點(diǎn)，可以全局配置小程序中每個(gè)頁(yè)面的窗口表現(xiàn)。

如果某些小程序頁(yè)面想要擁有特殊的窗口表現(xiàn)，此時(shí)，“頁(yè)面級(jí)別的 .json 配置文件”就可以實(shí)現(xiàn)這種需求。

注意：當(dāng)頁(yè)面配置與全局配置沖突時(shí)，根據(jù)就近原則，最終的效果以頁(yè)面配置為準(zhǔn)。

（3）頁(yè)面配置中常用的配置項(xiàng)

5. 網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求

（1）小程序中網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的限制

出于安全性方面的考慮，小程序官方對(duì)數(shù)據(jù)接口的請(qǐng)求做出了如下兩個(gè)限制：

• 只能請(qǐng)求 HTTPS 類型的接口。
• 必須將接口的域名添加到信任列表中。
  
  （2）配置 request 合法域名

需求描述： 假設(shè)在自己的微信小程序中，希望請(qǐng)求 https://www.escook.cn/ 域名下的接口。

配置步驟： 登錄微信小程序管理后臺(tái) -> 開發(fā) -> 開發(fā)設(shè)置 -> 服務(wù)器域名 -> 修改 request 合法域名。

注意事項(xiàng)：

• 域名只支持 https 協(xié)議
• 域名不能使用 IP 地址或 localhost
• 域名必須經(jīng)過(guò) ICP 備案
• 服務(wù)器域名一個(gè)月內(nèi)最多可申請(qǐng) 5 次修改

（3）發(fā)起 GET 請(qǐng)求

調(diào)用微信小程序提供的 wx.request() 方法，可以發(fā)起 GET 數(shù)據(jù)請(qǐng)求，示例代碼如下：

（4）發(fā)起 POST 請(qǐng)求

調(diào)用微信小程序提供的 wx.request() 方法，可以發(fā)起 POST 數(shù)據(jù)請(qǐng)求，示例代碼如下：

（5）在頁(yè)面剛加載時(shí)請(qǐng)求數(shù)據(jù)

在很多情況下，我們需要在頁(yè)面剛加載的時(shí)候，自動(dòng)請(qǐng)求一些初始化的數(shù)據(jù)。此時(shí)需要在頁(yè)面的 onLoad 事件中調(diào)用獲取數(shù)據(jù)的函數(shù)，示例代碼如下：

（6）跳過(guò) request 合法域名校驗(yàn)

如果后端程序員僅僅提供了 http 協(xié)議的接口、暫時(shí)沒有提供 https 協(xié)議的接口。

此時(shí)為了不耽誤開發(fā)的進(jìn)度，我們可以在微信開發(fā)者工具中，臨時(shí)開啟「開發(fā)環(huán)境不校驗(yàn)請(qǐng)求域名、TLS 版本及 HTTPS 證書」選項(xiàng)，跳過(guò) request 合法域名的校驗(yàn)。

注意： 跳過(guò) request 合法域名校驗(yàn)的選項(xiàng)，僅限在開發(fā)與調(diào)試階段使用！

（7）關(guān)于跨域和 Ajax 的說(shuō)明

跨域問(wèn)題只存在于基于瀏覽器的 Web 開發(fā)中。由于小程序的宿主環(huán)境不是瀏覽器，而是微信客戶端，所以 小程序中不存在跨域的問(wèn)題。

Ajax 技術(shù)的核心是依賴于瀏覽器中的 XMLHttpRequest 這個(gè)對(duì)象，由于小程序的宿主環(huán)境是微信客戶端，所以小程序中不能叫做“發(fā)起 Ajax 請(qǐng)求”，而是叫做“發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求”。

總結(jié)

以上是生活随笔為你收集整理的微信小程序基础学习（2）- 模板与配置：WXML 模板语法、WXSS 模板样式、全局配置、页面配置、网络数据请求的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。