微信小程序基础学习(2)- 模板与配置:WXML 模板语法、WXSS 模板样式、全局配置、页面配置、网络数据请求
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)行方式不同
② 使用建議
- 頻繁切換時(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è)面。
注意:
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)題。
- 上一篇: 河北省地税数据上收集中及异地容灾应用(R
- 下一篇: Anaconda3 安装失败 faile