WXML模板語法-數據綁定

1.數據綁定的原則

1.在data中定義數據
2.在WXML中使用數據

2.在data中定義頁面的數據

在頁面對應的.js文件中，把數據定義到data對象中即可

3.Mustache語法的格式

把data中的數據綁定到頁面中渲染，使用Mustache語法（雙大括號）將變量包起來即可，語法格式為：

4.Mustache語法的應用場景

• 綁定內容
• 綁定屬性
• 運算（三元運算，算術運算等）

5.動態綁定內容

6.動態綁定屬性

7.三元運算

8.算術運算

WXML模板語法-事件綁定

1.什么是事件

事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染層產生的行為，反饋到邏輯層進行業務的處理。

2.小程序中常用的事件

類型綁定方式事件描述

tap	bindtap或bind:tap	手指觸摸后馬上離開，類似于HTML中的click事件
input	bindinput或bind:input	文本框的輸入事件
change	bindchange或bind:change	狀態改變時觸發

3.事件對象的屬性列表

當事件回調觸發的時候，會收到一個事件對象event，它的詳細屬性如下表：

屬性類型說明

type	String	事件類型
timeStamp	Integer	頁面打開到觸發事件所經過的毫秒數
target	Object	觸發事件的組件的一些屬性值集合
currentTarget	Object	當前組件的一些屬性值集合
detail	Object	額外的信息
touches	Array	觸摸事件，當前停留的屏幕中的觸摸點信息的數組
changedTouches	Array	觸摸事件，當前變化的觸摸點信息的數組

4.target和currentTarget的區別

target是觸發該事件的源頭組件，而currentTarget則是當前事件所綁定的組件。

點擊內部的按鈕時，點擊事件以冒泡的方式向外擴散，也會觸發外層view的tap事件處理函數。此時，對外層的view來說：

• e.target指向的是觸發事件的源頭組件，因此，e.target是內部的按鈕組件
• e.currentTarget指向的是當前正在觸發事件的那個組件，因此，e.currentTarget是當前的view組件

5.bindtap的語法格式

在小程序中，不存在HTML中的onclick鼠標點擊事件，而且通過tap事件來響應用戶的觸摸行為。

1.通過bindtap，可以為組件綁定tap觸摸事件

2.在頁面的.js文件中定義對應的事件處理函數，事件參數通過形參event（一般簡寫成e）來接收

6.在事件處理函數中為data中的數據賦值

通過調用this.setData(dataObject)方法，可以給 頁面data中的數據重新賦值

7.事件傳參

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

因為小程序會把bindtap的屬性值，統一當作事件名稱來處理，相當于要調用一個名稱未btnHandler(123)的事件處理函數

7.事件傳參

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

• info會被解析為參數名字
• 數值2會被解析為參數的值

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

8.bindinput的語法格式

在小程序中，通過input事件來響應文本框的輸入事件，語法格式如下：

1.通過bindinput，可以為文本框綁定輸入事件
2.在頁面的.js文件中定義事件處理函數

9.實現文本框和data之間的數據同步

實現步驟：
1.定義數據
2.渲染結構
3.美化樣式
4.綁定input事件處理函數

WXML模板語法-條件渲染

1.wx:if

在小程序中，使用wx:if="{{condition}}"來判斷是否需要渲染該代碼塊，也可以用wx:elif和wx:else來添加else判斷



2.結合使用wx:if

如果要一次性控制多個組件的展示與隱藏，可以使用一個標簽將多個組件包裝起來，并在標簽上使用wx:if控制屬性。

注意：并不是一個組件，它只是一個包裹性質的容器，不會在頁面中做任何渲染。

3.hidden

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

4.wx:if與hidden的對比

1.運行方式不同：

• wx:if以動態創建和移除元素的方式，控制元素的展示和隱藏
• hidden以切換樣式的方式(display:none/block)，控制元素的顯示與隱藏

2.使用建議

• 頻繁切換時，建議使用hidden
• 控制條件復雜時，建議使用wx:if搭配wx:elif和wx:else進行展示與隱藏的切換

WXML模板語法-列表渲染

1.wx:for

