免费AI编程助手
WeX5 开发App
1、新建应用
新建一个应用hello，
2、新建页面
在“新建W向导”中选择模板“移动→标准→空白”，文件名输入index。在页面中将放入数据组件和展现组件，如图1-22。
图1-22 Hello World App页面构成
3、添加数据组件
在model组件中放data组件，data组件中的数据是一个行列结构的二维表。首选需要定义列，然后增加行。
定义列的步骤是：选择data组件，右击，在弹出的快捷菜单中选择“编辑列”命令，打开“data列编辑”对话框。新增name列，并设置为ID列。
增加行的步骤是：选择data组件，右击，在弹出的快捷菜单中选择“编辑数据”命令，打开“data数据编辑”对话框。新增一行。注意：在新增的行上单击一下，再单击“完成”按钮。
data组件属性值设置见表1-4。
表1-4 Hello World页数据组件属性说明
组件 | 父组件 | 属性 | 属性值 | 说明 |
data | model | autoLoad | true | 自动加载数据 |
autoNew | false | 不自动新增数据 |
4、添加展现组件
在window组件下放“表单”分类下面的input组件和output组件。界面设计如图1-23.
图1-23 Hello World App界面设计
（1）设置input组件的属性以实现双向数据绑定
将input组件和data组件的name列进行双向数据绑定，input中的内容改变了，name列中的数据随之改变，name列中的数据改变了，input中的内容也会随之改变。通过使用数据组件的ref方法实现双向数据绑定，即设置input组件的bind-ref属性为$model.data1.ref("name")。表示input组件和data1组件当前行的name列双向绑定。
（2）设置output组件的属性以实现单向数据绑定
将output组件和data组件的name列进行单向数据绑定，name列中的数据改变了，output中的内容会随之改变。通过使用数据组件的val方法实现单向数据绑定$model.data1.val("name")，单向数据绑定时，可以设置表达式，对数据进行加工。例如：设置output组件的bind-text属性为'Hello'+$model.data1.val("name")。表示取data1组件当前行name列的值，和Hello '字符串拼接在一起。
表1-5列出了input组件和output组件属性的设置方法。
组件 | 父组件 | 属性 | 值 | 说明 |
input | window | bind-ref | $model.data1.ref("name") | 双向绑定name列 |
output | window | bind-text | 'Hello '+$model.data1.val("name") | 单向绑定name列 |
5、运行调试
更多建议：