任亞飛
數(shù)據(jù)綁定:WXML(WeiXin MarkupLanguage)是框架設(shè)計的一套標(biāo)簽語言,結(jié)合基礎(chǔ)組件、事件系統(tǒng),可以構(gòu)建出頁面的結(jié)構(gòu)。
通過這個簡單的例子來看看 WXML 具有什么能力:
App.json 里面新建頁面shuju。打開Pages 里的shuju 頁面的標(biāo)簽語言--wxml,寫入view 組件,用兩個大括號包裹字符串屬性message(名稱)。
<!-- 新建頁面shuju 里面的wxml-->
打開標(biāo)簽語言--js, 刪除data 里面的函數(shù),保留data,寫入字符串屬性message( 名稱) 冒號, 單引號屬性值Hello MINA。編譯保存查看模擬器效果。
// 新建頁面shuju 里的.js
Page({
data: {message: 'Hello MINA!' }
})
接著我們再看數(shù)字屬性和布爾屬性。
(參考代碼1,請至壹零社公眾號下載)
里面有數(shù)字類型:num:10000, 年齡:age18, 身高h(yuǎn)eigh:168, 體重:weight98,布爾類型:isgirl:true,字符串類型:name:" 美女"。
組件checkbox——復(fù)選框(多選項目)有以下屬性項:
1.value string 默認(rèn)否 checkbox標(biāo)識, 選中時觸發(fā)checkbox-group的 change 事件, 并攜帶 checkbox 的value
2.disabled boolean 默認(rèn)false否 是否禁用
3.checked boolean 默認(rèn)false否 當(dāng)前是否選中,可用來設(shè)置默認(rèn)選中
4.color string #09BB07 默認(rèn) 否checkbox 的顏色,同css的color
參考代碼如下(用wxml 組件包裹了checkbox,文本標(biāo)題為:選中):
<!-- 新建頁面/shuju/shuju. checkbox( 復(fù)選框)wxml-->
// 新建頁面shuju 里的.js
checkbox:true
保存編譯后查看模擬器效果。數(shù)據(jù)綁定參考圖1(紅色框為新建頁面shuju)。
運(yùn)算,可以在花括號(也就是兩個大括號)中加入一些簡單的運(yùn)算,如表達(dá)式和語句型,表達(dá)式指的是一些簡單運(yùn)算和數(shù)字運(yùn)算,如數(shù)字的加減,字符串拼接,三元表達(dá)式等運(yùn)算。語句指的是:帶有條件的邏輯運(yùn)算,如 if- else 語句;switch 語句; dowhile 語句; for 等語句。
<!-- 新建頁面/yunsuan/.wxml. 數(shù)字運(yùn)算-->
<!-- 新建頁面/yunsuan/.wxml. 字符串拼接-->
<!-- 新建頁面/yunsuan/.wxml. 三元表達(dá)式-->
App.json 里面新建頁面yunsuan。打開Pages 里的shuju 頁面的標(biāo)簽語言--wxml, 寫入view 組件, 用兩個大括號包裹運(yùn)算表達(dá)式“1+1”,保存編譯后模擬器上查看輸出結(jié)果;字符串拼接,大家注意,加上雙引號的就是字符串,比如兩大括號里加的"1"+"1" 表達(dá)式就是兩個字符串拼接,大家參考上面字符串拼接代碼編寫完成后保存編譯,在模擬器上查看輸出結(jié)果,字符串拼接"1"+"1" 其實(shí)就是把兩個1 組合起來--11;三元表達(dá)式,這里用了10 除以2的余數(shù)等于0 輸出偶數(shù),不等于0 輸出奇數(shù),大家可以參考上面三元表達(dá)式的代碼寫后保存編譯,查看模擬器結(jié)果,然后把10 除以2 改成11 除以2 保存編譯后查看模擬器又會輸出什么結(jié)果。
在組件上使用 wx:for 控制屬性綁定一個數(shù)組,即可使用數(shù)組中各項的數(shù)據(jù)重復(fù)渲染該組件。
數(shù)組的當(dāng)前項的下標(biāo)變量名默認(rèn)為index,數(shù)組當(dāng)前項的變量名默認(rèn)為item。
(參考代碼2,請至壹零社公眾號下載)
注:Wx:for=“{{ 數(shù)組或者對象的名稱}}”;wx:for-item=“ 循環(huán)項的名稱”(軟件默認(rèn)項名稱為item);wx:for-index=“ 循環(huán)項的索引”。在新建頁面yunsuan.js 里data 寫入數(shù)組list-- 中括號,大括號id:1 第一項, 名字name:“電腦報”,每項寫完后不要忘了英文狀態(tài)下的逗號,依次寫到第三項。在新建頁面/yunsuan/.wxml 里面,用一個view 組件包裹另一個組件。在另一個view 組件里寫入wx:for="{{list}}" ( 循環(huán)數(shù)組名字);wx:for-item="item"( 循環(huán)項的名稱);wx:for-index="index"( 循環(huán)項的索引),寫入組件屬性“索引”:花括號index(索引的項),“值”:花括號item.name(索引每項name 的東西)(圖2)。
wx:key="id":如果列表中項目的位置會動態(tài)改變或者有新的項目添加到列表中,并且希望列表中的項目保持自己的特征和狀態(tài)(如 input 中的輸入內(nèi)容,switch 的選中狀態(tài)),需要使用wx:key 來指定列表中項目的唯一的標(biāo)識符。
wx:key 的值以兩種形式提供
字符串, 代表在 for 循環(huán)的array 中 item的某個 property, 該property的值需要是列表中唯一的字符串或數(shù)字,且不能動態(tài)改變。
保留關(guān)鍵字 *this 代表在 for 循環(huán)中的 item 本身,這種表示需要 item本身是一個唯一的字符串或者數(shù)字。
當(dāng)數(shù)據(jù)改變觸發(fā)渲染層重新渲染的時候,會校正帶有 key的組件,框架會確保它們被重新排序,而不是重新創(chuàng)建,以確保使組件保持自身的狀態(tài),并且提高列表渲染時的效率。
如不提供 wx:key, 會報一個warning, 如果明確知道該列表是靜態(tài),或者不必關(guān)注其順序,可以選擇忽略。
(參考代碼3,請至壹零社公眾號下載)
以上代碼涉及數(shù)組、函數(shù)、嵌套循環(huán),讀者們可以試著去操作寫代碼,發(fā)現(xiàn)數(shù)組和函數(shù)與wxml 里的屬性綁定,使用數(shù)組與函數(shù)中各項的數(shù)據(jù)重復(fù)渲染該組件。要知道數(shù)組的當(dāng)前項的下標(biāo)變量名默認(rèn)為 index,數(shù)組當(dāng)前項的變量名默認(rèn)為item。到這里小程序開發(fā)四就結(jié)束了,希望讀者們多多練習(xí)多多寫,這樣有助于對代碼的理解和對結(jié)構(gòu)的熟悉,尤其語法是多聯(lián)系記憶加深更強(qiáng)。