通過wx:for可以根據指定的數組，循環渲染重復的組件結構，當前循環項的索引用index表示，當前循環項用item表示

2.手動指定索引和當前項的變量名*

• 使用wx:for-index可以指定當前循環項的索引的變量名
• 使用wx:for-item可以指定當前項的變量名
  

3.wx:key的使用

類似于Vue列表渲染中的:key，小程序在實現列表渲染時，也建議為渲染出來的列表項指定唯一的Key值，從而提高渲染的效率

WXSS模板樣式

1.什么是WXSS

WXSS是一套樣式語言，用于美化WXML的組件樣式，類似于網頁開發中的CSS。

2.WXSS和CSS的關系

WXSS具有CSS大部分特征，同時，WXSS還對CSS進行了擴充以及修改，以適應微信小程序的開發。

與CSS相比，WXSS擴展的特征有：

• rpx尺寸
• @import樣式導入
  

WXSS模板樣式-rpx

1.什么是rpx尺寸單位

rpx是微信小程序獨有的，用來解決屏幕適配的尺寸單位

2.rpx的實現原理

rpx的實現原理：鑒于不同設備屏幕的大小不同，為實現屏幕的自動適配，rpx把所有設備的屏幕，在寬度上等分為750份（即：當前屏幕的總寬度為750rpx）

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

小程序在不同設備上運行的時候，會自動把rpx的樣式單位換算成對應的像素單位來渲染，從而實現屏幕適配

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

WXSS模板樣式-樣式導入

1.什么是樣式導入

使用WXSS提供的@import語法，可以導入外聯的樣式表

2.@import語法格式

@import后跟需要導入的外聯樣式表的相對路徑，用；表示語句結束

WXSS模板樣式-全局樣式和局部樣式

1.全局樣式

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

2.局部樣式

在頁面的.wxss文件中定義的樣式為局部樣式，只作用于當前頁面

注意：

• 當局部樣式和全局樣式沖突時，根據就近原則，局部樣式會覆蓋全局樣式
• 當局部樣式的權重大于或等于全局樣式的權重時，才會覆蓋全局的樣式

全局配置

1.全局配置文件及常用的配置項

小程序根目錄下的app.json文件是小程序的全局配置文件。常用的配置項如下
1.pages:記錄當前小程序所有頁面的存放路徑
2.window:全局設置小程序窗口的外觀
3.tabBar:設置小程序底部的tabBar效果
4.style:是否啟用新版的組件樣式

全局配置-window

1.小程序窗口的組成部分

2.了解window節點常用的配置項

屬性名類型默認值說明

navigationBarTitleText	String	字符串	導航欄標題文字內容
navigationBarBackgroundColor	HexColor	#000	導航欄背景顏色
navigationBarTextStyle	String	white	導航欄標題顏色，僅支持black/white
backgroundColor	HexColor	#fff	窗口的背景色
backgroundTextStyle	String	dark	下拉loading的樣式，僅支持dark/light
enablePullDownRefresh	Boolean	false	是否全局開啟下拉刷新
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位為px

3.設置導航欄的標題

設置步驟：app.json→window→navigationBarTitleText

4.設置導航欄的背景色

設置步驟：app.json→window→navigationBarBackgroundColor

注意：顏色只能設置為16進制，即#cccccc，不能設置普通文本顏色或其他

5.設置導航欄的標題顏色

設置步驟：app.json→window→navigationBarTextStyle

注意：當前標題顏色僅支持while和black

6.全局開啟下拉刷新功能

概念：下拉刷新是移動端的專有名詞，指的是通過手指屏幕上的下拉滑動操作，從而重新加載頁面數據的行為。

步驟：app.json→window→enablePullDownRefresh的值設置為true

注意：在app.json中啟用下拉刷新功能，會作用于每個小程序頁面

7.設置下拉刷新時窗口的背景色

當全局開啟下拉刷新功能之后，默認的窗口背景為白色。如果自定義下拉刷新窗口背景色，設置步驟為：app.json→window→為backgroundColor指定16進制的顏色值#efefef。效果如下：

8.設置下拉刷新loding的樣式

