




版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)
文檔簡介
1、第四講微信小程序 pages 視圖層 .wxml 配置使用學(xué)習(xí)要點(diǎn): 1. 數(shù)據(jù)綁定2. 條件語句3. 列表循環(huán)wx:ifwx:elif wx:elsewx:for4. 模板 WXML 提供模板(template),可以在模板中定義代碼片段,然后在不同的地方調(diào)用。 5. 模板在外部引用 importinclude合作網(wǎng)站:/ (千峰教育)合作網(wǎng)站:www.ionic.wang(Ionic 中文網(wǎng))主講老師:樹根1. 數(shù)據(jù)綁定 WXML 中的動態(tài)數(shù)據(jù)均來自對應(yīng) Page 的 data。 簡單綁定 數(shù)據(jù)綁定使用 Mustache 語法(雙大括號)將
2、變量包起來,可以作用于: 組件屬性(需要在雙引號之內(nèi)) Page(data: id: 0) message Page(data: message: Hello MINA!)控制屬性(需要在雙引號之內(nèi))運(yùn)算可以在 內(nèi)進(jìn)行簡單的運(yùn)算,支持的有如下幾種方式: 組合 也可以在 Mustache 內(nèi)直接進(jìn)行組合,構(gòu)成新的對象或者數(shù)組。 數(shù)組 item Page(data: 算數(shù)運(yùn)算 a + b + c + d Page(data: a: 1,b: 2,c: 3)view 中的內(nèi)容為 3 + 3 + d。邏輯判斷 5 字符串運(yùn)算 hello + name Page(data:name: MINA) Pag
3、e(data: condition: true)zero: 0)最終組合成數(shù)組0, 1, 2, 3, 4。 對象 Page(data: a: 1,b: 2)最終組合成的對象是 for: 1, bar: 2也可以用擴(kuò)展運(yùn)算符來將一個對象展開 Page(data: obj1: a: 1,b: 2,obj2: c: 3,d: 4)最終組合成的對象是 a: 1, b: 2, c: 3, d: 4, e: 5。 如果對象的 key 和 value 相同,也可以間接地表達(dá)。 Page(data: foo: my-foo,bar: my-bar)最終組合成的對象是 foo: my-foo, bar:my-b
4、ar。 2. 條件渲染 wx:ifwx:elifwx:elsewx:if在框架中,我們用 wx:if=condition 來判斷是否需要渲染該代碼塊: 也可以用 wx:elif 和 wx:else 來添加一個 else 塊: block wx:if因?yàn)?wx:if 是一個控制屬性,需要將它添加到一個標(biāo)簽上。但是如果我們想一次性判斷多個組件標(biāo)簽, 我們可以使用一個 標(biāo)簽將多個組件包裝起來,并在上邊使用 wx:if 控制屬性。 注意: 并不是一個組件,它僅僅是一個包裝元素,不會在頁面中做任何渲染,只接受控制屬 性。 3. 列表循環(huán) wx:for在組件上使用 wx:for 控制屬性綁定一個數(shù)組,即可
5、使用數(shù)組中各項(xiàng)的數(shù)據(jù)重復(fù)渲染該組件。 view1 view2 5 1 2 2 3 True 默認(rèn)數(shù)組的當(dāng)前項(xiàng)的下標(biāo)變量名默認(rèn)為 index,數(shù)組當(dāng)前項(xiàng)的變量名默認(rèn)為 item使用 wx:for-item 可以指定數(shù)組當(dāng)前元素的變量名使用 wx:for-index 可以指定數(shù)組當(dāng)前下標(biāo)的變量名:wx:for 也可以嵌套,下邊是一個九九乘法表block wx:forview wx:if=i i * j = i * jidx: itemName.messageindex: item.message Page(data: items: message: foo, message: bar)類似 blo
6、ck wx:if,也可以將 wx:for 用在標(biāo)簽上,以渲染一個包含多節(jié)點(diǎn)的結(jié)構(gòu)塊。例如:4.模板WXML 提供模板(template),可以在模板中定義代碼片段,然后在不 同的地方調(diào)用。定義模板 使用 name 屬性,作為模板的名字。然后在內(nèi)定義代碼片段,如:使用模板 使用 is 屬性,聲明需要的使用的模板,然后將模板所需要的 data 傳入,如: Page(data: item: index: 0,msg: this is a template, time: 2016-09-15) index: msg Time: time index: item is 屬性可以使用 Mustache 語
7、法,來動態(tài)決定具體需要渲染哪個模板: 模板的作用域 模板擁有自己的作用域,只能使用 data 傳入的數(shù)據(jù)。5.模板在外部引用WXML 提供兩種文件引用方式import 和 include。 importimport 可以在該文件中使用目標(biāo)文件定義的 template,如:在 item.wxml 中定義了一個叫item 的 template: 在 index.wxml 中引用了 item.wxml,就可以使用 item 模板:import 的作用域 import 有作用域的概念,即只會 import 目標(biāo)文件中定義的 template,而不會 import 目標(biāo)文件 text odd even import 的 template 。如:C import B,B import A,在 C 中可以使用 B 定義的 template,在 B 中可以使用 A 定義的 template, 但是 C 不
溫馨提示
- 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
- 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間,僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對任何下載內(nèi)容負(fù)責(zé)。
- 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
- 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 江蘇苗木休眠管理辦法
- 硬筆書法教學(xué)設(shè)計(jì)與實(shí)施指南
- 季節(jié)性施工的技術(shù)難點(diǎn)及應(yīng)對策略
- 制定管理辦法提升管理
- 生產(chǎn)安全事故報(bào)告和調(diào)查處理?xiàng)l例規(guī)定事故
- 新疆暖氣收費(fèi)管理辦法
- 企業(yè)安全生產(chǎn)培訓(xùn)教育
- 首席網(wǎng)絡(luò)安全官職責(zé)
- 資源稅改革對企業(yè)環(huán)境績效影響的實(shí)證研究
- 數(shù)字經(jīng)濟(jì)時代下電商助農(nóng)的發(fā)展趨勢與挑戰(zhàn)
- 青霉素過敏反應(yīng)的急救
- 2025-2030中國鋁業(yè)發(fā)展?fàn)顩r與投資戰(zhàn)略研究報(bào)告
- 2025年國家醫(yī)療器械抽檢品種檢驗(yàn)方案
- 防汛物資儲備定額編制規(guī)程(SL298-2024)
- 無人機(jī)培訓(xùn)創(chuàng)業(yè)計(jì)劃書-20250205-222450
- 輿情分析試題及答案
- 營運(yùn)車輛入股協(xié)議書
- 高中數(shù)學(xué)專項(xiàng)提升計(jì)劃
- 2025年國家公務(wù)員考錄《申論》真題及參考答案(行政執(zhí)法卷)
- 企業(yè)數(shù)字化轉(zhuǎn)型與員工績效的關(guān)聯(lián)性分析報(bào)告
- 水工程概論課件
評論
0/150
提交評論