您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“微信小程序配置視圖層數(shù)據(jù)綁定的方法”的有關(guān)知識(shí),在實(shí)際案例的操作過程中,不少人都會(huì)遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細(xì)閱讀,能夠?qū)W有所成!
小程序框架的目標(biāo)是通過盡可能簡單、高效的方式讓開發(fā)者可以在微信中開發(fā)具有原生 APP 體驗(yàn)的服務(wù)。
小程序框架提供了自己的視圖層描述語言WXML
和WXSS
,以及JavaScript
,并在視圖層與邏輯層間提供了數(shù)據(jù)傳輸和事件系統(tǒng),讓開發(fā)者能夠?qū)W⒂跀?shù)據(jù)與邏輯。
官網(wǎng)
結(jié)構(gòu) | 傳統(tǒng)web | 微信小程序 |
---|---|---|
結(jié)構(gòu) | HTML | WXML |
樣式 | CSS | WXSS |
邏輯 | Javascript | Javascript |
配置 | 無 | JSON |
通過以上對(duì)比得出,傳統(tǒng)web是三層結(jié)構(gòu)。而微信小程序 是四層結(jié)構(gòu),多了一層配置.json
一個(gè)小程序應(yīng)用程序會(huì)包括最基本的兩種配置文件。一種是全局的app.json
和 頁面自己的page.json
注意:配置文件中不能出現(xiàn)注釋
app.json
是當(dāng)前小程序的全局配置,包括了小程序的所有頁面路徑、界面表現(xiàn)、網(wǎng)絡(luò)超時(shí)時(shí)間、底部 tab 等。普通快速啟動(dòng)項(xiàng)目里邊的app.json
配置
{ "pages":[ "pages/index/index", "pages/logs/logs" ], "window":{ "backgroundTextStyle":"light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "WeChat", "navigationBarTextStyle":"black" } }
字段的含義
pages息請(qǐng)參考app.json配置
這里的page.json其實(shí)用來表示頁面目錄下的page.json這類和小程序頁面相關(guān)的配置。
開發(fā)者可以獨(dú)立定義每個(gè)頁面的一些屬性,如頂部顏色、是否允許下拉刷新等等。
頁面的配置只能設(shè)置app.json
中部分window
配置項(xiàng)的內(nèi)容,頁面中配置項(xiàng)會(huì)覆蓋app.json
的window
中相同的配置項(xiàng)。
屬性 | 類型 | 默認(rèn)值 | 描述 |
---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 導(dǎo)航欄背景顏色,如#000000 |
navigationBarTextStyle | String | white | 導(dǎo)航欄標(biāo)題顏色,僅支持black/white |
navigationBarTitleText | String | 導(dǎo)航欄標(biāo)題文字內(nèi)容 | |
backgroundColor | HexColor | #ffffff | 窗口的背景色 |
backgroundTextStyle | String | dark | 下拉 loading 的樣式,僅支持dark/light |
enablePullDownRefresh | Boolean | false | 是否全局開啟下拉刷新。 詳見Page.onPullDownRefresh |
onReachBottomDistance | Number | 50 | 頁面上拉觸底事件觸發(fā)時(shí)距頁面底部距離,單位為px。 詳見Page.onReachBottom |
disableScroll | Boolean | false | 設(shè)置為true則頁面整體不能上下滾動(dòng);只在頁面配置中有效,無法在app.json中設(shè)置該項(xiàng) |
WXML(WeiXin Markup Language)是框架設(shè)計(jì)的一套標(biāo)簽語言,結(jié)合基礎(chǔ)組件、事件系統(tǒng),可以構(gòu)建出頁面的結(jié)構(gòu)。
<view> {{ message }} </view> Page({ data: { message: 'Hello MINA!' } })
簡直和上面沒區(qū)別啊
<view id="item-{{id}}"> </view> Page({ data: { id: 0 } })
不要直接寫 checked="false",其計(jì)算結(jié)果是一個(gè)字符串
<checkbox checked="{{false}}"> </checkbox>
<view hidden="{{flag ? true : false}}"> Hidden </view>
<view> {{a + b}} + {{c}} + d </view> Page({ data: { a: 1, b: 2, c: 3 } })
<view wx:if="{{length > 5}}"> </view>
<view>{{"hello" + name}}</view> Page({ data:{ name: 'MINA' } })
花括號(hào)和引號(hào)之間如果有空格,將最終被解析成為字符串
項(xiàng)的變量名默認(rèn)為item
wx:for-item
可以指定數(shù)組當(dāng)前元素的變量名
下標(biāo)變量名默認(rèn)為index
wx:for-index
可以指定數(shù)組當(dāng)前下標(biāo)的變量名
<view wx:for="{{array}}"> {{index}}: {{item.name}}:{{item.age}} </view> Page({ data: { array: [{ name: 'foo', age: 18, }, { name: 'bar' 'age': 20, }] } })
渲染一個(gè)包含多節(jié)點(diǎn)的結(jié)構(gòu)塊 block最終不會(huì)變成真正的dom元素
<block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view> </block>
提高效率使用的
在框架中,使用wx:if="{{condition}}"來判斷是否需要渲染該代碼塊:
<view wx:if="{{condition}}"> True </view>
<view hidden="{{condition}}"> True </view>
類似wx:if
頻繁切換 用hidden
不常使用 用wx:if
“微信小程序配置視圖層數(shù)據(jù)綁定的方法”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識(shí)可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實(shí)用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。