當全局開啟下拉刷新功能之后，默認窗口的loading樣式為白色，如果要更改loading樣式的效果，設置步驟：app.json→window→為backgroundTextStyle指定dark值。效果如：

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

9.設置上拉觸底的距離

概念：上拉觸底是移動端的專有名詞（當滾動條距離底部多少距離開始加載數據），通過手指在屏幕上的上拉滑動操作，從而加載更多數據的行為。

步驟：app.json→window→為onReachBottomDistance設置新的數值

注意：默認距離為50px，如果沒有特殊需求，建議使用默認值

全局配置-tabBar

1.什么是tabBar

tabBar是移動端應用常見的頁面效果，用于實現多頁面的快速切換。小程序中通常將其分為：

• 底部tabBar
• 頂部tabBar

注意：

• tabBar中只能配置最少2個、最多5個tab頁簽
• 當渲染頂部tabBar時，不顯示icon，只顯示文本

2.tabBar的6個組成部分

1.backgroundColor:tabBar的背景色

2.selectedlconPath:選中時的圖片路徑

3.borderStyle:tabBar上邊框的顏色

4.iconPath:未選中時的圖片路徑

5.selectedColor:tab上的文字選中時的顏色

6.color:tab上文字的默認（未選中）顏色

3.tabBar節點的配置項

4.每個tab項的配置選項

頁面配置

1.頁面配置文件的作用

小程序，每個頁面都有自己的.json配置文件，用來對當前頁面的窗口外觀、頁面效果等進行配置

2.頁面配置文件和全局配置的關系

小程序中，app.json中的window節點，可以全局配置小程序中每個頁面的窗口表現。

如果某些小程序頁面想要擁有特殊的窗口表現，此時，“頁面級別的.json配置文件”就可以實現這種要求。

注意：當頁面配置與全局配置沖突時，根據就近原則，最終的效果以頁面配置為準

3.頁面配置中常用的配置項

屬性類型默認值描述

navigationBarBackgroundColor	HexColor	#000	當前頁面導航欄背景顏色
navigationBarTextStyle	String	while	當前頁面導航欄標題顏色，僅支持black/white
navigationBarTitleText	String		當前頁面導航欄標題文字內容
backgroundColor	HexColor	#fff	當前下拉頁面窗口的背景色
backgroundTextStyle	String	dark	當前頁面下拉loading的樣式，僅支持dark/light
enablePullDownRefresh	Boolean	false	是否為當前頁面開啟下拉刷新的效果
onReachBottomDistance	Number	50	頁面上拉觸底事件觸發時距頁面底部距離，單位為px

網絡數據請求

1.小程序中網絡數據請求的限制

出于安全行方面考慮，小程序官方對數據接口的請求做出了如下兩個限制：

1.只能請求HTTPS類型的接口

2.必須將接口域名添加到信任列表中

2.配置request合法域名

配置步驟：登錄微信小程序管理后臺→開發→開發設置→服務器域名→修改request合法域名

注意事項：

• 域名只支持https協議
• 域名不能使用IP地址或localhost
• 域名必須經過ICP備案
• 服務器域名一個月內最多可以申請5次修改

3.發起GET請求

調用微信小程序提供wx.request()方法，可以發起GET數據請求，

4.發起POST請求

調用微信小程序提供wx.request()方法，可以發起POST數據請求，

5.在頁面剛加載時請求數據

在很多情況下，我們需要在頁面剛加載的時候，自動請求一些初始化的數據。此時需要在頁面的onLoad事件中調用獲取數據的函數

6.跳過request合法域名校驗

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

此時為了不耽誤開發的進度，我們可以在微信開發者工具中，，臨時開啟“開發環境不校驗請求域名、TLS版本及HTTPS證書”選項，跳過request合法域名的校驗。

**注意：**跳過request合法域名校驗的選項，僅限在開發與調試階段使用

7.關于跨域和Ajax的說明

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

Ajax技術的核心是依賴于瀏覽器中的XMLHttpRequest這個對象，由于小程序的宿主環境是微信客戶端，所以小程序不能叫做“發起Ajax請求”，而是叫做“發起網絡數據請求”

案例-本地生活

總結

以上是生活随笔為你收集整理的微信小程序开发基础知识2（黑马）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。