微信小程序----第二天（小程序 - 模板与配置）
一、WXML 模板語法
WXML 模板語法 - 數據綁定
1. 數據綁定的基本原則
2. 在 data 中定義頁面的數據
在頁面對應的 .js 文件中，把數據定義到 data 對象中即可：
?3. Mustache 語法的格式
把data中的數據綁定到頁面中渲染，使用 Mustache 語法（雙大括號）將變量包起來即可。語法格式為：
?4. Mustache 語法的應用場景
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 事件來響應用戶的觸摸行為。
通過 bindtap，可以為組件綁定 tap 觸摸事件，語法如下：
在頁面的 .js 文件中定義對應的事件處理函數，事件參數通過形參 event（一般簡寫成 e） 來接收：
?6. 在事件處理函數中為 data 中的數據賦值
通過調用 this.setData(dataObject) 方法，可以給頁面 data 中的數據重新賦值，示例如下：
?7. 事件傳參
小程序中的事件傳參比較特殊，不能在綁定事件的同時為事件處理函數傳遞參數。例如，下面的代碼將不能正常工作：
?因為小程序會把 bindtap 的屬性值，統一當作事件名稱來處理，相當于要調用一個名稱為 btnHandler(123) 的事件處理函數。
可以為組件提供 data-* 自定義屬性傳參，其中 * 代表的是參數的名字，示例代碼如下：
最終： ?
在事件處理函數中，通過 event.target.dataset.參數名 即可獲取到具體參數的值，示例代碼如下：
?8. bindinput 的語法格式
在小程序中，通過 input 事件來響應文本框的輸入事件，語法格式如下：
通過 bindinput，可以為文本框綁定輸入事件：
在頁面的 .js 文件中定義事件處理函數：
?9. 實現文本框和 data 之間的數據同步
實現步驟：
1.定義數據：
?2.渲染結構：
?3.美化樣式：
?4.綁定 input 事件處理函數：
隨著輸入的內容而不斷更新內容信息。
WXML 模板語法 - 條件渲染
1. wx:if
在小程序中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：
也可以用 wx:elif 和 wx:else 來添加 else 判斷：
?2. 結合 <block> 使用 wx:if
如果要一次性控制多個組件的展示與隱藏，可以使用一個 <block></block> 標簽將多個組件包裝起來，并在<block> 標簽上使用 wx:if 控制屬性，示例如下：
?注意： <block> 并不是一個組件，它只是一個包裹性質的容器，不會在頁面中做任何渲染。
3. hidden
在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的顯示與隱藏：
<view hidden="{{condition}}">hidden是false就顯示，true就隱藏</view>true:?
false:
?只是吟唱代碼，不是刪除代碼。
4. wx:if 與 hidden 的對比
運行方式不同 ?
- wx:if 以動態創建和移除元素的方式，控制元素的展示與隱藏 ?
- hidden 以切換樣式的方式（display: none/block;），控制元素的顯示與隱藏
使用建議 ?
- 頻繁切換時，建議使用 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 (WeiXin Style Sheets)是一套樣式語言，用于美化 WXML 的組件樣式，類似于網頁開發中的 CSS。
2. WXSS 和 CSS 的關系
WXSS 具有 CSS 大部分特性，同時，WXSS 還對 CSS 進行了擴充以及修改，以適應微信小程序的開發。 與 CSS 相比，WXSS 擴展的特性有： ?
- rpx 尺寸單位 ?
- @import 樣式導入
WXSS 模板樣式 - 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物理像素
| 設備 | rpx換算px?(屏幕寬度/750) | px換算rpx?(750/屏幕寬度) |
| iPhone5 | 1rpx?=?0.42px | 1px?=?2.34rpx |
| iPhone6 | 1rpx?=?0.5px | 1px?=?2rpx |
| iPhone6?Plus | 1rpx?=?0.552px | 1px?=?1.81rpx |
官方建議：開發微信小程序時，設計師可以用 iPhone6 作為視覺稿的標準。
開發舉例：在 iPhone6 上如果要繪制寬100px，高20px的盒子，換算成rpx單位，寬高分別為 200rpx 和 40rpx。
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 節點常用的配置項
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，如果沒有特殊需求，建議使用默認值即可。
全局配置 - tabBar
1. 什么是 tabBar
tabBar 是移動端應用常見的頁面效果，用于實現多頁面的快速切換。小程序中通常將其分為：
- 底部 tabBar
- 頂部 tabBar
注意：
- tabBar中只能配置最少 2 個、最多 5 個 tab 頁簽
- 當渲染頂部 tabBar 時，不顯示 icon，只顯示文本
?2. tabBar 的 6 個組成部分
?
3. tabBar 節點的配置項
4. 每個 tab 項的配置選項
全局配置 - 案例：配置 tabBar
1. 需求描述
根據資料中提供的小圖標、在小程序中配置如圖所示的 tabBar 效果：
?
?2. 實現步驟
3. 步驟1 - 拷貝圖標資源
1.把資料目錄中的 images 文件夾，拷貝到小程序項目根目錄中
2.將需要用到的小圖標分為 3 組，每組兩個，其中：
- 圖片名稱中包含 -active 的是選中之后的圖標
- 圖片名稱中不包含 -active 的是默認圖標 ? ? ? ?
截圖如下：
?3. 步驟2 - 新建 3 個對應的 tab 頁面
通過 app.json 文件的 pages 節點，快速新建 3 個對應的 tab 頁面，示例代碼如下：
?其中，home 是首頁，message 是消息頁面，contact 是聯系我們頁面。
3. 步驟3 - 配置 tabBar 選項
打開 app.json 配置文件，和 pages、window 平級，新增 tabBar 節點
tabBar 節點中，新增 list 數組，這個數組中存放的，是每個 tab 項的配置對象
在 list 數組中，新增每一個 tab 項的配置對象。對象中包含的屬性如下： ?
- pagePath 指定當前 tab 對應的頁面路徑【必填】 ?
- text 指定當前 tab 上按鈕的文字【必填】 ?
- iconPath 指定當前 tab 未選中時候的圖片路徑【可選】 ?
- selectedIconPath 指定當前 tab 被選中后高亮的圖片路徑【可選】
?4. 完整的配置代碼
四、頁面配置
1. 頁面配置文件的作用
小程序中，每個頁面都有自己的 .json 配置文件，用來對當前頁面的窗口外觀、頁面效果等進行配置。
2. 頁面配置和全局配置的關系
小程序中，app.json 中的 window 節點，可以全局配置小程序中每個頁面的窗口表現。 如果某些小程序頁面想要擁有特殊的窗口表現，此時，“頁面級別的 .json 配置文件”就可以實現這種需求。
注意：當頁面配置與全局配置沖突時，根據就近原則，最終的效果以頁面配置為準。
3. 頁面配置中常用的配置項
五、網絡數據請求
1. 小程序中網絡數據請求的限制
出于安全性方面的考慮，小程序官方對數據接口的請求做出了如下兩個限制：
?2. 配置 request 合法域名
需求描述：假設在自己的微信小程序中，希望請求 https://www.escook.cn/ 域名下的接口 配置步驟：登錄微信小程序管理后臺 -> 開發 -> 開發設置 -> 服務器域名 -> 修改 request 合法域名
注意事項：
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 請求”，而是叫做“發起網絡數據請求”。
六、案例 - 本地生活（首頁）
1. 首頁效果以及實現步驟
?2. 接口地址
1.獲取輪播圖數據列表的接口
- 【GET】https://www.escook.cn/slides
2.獲取九宮格數據列表的接口
- 【GET】https://www.escook.cn/categories
總結
能夠使用 WXML 模板語法渲染頁面結構 ?
- wx:if、wx:elif、wx:else、hidden、wx:for、wx:key
能夠使用 WXSS 樣式美化頁面結構
- ?rpx 尺寸單位、@import 樣式導入、全局樣式和局部樣式
能夠使用 app.json 對小程序進行全局性配置 ?
- pages、window、tabBar、style
能夠使用 page.json 對小程序頁面進行個性化配置 ?
- 對單個頁面進行個性化配置、就近原則
能夠知道如何發起網絡數據請求
- ?wx.request() 方法、onLoad() 事件
?視頻：黑馬程序員前端微信小程序開發教程，微信小程序從基礎到發布全流程_企業級商城實戰(含uni-app項目多端部署)_嗶哩嗶哩_bilibili
此文章是本人學習視頻自我總結，如有侵犯還望原諒。侵權必刪。
總結
以上是生活随笔為你收集整理的微信小程序----第二天（小程序 - 模板与配置）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Wavefront公司的.obj文件格式
- 下一篇： spire.doc 让java操作wor