微信小程序3-模板与配置
模板與配置
(一)WXML模板語(yǔ)法
1.數(shù)據(jù)綁定
1.1 數(shù)據(jù)綁定的基本原則
1.2 在data中定義數(shù)據(jù)
1.3 Mustache語(yǔ)法格式
?1.4?Mustache語(yǔ)法的應(yīng)用場(chǎng)景
1.5 Mustache動(dòng)態(tài)綁定內(nèi)容
?1.6 Mustache動(dòng)態(tài)綁定屬性
1.7 Mustache三元運(yùn)算
?1.8 Mustache算數(shù)運(yùn)算
?2.事件綁定
2.1 事件概述
2.2? 小程序中常用的事件
?2.3事件對(duì)象的屬性列表
?2.4 target 和 currentTarget 的區(qū)別
2.5?bindtap 的語(yǔ)法格式
2.6 在事件處理函數(shù)中為data中的數(shù)據(jù)賦值
2.7 事件傳參
2.8 bindinput的語(yǔ)法格式
?2.9實(shí)現(xiàn)文本框和data之間的數(shù)據(jù)同步
3.條件渲染
3.1 wx:if / wx:elif / wx:else
?3.2 結(jié)合使用 wx:if
4. 列表渲染
4.1 wx:for
4.2 手動(dòng)指定索引和當(dāng)前項(xiàng)的變量名
?4.3 wx:key 的使用
?(二)WXSS模板語(yǔ)法
1.wxss
1.1.wxss和css的關(guān)系
wss與css相比,wxss的擴(kuò)展特性主要有
2.rpx
2.1 什么是rpx尺寸單位
2.2 rpx的實(shí)現(xiàn)原理(解決屏幕適配的方案)
3.樣式導(dǎo)入
3.1 什么是樣式導(dǎo)入
3.2 @import語(yǔ)法
4.全局樣式和局部樣式
4.1 全局樣式
4.2 局部樣式
(三) 全局配置
1.全局配置文件及常用的配置項(xiàng)
1.1 小程序窗口組成部分
2. window節(jié)點(diǎn)常用的配置項(xiàng)
2.4 全局開(kāi)啟下拉刷新的功能?enablePullDownRefresh
2.5 設(shè)置下拉刷新時(shí)窗口的背景顏色?backgroundColor
2.6 設(shè)置下拉刷新時(shí)loading的樣式?backgroundTextStyle
2.7 設(shè)置上拉觸底的距離
3 tabBar?
3.1 tabBar
3.2 tabBar 的6個(gè)組成部分
4 tabBar節(jié)點(diǎn)的配置項(xiàng)
每個(gè)tab項(xiàng)的配置選項(xiàng)
(四) 頁(yè)面配置
1.頁(yè)面配置文件和全局配置文件的關(guān)系
2.頁(yè)面配置中常用的配置項(xiàng)
(五) 網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求
1. 小程序中網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的限制
?2. 配置request合法域名
3.發(fā)起get請(qǐng)求
?4.發(fā)起post請(qǐng)求
?5.在頁(yè)面剛加載時(shí)請(qǐng)求數(shù)據(jù)
6.跳過(guò) request 合法域名校驗(yàn)
?7.關(guān)于跨域和ajax的說(shuō)明
模板與配置
(一)WXML模板語(yǔ)法
1.數(shù)據(jù)綁定
1.1 數(shù)據(jù)綁定的基本原則
- 在data中定義數(shù)據(jù)
- 在wxml中使用數(shù)據(jù)
1.2 在data中定義數(shù)據(jù)
在頁(yè)面對(duì)應(yīng)的.js文件中,把數(shù)據(jù)定義到data對(duì)象即可
1.3 Mustache語(yǔ)法格式
在data中的數(shù)據(jù)綁定到頁(yè)面中渲染,使用Mustache語(yǔ)法(雙大括號(hào))將變量包起來(lái)即可,語(yǔ)法格式:
注意:?Mustache語(yǔ)法即為vue中的插值表達(dá)式
?1.4?Mustache語(yǔ)法的應(yīng)用場(chǎng)景
- 綁定內(nèi)容
- 綁定屬性
- 運(yùn)算( 三元運(yùn)算 / 算樹(shù)運(yùn)算等 )
1.5 Mustache動(dòng)態(tài)綁定內(nèi)容
?1.6 Mustache動(dòng)態(tài)綁定屬性
?注意: 在vue中數(shù)據(jù)的雙向綁定通過(guò) v-bind 實(shí)現(xiàn),但在小程序中不同,綁定內(nèi)容和綁定屬性都需要使用?Mustache 語(yǔ)法
1.7 Mustache三元運(yùn)算
?1.8 Mustache算數(shù)運(yùn)算
?2.事件綁定
2.1 事件概述
事件是渲染層到邏輯層的通訊方式,通過(guò)事件可以將用戶在 渲染層產(chǎn)生的行為,反饋到邏輯層進(jìn)行業(yè)務(wù)的處理
2.2? 小程序中常用的事件
?2.3事件對(duì)象的屬性列表
當(dāng)事件回調(diào)出發(fā)的時(shí)候,會(huì)收到一個(gè)事件對(duì)象event,它的詳細(xì)屬性如下表所示:
?2.4 target 和 currentTarget 的區(qū)別
target 是觸發(fā)事件的源頭組件 , currentTarget 是當(dāng)前事件所綁定的組件
點(diǎn)擊內(nèi)部的按鈕時(shí),點(diǎn)擊時(shí)間以冒泡的方式向外擴(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組件
2.5?bindtap 的語(yǔ)法格式
在小程序中,不存在html中的onclick鼠標(biāo)點(diǎn)擊事件,而是通過(guò)tap事件來(lái)響應(yīng)用戶的觸摸行為
- 通過(guò)bindtap可以為組件綁定tap觸摸事件:
- 在頁(yè)面的.js文件中定義對(duì)應(yīng)的事件處理函數(shù),事件參數(shù)通過(guò)形參event(一般寫(xiě)成e)來(lái)接收
2.6 在事件處理函數(shù)中為data中的數(shù)據(jù)賦值
通過(guò)調(diào)用 this.setData(dataObject) 方法,可以給頁(yè)面data中的數(shù)據(jù)重新賦值
?
2.7 事件傳參
小程序中的事件傳參比較特殊,不能在綁定事件的同時(shí)為事件處理函數(shù)傳遞參數(shù)
在vue中可以在綁定事件的時(shí)候進(jìn)行傳值:小程序和vue的區(qū)別
因?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ù)的值: 在事件處理函數(shù)中,通過(guò)event.target.dataset.參數(shù)名 即可獲取到具體參數(shù)的值,示例:
?注意:傳參時(shí),data-info=" 2 "?代表string類型2 ;data-info=" {{ 2 }}?" 才代表number類型的數(shù)字2
2.8 bindinput的語(yǔ)法格式
在小程序中,通過(guò)input事件來(lái)響應(yīng)文本輸入框的輸入事件,語(yǔ)法格式為:
- 通過(guò)bindinput可以為文本框綁定輸入事件
- 在頁(yè)面的js文件中定義事件處理函數(shù)
?2.9實(shí)現(xiàn)文本框和data之間的數(shù)據(jù)同步
實(shí)現(xiàn)步驟:
- 定義數(shù)據(jù)
- 渲染結(jié)構(gòu)
- 美化樣式
- 綁定input事件處理函數(shù)
3.條件渲染
3.1 wx:if / wx:elif / wx:else
在小程序中,使用 wx:if = " {{ condition }} " 來(lái)判斷是否需要渲染該代碼塊
也可以用 wx:elif 和 wx:else 來(lái)添加else判斷:
wx:if wx:elif都需要添加判斷條件 wx:else表示最后一種情況,不需要添加條件
?
?3.2 結(jié)合<block>使用 wx:if
如果要一次性控制多個(gè)組件的展示與隱藏,可以使用一個(gè)<block></block>標(biāo)簽將多個(gè)組件包裝起來(lái),并在<block>標(biāo)簽上使用 wx:if 控制屬性,示例:
注意:<block>并不是一個(gè)組件,它只是一個(gè)包裹性質(zhì)的容器,不會(huì)在頁(yè)面中做任何渲染.?
?3.3 hidden
在小程序中,直接使用 hidden = " {{ condition }}?" 也能控制元素的顯示與隱藏
?3.4 wx:if 與 hidden 的對(duì)比 (v-if / v-show)
(1)運(yùn)行方式不同
- wx:if 以動(dòng)態(tài)創(chuàng)建和移除元素的方式控制元素的展示與隱藏
- hidden 以切換樣式的方式 (類似于 display : none/block ;) 控制元素的顯示與隱藏
(2)使用建議
- 頻繁切換時(shí),建議使用hidden
- 控制條件復(fù)雜時(shí),建議使用 wx:if 搭配 wx:elif / wx:else 進(jìn)行展示與隱藏
4. 列表渲染
4.1 wx:for
通過(guò)wx:for可以根據(jù)指定的數(shù)組,循環(huán)渲染重復(fù)的數(shù)組,語(yǔ)法:
?默認(rèn)情況下,當(dāng)前循環(huán)項(xiàng)的索引用inndex表示,當(dāng)前循環(huán)項(xiàng)用item表示
4.2 手動(dòng)指定索引和當(dāng)前項(xiàng)的變量名
- 使用 wx:for-index 可以指定當(dāng)前循環(huán)項(xiàng)的索引的變量名
- 使用 wx:for-item 可以指定當(dāng)前項(xiàng)的變量名
示例:
?4.3 wx:key 的使用
類似于vue列表循環(huán)中的 :key ,小程序在實(shí)現(xiàn)列表渲染時(shí),也建議為渲染出來(lái)的列表指定唯一的key值,從而提高渲染效率,代碼示例:
注意:在指定key的時(shí)候外面不用包Mustache語(yǔ)法,直接將對(duì)應(yīng)的key值填充就可以,也建議將id或index作為key值
?(二)WXSS模板語(yǔ)法
1.wxss
wxss 是一套樣式語(yǔ)言,用于美化wxml的組件樣式,類似于網(wǎng)頁(yè)開(kāi)發(fā)中的css
1.1.wxss和css的關(guān)系
wxss具有css大部分特性,同時(shí),wxss還對(duì)css進(jìn)行了擴(kuò)充以及修改,以適應(yīng)微信小程序的開(kāi)發(fā)
wss與css相比,wxss的擴(kuò)展特性主要有
- rpx尺寸單位
- @import樣式導(dǎo)入
2.rpx
2.1 什么是rpx尺寸單位
rpx: 是微信小程序獨(dú)有的,用來(lái)解決屏適配的尺寸單位
2.2 rpx的實(shí)現(xiàn)原理(解決屏幕適配的方案)
rpx的實(shí)現(xiàn)原理非常簡(jiǎn)單 : 鑒于不同設(shè)備屏幕尺寸大小不同,為了實(shí)現(xiàn)屏幕的自動(dòng)適配,rpx把所有設(shè)備的屏幕,在寬度上等分750份, ( 即:當(dāng)前屏幕的總寬度為750rpx? )
小程序在不同設(shè)備上運(yùn)行的時(shí)候,底層會(huì)自動(dòng)把rpx的樣式單位換算成對(duì)應(yīng)的像素單位來(lái)渲染,從而實(shí)現(xiàn)屏幕適配
3.樣式導(dǎo)入
3.1 什么是樣式導(dǎo)入
使用wxss提供的@import語(yǔ)法,可以導(dǎo)入外聯(lián)樣式表
3.2 @import語(yǔ)法
@import ?" 外聯(lián)樣式表的相對(duì)路徑 "? ;?
4.全局樣式和局部樣式
4.1 全局樣式
定義在app.wxss中的樣式為全局樣式,作用于每個(gè)頁(yè)面
4.2 局部樣式
在頁(yè)面的 .wxss 文件中定義的樣式為局部樣式,只作用于當(dāng)前頁(yè)面
注意:
- 當(dāng)全局樣式和局部樣式?jīng)_突時(shí),根據(jù)就近原則,局部樣式會(huì)覆蓋全局樣式
- 當(dāng)局部樣式的權(quán)重大于或等于全局樣式的權(quán)重時(shí),才會(huì)覆蓋全局樣式
注意:
權(quán)重比較: !important > 內(nèi)斂樣式 > id > 類選擇器&屬性選擇器&偽類選擇器 > 元素選擇器&偽類選擇器 > 通配符 > 繼承
app.wxss => view:nth-child(1){ backgroung-color : blue?}
index.wxss => view{ background-color: pink }?
局部樣式不會(huì)覆蓋全局樣式,因?yàn)槿謽邮綑?quán)重高于局部樣式
(三) 全局配置
微信小程序配置文件_卷心菜007的博客-CSDN博客
1.全局配置文件及常用的配置項(xiàng)
小程序根目錄下的app.json文件就是小程序的全局配置文件,常用的配置項(xiàng):
- pages : 記錄當(dāng)前小程序所有頁(yè)面的存放路徑
- window : 全局設(shè)置小程序窗口的外觀
- tabBar : 設(shè)置小程序底部的tabBar效果
- style : 是否啟用新版的組件樣式?
1.1 小程序窗口組成部分
2. window節(jié)點(diǎn)常用的配置項(xiàng)
以navigationBar 開(kāi)頭的配置項(xiàng) => 配置導(dǎo)航欄
以background 開(kāi)頭的配置項(xiàng) => 配置窗口背景樣式
其余樣式配置項(xiàng) => 用來(lái)配置頁(yè)面效果的配置項(xiàng)
2.1?設(shè)置導(dǎo)航欄的標(biāo)題?navigationBarTitleText
設(shè)置步驟: app.json => window => navigationBarTitleText
"window" :{ "navigationBarTitleText" : "我的應(yīng)用" }
2.2 設(shè)置導(dǎo)航欄的背景色?navigationBarBackgroundColor
設(shè)置步驟: app.json => window =>?navigationBarBackgroundColor
"window" :{ "navigationBarBackgroundColor" : "#2b4b6b" }
注意: 導(dǎo)航欄顏色設(shè)置只支持十六進(jìn)制顏色設(shè)置
2.3 設(shè)置導(dǎo)航欄的標(biāo)題顏色?navigationBarTextStyle
設(shè)置步驟: app.json => window =>?navigationBarTextStyle
"window" :{ "navigationBarTextStyle" : "white" }
注意:?navigationBarTextStyle 導(dǎo)航欄標(biāo)題顏色的可選值只有black 和 white?
2.4 全局開(kāi)啟下拉刷新的功能?enablePullDownRefresh
設(shè)置步驟 : app.json => window => enablePullDownRefresh 的值設(shè)置為 true
"window" :{ "enablePullDownRefresh" : true } //默認(rèn)為false
注意: 在app.json中開(kāi)啟下拉刷新功能,會(huì)作用于每個(gè)小程序頁(yè)面, 在模擬器中下拉刷新存在誤差
2.5 設(shè)置下拉刷新時(shí)窗口的背景顏色?backgroundColor
當(dāng)全局開(kāi)啟了下拉刷新的功能后,默認(rèn)的窗口背景為白色.
設(shè)置步驟 : app.json => window => 為backgroundColor指定16進(jìn)制的顏色值
"window" :{ "backgroundColor" : " #efefef "?}?
2.6 設(shè)置下拉刷新時(shí)loading的樣式?backgroundTextStyle
當(dāng)全局開(kāi)啟了下拉刷新的功能后,默認(rèn)的窗口的loading 為白色.
設(shè)置步驟 : app.json => window => 為backgroundTextStyle指定 dark 值
"window" :{ "backgroundTextStyle" : " dark?"?}?
注意 :?backgroundTextStyle的可選值只有l(wèi)ight 和 dark?
2.7 設(shè)置上拉觸底的距離
概念: 上拉觸底是移動(dòng)端的專有名詞,通過(guò)手指在屏幕上的拉滑操作,從而加載更多數(shù)據(jù)的行為
設(shè)置步驟 : app.json => window => 為onReachBottomDistance 設(shè)置新的數(shù)值
注意: 默認(rèn)距離為50px,沒(méi)有特殊需求時(shí),保持默認(rèn)值即可
"window" :{ "onReachBottomDistance" : 100}?
3 tabBar?
3.1 tabBar
tabbar是移動(dòng)端應(yīng)用常見(jiàn)的頁(yè)面效果,用于實(shí)現(xiàn)多頁(yè)面的快速切換,小程序中通常將其分為:
- 底部tabBar
- 頂部tabBar
注意:
- tabBar中只能配置最少2個(gè),最多5個(gè)tab標(biāo)簽
- 當(dāng)渲染頂部tabBar時(shí),不顯示icon圖標(biāo),只顯示文本
3.2 tabBar 的6個(gè)組成部分
- backgroundColor : tabBar的背景顏色
- selsctedconPath : 選中時(shí)的圖片路徑
- borderStyle : tabBar上邊框的顏色
- iconPath :? 未選中時(shí)的圖片路徑
- selectedColor : tab上的文字選中時(shí)的顏色
- color : tab 上文字的默認(rèn)(未選中)顏色
4 tabBar節(jié)點(diǎn)的配置項(xiàng)
每個(gè)tab項(xiàng)的配置選項(xiàng)
?"tabBar" : {?
"list" :[ { "pagePath":"pages/index/index" , "text":"index" } ,
{?"pagePath":"pages/test/test" , "text":"test" } ]? ?}
(四) 頁(yè)面配置
1.頁(yè)面配置文件和全局配置文件的關(guān)系
- 當(dāng)全局樣式和局部樣式?jīng)_突時(shí),根據(jù)就近原則,局部樣式會(huì)覆蓋全局樣式
- 當(dāng)局部樣式的權(quán)重大于或等于全局樣式的權(quán)重時(shí),才會(huì)覆蓋全局樣式
2.頁(yè)面配置中常用的配置項(xiàng)
?注意: 并不是所有的頁(yè)面都是需要下拉刷新,不在app.json中定義下拉刷新,在設(shè)計(jì)頁(yè)面下拉刷新時(shí),將下拉刷新寫(xiě)在頁(yè)面配置中
message.json => { "enablePullDownRefresh" : true }
(五) 網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求
1. 小程序中網(wǎng)絡(luò)數(shù)據(jù)請(qǐng)求的限制
出于安全性方面的考慮,小程序官方對(duì)數(shù)據(jù)接口請(qǐng)求做出了限制:
- 只能請(qǐng)求 HTTPS 類型的接口 , 不能請(qǐng)求HTTP類接口
- 必須將接口的域名添加到信任列表中
?2. 配置request合法域名
?配置步驟:登錄微信小程序管理后臺(tái)=>開(kāi)發(fā)=>開(kāi)發(fā)設(shè)置=>服務(wù)器域名=>修改request合法域名
注意:
- 域名只支持 https 協(xié)議
- 域名不能使用 IP 地址或 localhost
- 域名必須經(jīng)過(guò)ICP備案
- 服務(wù)器域名一個(gè)月內(nèi)最多可申請(qǐng)五次
3.發(fā)起get請(qǐng)求
調(diào)用微信小程序官方提供的 wx:request() 方法,可以發(fā)起get請(qǐng)求,實(shí)例:
home.wxml配置
home.js配置,res.data是最后的真實(shí)數(shù)據(jù)
?4.發(fā)起post請(qǐng)求
調(diào)用微信小程序提供的 wx.request()方法,可以發(fā)起post數(shù)據(jù)請(qǐng)求,實(shí)例:
home.js配置,res.data是最后的真實(shí)數(shù)據(jù)
?5.在頁(yè)面剛加載時(shí)請(qǐng)求數(shù)據(jù)
在頁(yè)面剛加載的時(shí)候,自動(dòng)請(qǐng)求一些初始化的數(shù)據(jù),需要在頁(yè)面的onLoad事件中調(diào)用獲取數(shù)據(jù)的函數(shù),實(shí)例:
?注意: 通過(guò)this調(diào)用,this代表當(dāng)前頁(yè)面加載的的實(shí)例
6.跳過(guò) request 合法域名校驗(yàn)
如果后端程序員僅僅提供了http協(xié)議接口,暫時(shí)沒(méi)有提供https協(xié)議接口,此時(shí)為了不耽誤開(kāi)發(fā)進(jìn)度,我們可以在微信開(kāi)發(fā)者工具中,臨時(shí)開(kāi)啟 " 開(kāi)發(fā)環(huán)境不校驗(yàn)請(qǐng)求域名,TLS版本及HTTPS證書(shū)?" 選項(xiàng),
跳過(guò)request選項(xiàng).
注意 : 跳過(guò)request 合法域名校驗(yàn)的選項(xiàng),僅限在來(lái)發(fā)與調(diào)試階段使用
?7.關(guān)于跨域和ajax的說(shuō)明
跨域問(wèn)題只存在于基于瀏覽器的web開(kāi)發(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é)
以上是生活随笔為你收集整理的微信小程序3-模板与配置的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
- 上一篇： java5的新特性fore和可变参数
- 下一篇： Vant2 源码分析之 vant-sti