小程序開(kāi)發(fā)技術(shù)知識(shí)分享
百分百努力只為您十分滿意 | 咨詢熱線:17744477016(微信同號(hào))
百分百努力只為您十分滿意 | 咨詢熱線:17744477016(微信同號(hào))
多了一些 wx:if 這樣的屬性以及 {{ }} 這樣的表達(dá)式 在網(wǎng)頁(yè)的一般開(kāi)發(fā)流程中,我們通常會(huì)通過(guò) JS 操作 DOM (對(duì)應(yīng) HTML 的描述產(chǎn)生的樹(shù)),以引起界面的一些變化響應(yīng)用戶的行為。例如,用戶點(diǎn)擊某個(gè)按鈕的時(shí)候,JS 會(huì)記錄一些狀態(tài)到 JS 變量里邊,同時(shí)通過(guò) DOM API 操控 DOM 的屬性或者行為,進(jìn)而引起界面一些變化。當(dāng)項(xiàng)目越來(lái)越大的時(shí)候,你的代碼會(huì)充斥著非常多的界面交互邏輯和程序的各種狀態(tài)變量,顯然這不是一個(gè)很好的開(kāi)發(fā)模式,因此就有了 MVVM 的開(kāi)發(fā)模式(例如 React, Vue),提倡把渲染和邏輯分離。簡(jiǎn)單來(lái)說(shuō)就是不要再讓 JS 直接操控 DOM,JS只需要管理狀態(tài)即可,然后再通過(guò)一種模板語(yǔ)法來(lái)描述狀態(tài)和界面結(jié)構(gòu)的關(guān)系即可。 小程序的框架也是用到了這個(gè)思路,如果你需要把一個(gè) Hello World 的字符串顯示在界面上。 WXML 是這么寫(xiě) :
<text></text>
JS 只需要管理狀態(tài)即可:
this.setData({ msg: "Hello World" })
通過(guò) {{ }} 的語(yǔ)法把一個(gè)變量綁定到界面上,我們稱為數(shù)據(jù)綁定。僅僅通過(guò)數(shù)據(jù)綁定還不夠完整的描述狀態(tài)和界面的關(guān)系,還需要 if/else, for等控制能力,在小程序里邊,這些控制能力都用 wx: 開(kāi)頭的屬性來(lái)表達(dá)。 更詳細(xì)的文檔可以參考 WXML