微信小程序基础学习（2）- 模板与配置：WXML 模板语法、WXSS 模板样式、全局配置、页面配置、网络数据请求
1. WXML 模板語法
1.1 數據綁定
（1） 數據綁定的基本原則
① 在 data 中定義數據
② 在 WXML 中使用數據
（2）在 data 中定義頁面的數據
在頁面對應的 .js 文件中，把數據定義到 data 對象中即可：
（3）Mustache 語法的格式
把 data 中的數據綁定到頁面中渲染，使用 Mustache 語法（雙大括號）將變量包起來即可。語法格式為：
（4） Mustache 語法的應用場景
Mustache 語法的主要應用場景如下：
? 綁定內容
? 綁定屬性
? 運算（三元運算、算術運算等）
（5）動態綁定內容
頁面的數據如下：
頁面的結構如下：
（6）動態綁定屬性
頁面的數據如下：
頁面的結構如下：
（7） 三元運算
頁面的數據如下：
頁面的結構如下：
（8）算數運算
頁面的數據如下：
頁面的結構如下：
1.2 事件綁定
（1）什么是事件
事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染層產生的行為，反饋到邏輯層進行業務的處理。
（2）小程序中常用的事件
（3）事件對象的屬性列表
當事件回調觸發的時候，會收到一個事件對象 event，它的詳細屬性如下表所示：
（4）target 和 currentTarget 的區別
target 是觸發該事件的源頭組件，而 currentTarget 則是當前事件所綁定的組件。舉例如下：
點擊內部的按鈕時，點擊事件以冒泡的方式向外擴散，也會觸發外層 view 的 tap 事件處理函數。
此時，對于外層的 view 來說：
- e.target 指向的是觸發事件的源頭組件，因此，e.target 是內部的按鈕組件。
- e.currentTarget 指向的是當前正在觸發事件的那個組件，因此，e.currentTarget 是當前的 view 組件。
（5）bindtap 的語法格式
在小程序中，不存在 HTML 中的 onclick 鼠標點擊事件，而是通過 tap 事件來響應用戶的觸摸行為。
① 通過 bindtap，可以為組件綁定 tap 觸摸事件，語法如下：
② 在頁面的 .js 文件中定義對應的事件處理函數，事件參數通過形參 event（一般簡寫成 e） 來接收：
（6）在事件處理函數中為 data 中的數據賦值
通過調用 this.setData(dataObject) 方法，可以給頁面 data 中的數據重新賦值，示例如下：
（7）事件傳參
小程序中的事件傳參比較特殊，不能在綁定事件的同時為事件處理函數傳遞參數。例如，下面的代碼將不能正常工作：
因為小程序會把 bindtap 的屬性值，統一當作事件名稱來處理，相當于要調用一個名稱為 btnHandler(123) 的事件處理函數。
可以為組件提供 data-* 自定義屬性傳參，其中 * 代表的是參數的名字，示例代碼如下：
最終：
- info 會被解析為參數的名字。
- 數值 2 會被解析為參數的值。
在事件處理函數中，通過 event.target.dataset.參數名 即可獲取到具體參數的值，示例代碼如下：
（8）bindinput 的語法格式
在小程序中，通過 input 事件來響應文本框的輸入事件，語法格式如下：
① 通過 bindinput，可以為文本框綁定輸入事件：
② 在頁面的 .js 文件中定義事件處理函數：
（9）實現文本框和 data 之間的數據同步
實現步驟：
① 定義數據
② 渲染結構
③ 美化樣式
④ 綁定 input 事件處理函數
1.3 條件渲染
（1）wx:if
在小程序中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：
也可以用 wx:elif 和 wx:else 來添加 else 判斷：
（2）結合 <block> 使用 wx:if
如果要一次性控制多個組件的展示與隱藏，可以使用一個 <block></block> 標簽將多個組件包裝起來，并在 標簽上使用 wx:if 控制屬性，示例如下：
注意： <block> 并不是一個組件，它只是一個包裹性質的容器，不會在頁面中做任何渲染。
（3） hidden
在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的顯示與隱藏：
（4）wx:if 與 hidden 的對比
① 運行方式不同
② 使用建議
- 頻繁切換時，建議使用 hidden。
- 控制條件復雜時，建議使用 wx:if 搭配 wx:elif、wx:else 進行展示與隱藏的切換。
1.4 列表渲染
（1）wx:for
通過 wx:for 可以根據指定的數組，循環渲染重復的組件結構，語法示例如下：
默認情況下，當前循環項的索引用 index 表示；當前循環項用 item 表示。
（2）手動指定索引和當前項的變量名*
- 使用 wx:for-index 可以指定當前循環項的索引的變量名。
- 使用 wx:for-item 可以指定當前項的變量名。
示例代碼如下：
（3）wx:key 的使用
類似于 Vue 列表渲染中的 :key，小程序在實現列表渲染時，也建議為渲染出來的列表項指定唯一的 key 值，從而提高渲染的效率，示例代碼如下：
2. WXSS 模板樣式
2.1 WXSS
（1）什么是 WXSS
WXSS (WeiXin Style Sheets)是一套樣式語言，用于美化 WXML 的組件樣式，類似于網頁開發中的 CSS。
（2） WXSS 和 CSS 的關系
WXSS 具有 CSS 大部分特性，同時，WXSS 還對 CSS 進行了擴充以及修改，以適應微信小程序的開發。
與 CSS 相比，WXSS 擴展的特性有：
- rpx 尺寸單位。
- @import 樣式導入。
2.2 rpx
（1）什么是 rpx 尺寸單位
rpx（responsive pixel）是微信小程序獨有的，用來解決屏適配的尺寸單位。
（2）rpx 的實現原理
rpx 的實現原理非常簡單：鑒于不同設備屏幕的大小不同，為了實現屏幕的自動適配，rpx 把所有設備的屏幕，在寬度上等分為 750 份（即：當前屏幕的總寬度為 750rpx）。
- 在較小的設備上，1rpx 所代表的寬度較小。
- 在較大的設備上，1rpx 所代表的寬度較大。
小程序在不同設備上運行的時候，會自動把 rpx 的樣式單位換算成對應的像素單位來渲染，從而實現屏幕適配。
（3）rpx 與 px 之間的單位換算*
在 iPhone6 上，屏幕寬度為375px，共有 750 個物理像素，等分為 750rpx。則：
750rpx = 375px = 750 物理像素 1rpx = 0.5px = 1物理像素
官方建議：開發微信小程序時，設計師可以用 iPhone6 作為視覺稿的標準。
開發舉例：在 iPhone6 上如果要繪制寬100px，高20px的盒子，換算成rpx單位，寬高分別為 200rpx 和 40rpx。
2.3 樣式導入、全局樣式和局部樣式
（1）什么是樣式導入
使用 WXSS 提供的 @import 語法，可以導入外聯的樣式表。
（2）@import 的語法格式
@import 后跟需要導入的外聯樣式表的相對路徑，用 ; 表示語句結束。示例如下：
（3）全局樣式
定義在 app.wxss 中的樣式為全局樣式，作用于每一個頁面。
（4）局部樣式
在頁面的 .wxss 文件中定義的樣式為局部樣式，只作用于當前頁面。
注意：
3. 全局配置
3.1 全局配置文件及常用的配置項
小程序根目錄下的 app.json 文件是小程序的全局配置文件。常用的配置項如下：
- pages
- 記錄當前小程序所有頁面的存放路徑。
- window
- 全局設置小程序窗口的外觀。
- tabBar
- 設置小程序底部的 tabBar 效果。
- style
- 是否啟用新版的組件樣式。
3.2 window
（1）小程序窗口的組成部分
（2）了解 window 節點常用的配置項
（3）設置導航欄的標題
設置步驟：app.json -> window -> navigationBarTitleText
需求：把導航欄上的標題，從默認的 “WeChat” 修改為 “黑馬程序員”，效果如圖所示：
（4）設置導航欄的背景色
設置步驟：app.json -> window -> navigationBarBackgroundColor
需求：把導航欄標題的背景色，從默認的 #fff 修改為 #2b4b6b ，效果如圖所示：
（5）設置導航欄的標題顏色
設置步驟：app.json -> window -> navigationBarTextStyle
需求：把導航欄上的標題顏色，從默認的 black 修改為 white ，效果如圖所示：
注意： navigationBarTextStyle 的可選值只有 black 和 white。
（6）全局開啟下拉刷新功能
概念：下拉刷新是移動端的專有名詞，指的是通過手指在屏幕上的下拉滑動操作，從而重新加載頁面數據的行為。
設置步驟：app.json -> window -> 把 enablePullDownRefresh 的值設置為 true
注意：在 app.json 中啟用下拉刷新功能，會作用于每個小程序頁面！
（7）設置下拉刷新時窗口的背景色
當全局開啟下拉刷新功能之后，默認的窗口背景為白色。如果自定義下拉刷新窗口背景色，設置步驟為: app.json -> window -> 為 backgroundColor 指定16進制的顏色值 #efefef。效果如下：
（8）設置下拉刷新時 loading 的樣式
當全局開啟下拉刷新功能之后，默認窗口的 loading 樣式為白色，如果要更改 loading 樣式的效果，設置步驟為 app.json -> window -> 為 backgroundTextStyle 指定 dark 值。效果如下：
注意： backgroundTextStyle 的可選值只有 light 和 dark。
（9）設置上拉觸底的距離
概念：上拉觸底是移動端的專有名詞，通過手指在屏幕上的上拉滑動操作，從而加載更多數據的行為。
設置步驟： app.json -> window -> 為 onReachBottomDistance 設置新的數值。
注意：默認距離為50px，如果沒有特殊需求，建議使用默認值即可。
3.3 tabBar
（1）什么是 tabBar
tabBar 是移動端應用常見的頁面效果，用于實現多頁面的快速切換。小程序中通常將其分為：
- 底部 tabBar
- 頂部 tabBar
注意：
-
tabBar 中只能配置最少 2 個、最多 5 個 tab 頁簽。
-
當渲染頂部 tabBar 時，不顯示 icon，只顯示文本。
（2）tabBar 的 6 個組成部分- backgroundColor：tabBar 的背景色
- selectedIconPath：選中時的圖片路徑
- borderStyle：tabBar 上邊框的顏色
- iconPath：未選中時的圖片路徑
- selectedColor：tab 上的文字選中時的顏色
- color：tab 上文字的默認（未選中）顏色
（3）tabBar 節點的配置項
（4）每個 tab 項的配置選項
4. 頁面配置
（1）頁面配置文件的作用
小程序中，每個頁面都有自己的 .json 配置文件，用來對當前頁面的窗口外觀、頁面效果等進行配置。
（2）頁面配置和全局配置的關系
小程序中，app.json 中的 window 節點，可以全局配置小程序中每個頁面的窗口表現。
如果某些小程序頁面想要擁有特殊的窗口表現，此時，“頁面級別的 .json 配置文件”就可以實現這種需求。
注意：當頁面配置與全局配置沖突時，根據就近原則，最終的效果以頁面配置為準。
（3）頁面配置中常用的配置項
5. 網絡數據請求
（1）小程序中網絡數據請求的限制
出于安全性方面的考慮，小程序官方對數據接口的請求做出了如下兩個限制：
- 只能請求 HTTPS 類型的接口。
- 必須將接口的域名添加到信任列表中。
（2）配置 request 合法域名
需求描述： 假設在自己的微信小程序中，希望請求 https://www.escook.cn/ 域名下的接口。
配置步驟： 登錄微信小程序管理后臺 -> 開發 -> 開發設置 -> 服務器域名 -> 修改 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）- 模板与配置：WXML 模板语法、WXSS 模板样式、全局配置、页面配置、网络数据请求的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 河北省地税数据上收集中及异地容灾应用(R
- 下一篇： WPF与3D 模型（一）把Solidwo