微信小程序----第二天（小程序 - 模板与配置）
一、WXML 模板語法
WXML 模板語法 - 數(shù)據(jù)綁定
1. 數(shù)據(jù)綁定的基本原則
2. 在 data 中定義頁面的數(shù)據(jù)
在頁面對(duì)應(yīng)的 .js 文件中，把數(shù)據(jù)定義到 data 對(duì)象中即可：
?3. Mustache 語法的格式
把data中的數(shù)據(jù)綁定到頁面中渲染，使用 Mustache 語法（雙大括號(hào)）將變量包起來即可。語法格式為：
?4. Mustache 語法的應(yīng)用場(chǎng)景
Mustache 語法的主要應(yīng)用場(chǎng)景如下： ?
- 綁定內(nèi)容 ?
- 綁定屬性 ?
- 運(yùn)算（三元運(yùn)算、算術(shù)運(yùn)算等）
5. 動(dòng)態(tài)綁定內(nèi)容
頁面的數(shù)據(jù)如下：
?頁面的結(jié)構(gòu)如下：
?
?6. 動(dòng)態(tài)綁定屬性
頁面的數(shù)據(jù)如下：
?頁面的結(jié)構(gòu)如下：
7. 三元運(yùn)算
頁面的數(shù)據(jù)如下：
?頁面的結(jié)構(gòu)如下：
?8. 算數(shù)運(yùn)算
頁面的數(shù)據(jù)如下：
?頁面的結(jié)構(gòu)如下：
WXML 模板語法 - 事件綁定
1. 什么是事件
事件是渲染層到邏輯層的通訊方式。通過事件可以將用戶在渲染層產(chǎn)生的行為，反饋到邏輯層進(jìn)行業(yè)務(wù)的處理。
?2. 小程序中常用的事件
| 類型 | 綁定方式 | 事件描述 |
| tap | bindtap?或?bind:tap | 手指觸摸后馬上離開，類似于?HTML?中的?click?事件 |
| input | bindinput?或?bind:input | 文本框的輸入事件 |
| change | bindchange?或?bind:change | 狀態(tài)改變時(shí)觸發(fā) |
3. 事件對(duì)象的屬性列表
當(dāng)事件回調(diào)觸發(fā)的時(shí)候，會(huì)收到一個(gè)事件對(duì)象 event，它的詳細(xì)屬性如下表所示：
| 屬性 | 類型 | 說明 |
| type | String | 事件類型 |
| timeStamp | Integer | 頁面打開到觸發(fā)事件所經(jīng)過的毫秒數(shù) |
| target | Object | 觸發(fā)事件的組件的一些屬性值集合 |
| currentTarget | Object | 當(dāng)前組件的一些屬性值集合 |
| detail | Object | 額外的信息 |
| touches | Array | 觸摸事件，當(dāng)前停留在屏幕中的觸摸點(diǎn)信息的數(shù)組 |
| changedTouches | Array | 觸摸事件，當(dāng)前變化的觸摸點(diǎn)信息的數(shù)組 |
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 來說：
- e.target 指向的是觸發(fā)事件的源頭組件，因此，e.target 是內(nèi)部的按鈕組件
- e.currentTarget 指向的是當(dāng)前正在觸發(fā)事件的那個(gè)組件，因此，e.currentTarget 是當(dāng)前的 view 組件
5. bindtap 的語法格式
在小程序中，不存在 HTML 中的 onclick 鼠標(biāo)點(diǎn)擊事件，而是通過 tap 事件來響應(yīng)用戶的觸摸行為。
通過 bindtap，可以為組件綁定 tap 觸摸事件，語法如下：
在頁面的 .js 文件中定義對(duì)應(yīng)的事件處理函數(shù)，事件參數(shù)通過形參 event（一般簡(jiǎn)寫成 e） 來接收：
?6. 在事件處理函數(shù)中為 data 中的數(shù)據(jù)賦值
通過調(diào)用 this.setData(dataObject) 方法，可以給頁面 data 中的數(shù)據(jù)重新賦值，示例如下：
?7. 事件傳參
小程序中的事件傳參比較特殊，不能在綁定事件的同時(shí)為事件處理函數(shù)傳遞參數(shù)。例如，下面的代碼將不能正常工作：
?因?yàn)樾〕绦驎?huì)把 bindtap 的屬性值，統(tǒng)一當(dāng)作事件名稱來處理，相當(dāng)于要調(diào)用一個(gè)名稱為 btnHandler(123) 的事件處理函數(shù)。
可以為組件提供 data-* 自定義屬性傳參，其中 * 代表的是參數(shù)的名字，示例代碼如下：
最終： ?
在事件處理函數(shù)中，通過 event.target.dataset.參數(shù)名 即可獲取到具體參數(shù)的值，示例代碼如下：
?8. bindinput 的語法格式
在小程序中，通過 input 事件來響應(yīng)文本框的輸入事件，語法格式如下：
通過 bindinput，可以為文本框綁定輸入事件：
在頁面的 .js 文件中定義事件處理函數(shù)：
?9. 實(shí)現(xiàn)文本框和 data 之間的數(shù)據(jù)同步
實(shí)現(xiàn)步驟：
1.定義數(shù)據(jù)：
?2.渲染結(jié)構(gòu)：
?3.美化樣式：
?4.綁定 input 事件處理函數(shù)：
隨著輸入的內(nèi)容而不斷更新內(nèi)容信息。
WXML 模板語法 - 條件渲染
1. wx:if
在小程序中，使用 wx:if="{{condition}}" 來判斷是否需要渲染該代碼塊：
也可以用 wx:elif 和 wx:else 來添加 else 判斷：
?2. 結(jié)合 <block> 使用 wx:if
如果要一次性控制多個(gè)組件的展示與隱藏，可以使用一個(gè) <block></block> 標(biāo)簽將多個(gè)組件包裝起來，并在<block> 標(biāo)簽上使用 wx:if 控制屬性，示例如下：
?注意： <block> 并不是一個(gè)組件，它只是一個(gè)包裹性質(zhì)的容器，不會(huì)在頁面中做任何渲染。
3. hidden
在小程序中，直接使用 hidden="{{ condition }}" 也能控制元素的顯示與隱藏：
<view hidden="{{condition}}">hidden是false就顯示，true就隱藏</view>true:?
false:
?只是吟唱代碼，不是刪除代碼。
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)行展示與隱藏的切換
WXML 模板語法 - 列表渲染
1. wx:for
通過 wx:for 可以根據(jù)指定的數(shù)組，循環(huán)渲染重復(fù)的組件結(jié)構(gòu)，語法示例如下：
?默認(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í)，也建議為渲染出來的列表項(xiàng)指定唯一的 key 值，從而提高渲染的效率，示例代碼如下：
二、WXSS 模板樣式
1. 什么是 WXSS
WXSS (WeiXin Style Sheets)是一套樣式語言，用于美化 WXML 的組件樣式，類似于網(wǎng)頁開發(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)入
WXSS 模板樣式 - rpx
1. 什么是 rpx 尺寸單位
rpx（responsive pixel）是微信小程序獨(dú)有的，用來解決屏適配的尺寸單位。
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)的像素單位來渲染，從而實(shí)現(xiàn)屏幕適配。
3. rpx 與 px 之間的單位換算*
在 iPhone6 上，屏幕寬度為375px，共有 750 個(gè)物理像素，等分為 750rpx。則： 750rpx = 375px = 750 物理像素
? ? 1rpx = 0.5px ?= 1物理像素
| 設(shè)備 | 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 |
官方建議：開發(fā)微信小程序時(shí)，設(shè)計(jì)師可以用 iPhone6 作為視覺稿的標(biāo)準(zhǔn)。
開發(fā)舉例：在 iPhone6 上如果要繪制寬100px，高20px的盒子，換算成rpx單位，寬高分別為 200rpx 和 40rpx。
WXSS 模板樣式 - 樣式導(dǎo)入
1. 什么是樣式導(dǎo)入
使用 WXSS 提供的 @import 語法，可以導(dǎo)入外聯(lián)的樣式表。
2. @import 的語法格式
@import 后跟需要導(dǎo)入的外聯(lián)樣式表的相對(duì)路徑，用 ; 表示語句結(jié)束。示例如下：
WXSS 模板樣式 - 全局樣式和局部樣式
?1. 全局樣式
定義在 app.wxss 中的樣式為全局樣式，作用于每一個(gè)頁面。
2. 局部樣式
在頁面的 .wxss 文件中定義的樣式為局部樣式，只作用于當(dāng)前頁面。
注意：
三、全局配置
1. 全局配置文件及常用的配置項(xiàng)
小程序根目錄下的 app.json 文件是小程序的全局配置文件。常用的配置項(xiàng)如下：
1.pages
- 記錄當(dāng)前小程序所有頁面的存放路徑 ?
2.window
- 全局設(shè)置小程序窗口的外觀
3.tabBar
- 設(shè)置小程序底部的 ?tabBar 效果 ?
4.style
- 是否啟用新版的組件樣式
全局配置 - 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)端的專有名詞，指的是通過手指在屏幕上的下拉滑動(dòng)操作，從而重新加載頁面數(shù)據(jù)的行為。 設(shè)置步驟：app.json -> window -> 把 enablePullDownRefresh 的值設(shè)置為 true
注意：在 app.json 中啟用下拉刷新功能，會(huì)作用于每個(gè)小程序頁面！
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)端的專有名詞，通過手指在屏幕上的上拉滑動(dòng)操作，從而加載更多數(shù)據(jù)的行為。 設(shè)置步驟： app.json -> window -> 為 onReachBottomDistance 設(shè)置新的數(shù)值
注意：默認(rèn)距離為50px，如果沒有特殊需求，建議使用默認(rèn)值即可。
全局配置 - tabBar
1. 什么是 tabBar
tabBar 是移動(dòng)端應(yīng)用常見的頁面效果，用于實(shí)現(xiàn)多頁面的快速切換。小程序中通常將其分為：
- 底部 tabBar
- 頂部 tabBar
注意：
- tabBar中只能配置最少 2 個(gè)、最多 5 個(gè) tab 頁簽
- 當(dāng)渲染頂部 tabBar 時(shí)，不顯示 icon，只顯示文本
?2. tabBar 的 6 個(gè)組成部分
?
3. tabBar 節(jié)點(diǎn)的配置項(xiàng)
4. 每個(gè) tab 項(xiàng)的配置選項(xiàng)
全局配置 - 案例：配置 tabBar
1. 需求描述
根據(jù)資料中提供的小圖標(biāo)、在小程序中配置如圖所示的 tabBar 效果：
?
?2. 實(shí)現(xiàn)步驟
3. 步驟1 - 拷貝圖標(biāo)資源
1.把資料目錄中的 images 文件夾，拷貝到小程序項(xiàng)目根目錄中
2.將需要用到的小圖標(biāo)分為 3 組，每組兩個(gè)，其中：
- 圖片名稱中包含 -active 的是選中之后的圖標(biāo)
- 圖片名稱中不包含 -active 的是默認(rèn)圖標(biāo) ? ? ? ?
截圖如下：
?3. 步驟2 - 新建 3 個(gè)對(duì)應(yīng)的 tab 頁面
通過 app.json 文件的 pages 節(jié)點(diǎn)，快速新建 3 個(gè)對(duì)應(yīng)的 tab 頁面，示例代碼如下：
?其中，home 是首頁，message 是消息頁面，contact 是聯(lián)系我們頁面。
3. 步驟3 - 配置 tabBar 選項(xiàng)
打開 app.json 配置文件，和 pages、window 平級(jí)，新增 tabBar 節(jié)點(diǎn)
tabBar 節(jié)點(diǎn)中，新增 list 數(shù)組，這個(gè)數(shù)組中存放的，是每個(gè) tab 項(xiàng)的配置對(duì)象
在 list 數(shù)組中，新增每一個(gè) tab 項(xiàng)的配置對(duì)象。對(duì)象中包含的屬性如下： ?
- pagePath 指定當(dāng)前 tab 對(duì)應(yīng)的頁面路徑【必填】 ?
- text 指定當(dāng)前 tab 上按鈕的文字【必填】 ?
- iconPath 指定當(dāng)前 tab 未選中時(shí)候的圖片路徑【可選】 ?
- selectedIconPath 指定當(dāng)前 tab 被選中后高亮的圖片路徑【可選】
?4. 完整的配置代碼
四、頁面配置
1. 頁面配置文件的作用
小程序中，每個(gè)頁面都有自己的 .json 配置文件，用來對(duì)當(dāng)前頁面的窗口外觀、頁面效果等進(jìn)行配置。
2. 頁面配置和全局配置的關(guān)系
小程序中，app.json 中的 window 節(jié)點(diǎn)，可以全局配置小程序中每個(gè)頁面的窗口表現(xiàn)。 如果某些小程序頁面想要擁有特殊的窗口表現(xiàn)，此時(shí)，“頁面級(jí)別的 .json 配置文件”就可以實(shí)現(xiàn)這種需求。
注意：當(dāng)頁面配置與全局配置沖突時(shí)，根據(jù)就近原則，最終的效果以頁面配置為準(zhǔn)。
3. 頁面配置中常用的配置項(xiàng)
五、網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求
1. 小程序中網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的限制
出于安全性方面的考慮，小程序官方對(duì)數(shù)據(jù)接口的請(qǐng)求做出了如下兩個(gè)限制：
?2. 配置 request 合法域名
需求描述：假設(shè)在自己的微信小程序中，希望請(qǐng)求 https://www.escook.cn/ 域名下的接口 配置步驟：登錄微信小程序管理后臺(tái) -> 開發(fā) -> 開發(fā)設(shè)置 -> 服務(wù)器域名 -> 修改 request 合法域名
注意事項(xiàng)：
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. 在頁面剛加載時(shí)請(qǐng)求數(shù)據(jù)
在很多情況下，我們需要在頁面剛加載的時(shí)候，自動(dòng)請(qǐng)求一些初始化的數(shù)據(jù)。此時(shí)需要在頁面的 onLoad 事件中調(diào)用獲取數(shù)據(jù)的函數(shù)，示例代碼如下：
6. 跳過 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)，跳過 request 合法域名的校驗(yàn)。
?注意： 跳過 request 合法域名校驗(yàn)的選項(xiàng)，僅限在開發(fā)與調(diào)試階段使用！
7. 關(guān)于跨域和 Ajax 的說明
跨域問題只存在于基于瀏覽器的 Web 開發(fā)中。由于小程序的宿主環(huán)境不是瀏覽器，而是微信客戶端，所以小程序中不存在跨域的問題。
Ajax 技術(shù)的核心是依賴于瀏覽器中的 XMLHttpRequest 這個(gè)對(duì)象，由于小程序的宿主環(huán)境是微信客戶端，所以小程序中不能叫做“發(fā)起 Ajax 請(qǐng)求”，而是叫做“發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求”。
六、案例 - 本地生活（首頁）
1. 首頁效果以及實(shí)現(xiàn)步驟
?2. 接口地址
1.獲取輪播圖數(shù)據(jù)列表的接口
- 【GET】https://www.escook.cn/slides
2.獲取九宮格數(shù)據(jù)列表的接口
- 【GET】https://www.escook.cn/categories
總結(jié)
能夠使用 WXML 模板語法渲染頁面結(jié)構(gòu) ?
- wx:if、wx:elif、wx:else、hidden、wx:for、wx:key
能夠使用 WXSS 樣式美化頁面結(jié)構(gòu)
- ?rpx 尺寸單位、@import 樣式導(dǎo)入、全局樣式和局部樣式
能夠使用 app.json 對(duì)小程序進(jìn)行全局性配置 ?
- pages、window、tabBar、style
能夠使用 page.json 對(duì)小程序頁面進(jìn)行個(gè)性化配置 ?
- 對(duì)單個(gè)頁面進(jìn)行個(gè)性化配置、就近原則
能夠知道如何發(fā)起網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求
- ?wx.request() 方法、onLoad() 事件
?視頻：黑馬程序員前端微信小程序開發(fā)教程，微信小程序從基礎(chǔ)到發(fā)布全流程_企業(yè)級(jí)商城實(shí)戰(zhàn)(含uni-app項(xiàng)目多端部署)_嗶哩嗶哩_bilibili
此文章是本人學(xué)習(xí)視頻自我總結(jié)，如有侵犯還望原諒。侵權(quán)必刪。
總結(jié)
以上是生活随笔為你收集整理的微信小程序----第二天（小程序 - 模板与配置）的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Wavefront公司的.obj文件格式
- 下一篇： spire.doc 让java操作wor