• 演示如何将变量与组件绑定
  • 新建一个通讯录列表变量，编辑列表格式，录入测试数据，将变量绑定到表格组件
  • 新建一个联系人变量，将变量各字段绑定到弹窗中各个输入框，点击保存按钮后将新录入的联系人追加至通讯录列表变量
  • 变量与组件绑定后，变量内容改变后会将值传递给组件/组件负责展示给用户。如果是数据感知组件，用户操作（如键盘输入）后会修改变量内容
  • 点击“首页”，点击“变量”栏
  • 点击“页面内部变量”右侧的“+”加号按钮新增变量
  • 在此创建的变量只属于当前选中的页面
    • 图1
  • 输入变量名称
  • 变量类型选择“列表”
  • 点击类型右侧的“编辑结构”
    • 图2
  • 点击“增加字段”
    • 图3
  • 输入字段名称：姓名
  • 选择字段类型：字符
  • 点击“保存”按钮
    • 图4
  • 重复图3/图4，依次增加“电话”/“邮箱”/“地址”等几个字段
  • 点击“确定”按钮保存变量结构
    • 图5
  • 编辑好结构后“内容”右侧出现列表内容表格
  • 点击内容表格空白行右侧的“编辑”按钮
    • 图6
  • 录入测试数据，点击“确定”按钮
    • 图7
  • 继续点击内容表格空白行右侧的“编辑”按钮
    • 图8
  • 测试数据如下，内容及数量可随意填写
    • 图9
  • 选中“表格”组件，点击“数据与交互”栏，点击“编辑表格数据”按钮
    • 图10
  • 将“通讯录列表”变量绑定到表格组件
  • 选择本页变量，选择“通讯录列表”变量
  • 选择好变量后下面出现编辑面板和表格预览
  • 点击“保存”按钮
    • 图11
  • 组件中展示出测试数据，修改表格的高度，改为“300px”（方便后续演示新增功能）
    • 图12
  • 参考“图1”创建一个联系人变量
  • 变量类型选择“对象”，点击右侧“编辑结构”按钮
    • 图13
  • 参考通讯录列表结构，联系人结构如下图，点击“确定”按钮保存
    • 图14
  • 编辑完结构后，内容出可根据格式编辑测试数据，可留空，点击“确定”按钮保存
    • 图15
  • 将“联系人”变量各字段与弹窗中各输入框绑定
  • 选中弹窗中姓名输入框，点击“数据与交互”栏
  • 点击“绑定数据”-“内容”右侧的曲别针图标
    • 图16
  • 点击“本页变量”，点击“联系人”变量，点击“姓名”字段，点击“确定”按钮保存
    • 图17
  • 重复图16/图17，依次绑定电话/邮箱/地址组件与字段
  • 为“保存”按钮新增“编辑脚本”点击事件
    • 图18
  • 脚本为流程图，新脚本只有“开始”和“结束”两个节点
  • 点击“开始”节点，随后点击下面的“+”加号按钮，为这个节点增加一个下一步节点
    • 图19
  • 选择“修改变量”节点
    • 图20
  • 要修改的变量选择“通讯录列表”
    • 图21
  • 操作方式选择“追加”
  • 要追加的内容选择“联系人”变量
    • 图22
  • 为“修改变量”节点增加一个下一步节点
    • 图23
  • 增加“隐藏/显示组件”节点
  • 动作为隐藏“编辑通讯录”弹窗，参考上一篇“编辑界面”/“图22”
    • 图24
  • 点击“返回”按钮回到界面编辑器
    • 图25
  • 点击“在新窗口中预览”看效果，别忘了点击界面编辑器右下角的“保存”按钮
    • 图26
  • 这里是用户看到的效果
  • 点击新增按钮
    • 图27
  • 录入一些内容，点击“保存”按钮
    • 图28
  • 输入的内容出现在表格中，至此界面基本操作/变量及绑定的基本操作ok，下一节演示修改/删除通讯录，演示如何暂存数据
    • 图29