HTML5App商业开发实战教程基于WeX5可视化开发平台电子资源 教学全套课件配套资源3-6 实战案例：记一笔.pptxVIP

实战案例：记账本App——记一笔H5 App开发功能实现制作记一笔表单实现新增、修改、删除账目数据新增数据的过程数据表数据组件新增数据newData录入数据保存数据saveData制作记一笔表单新建页面使用“标准页面”模板添加数据组件账目数据用于编辑账目信息，从list.w文件中复制账目类型数据用于类型下拉选择，使用data组件账目分类数据用于分类下拉选择，使用baasData组件制作记一笔表单添加展现组件使用controlGroup组件提供边距，使组件不会紧贴着屏幕边缘，如果不需要title，切换到源码页，直接删除使用labelSelect组件，作为类型和分类使用的下拉组件使用labelInput组件，作为日期、金额和备注的输入框设置数据绑定设置label组件，绑定字段名设置select组件，绑定accountData中的类型和分类字段，还要绑定typeData和classData作为下拉选项设置input组件，绑定accountData中的日期、金额和备注字段新增账目在账目列表页点击“新增”按钮，打开记一笔页添加新增账目按钮添加windowDialog组件打开记一笔页并传参数在记一笔页中，新增账目数据，用户编辑后，返回账目列表页新增记录将用户输入的数据返回账目列表页，关闭记一笔页在账目列表页中接收这条数据，保存到数据库接收数据保存数据编辑账目在账目列表页单击一条账目，打开记一笔页进行编辑在记一笔页中，用户编辑这条记录后，点“确定”按钮将这条记录传给账目列表页在账目列表页中接收这条数据，保存到数据库以上两步在新增账目中已经实现删除账目在账目列表页中，每条账目后有“删除”按钮删除按钮所在行的账目信息删除后立即保存到数据库总结页面跳转可以使用打开对话框的方式实现，页面跳转时可以传参对话框是可以返回数据的新增、删除、保存数据使用数据组件的相关方法实现