WeX5 開(kāi)發(fā)App
1、新建應(yīng)用
新建一個(gè)應(yīng)用hello，
2、新建頁(yè)面
在“新建W向?qū)А敝羞x擇模板“移動(dòng)→標(biāo)準(zhǔn)→空白”，文件名輸入index。在頁(yè)面中將放入數(shù)據(jù)組件和展現(xiàn)組件，如圖1-22。
圖1-22 Hello World App頁(yè)面構(gòu)成
3、添加數(shù)據(jù)組件
在model組件中放data組件，data組件中的數(shù)據(jù)是一個(gè)行列結(jié)構(gòu)的二維表。首選需要定義列，然后增加行。
定義列的步驟是：選擇data組件，右擊，在彈出的快捷菜單中選擇“編輯列”命令，打開(kāi)“data列編輯”對(duì)話框。新增name列，并設(shè)置為ID列。
增加行的步驟是：選擇data組件，右擊，在彈出的快捷菜單中選擇“編輯數(shù)據(jù)”命令，打開(kāi)“data數(shù)據(jù)編輯”對(duì)話框。新增一行。注意：在新增的行上單擊一下，再單擊“完成”按鈕。
data組件屬性值設(shè)置見(jiàn)表1-4。
表1-4 Hello World頁(yè)數(shù)據(jù)組件屬性說(shuō)明
組件 | 父組件 | 屬性 | 屬性值 | 說(shuō)明 |
data | model | autoLoad | true | 自動(dòng)加載數(shù)據(jù) |
autoNew | false | 不自動(dòng)新增數(shù)據(jù) |
4、添加展現(xiàn)組件
在window組件下放“表單”分類下面的input組件和output組件。界面設(shè)計(jì)如圖1-23.
圖1-23 Hello World App界面設(shè)計(jì)
（1）設(shè)置input組件的屬性以實(shí)現(xiàn)雙向數(shù)據(jù)綁定
將input組件和data組件的name列進(jìn)行雙向數(shù)據(jù)綁定，input中的內(nèi)容改變了，name列中的數(shù)據(jù)隨之改變，name列中的數(shù)據(jù)改變了，input中的內(nèi)容也會(huì)隨之改變。通過(guò)使用數(shù)據(jù)組件的ref方法實(shí)現(xiàn)雙向數(shù)據(jù)綁定，即設(shè)置input組件的bind-ref屬性為$model.data1.ref("name")。表示input組件和data1組件當(dāng)前行的name列雙向綁定。
（2）設(shè)置output組件的屬性以實(shí)現(xiàn)單向數(shù)據(jù)綁定
將output組件和data組件的name列進(jìn)行單向數(shù)據(jù)綁定，name列中的數(shù)據(jù)改變了，output中的內(nèi)容會(huì)隨之改變。通過(guò)使用數(shù)據(jù)組件的val方法實(shí)現(xiàn)單向數(shù)據(jù)綁定$model.data1.val("name")，單向數(shù)據(jù)綁定時(shí)，可以設(shè)置表達(dá)式，對(duì)數(shù)據(jù)進(jìn)行加工。例如：設(shè)置output組件的bind-text屬性為'Hello'+$model.data1.val("name")。表示取data1組件當(dāng)前行name列的值，和Hello '字符串拼接在一起。
表1-5列出了input組件和output組件屬性的設(shè)置方法。
組件 | 父組件 | 屬性 | 值 | 說(shuō)明 |
input | window | bind-ref | $model.data1.ref("name") | 雙向綁定name列 |
output | window | bind-text | 'Hello '+$model.data1.val("name") | 單向綁定name列 |
5、運(yùn)行調(diào)試
更多建議：