物联网App开发基础 项目开发 实训项目7：小程序开发-项目开发.pptx

HTML5跨平台移动开发实训教程实训项目7 管理自己账务-记账本（一）学习路径（二）项目描述（三）项目技能（四）App开发（五）小程序开发（六）项目拓展（七）项目小结1、效果展示2、设计思路3、项目开发4、项目预览5、项目发布a创建小程序、数据集和数据，创建新页面 本项目小程序需要创建4个数据集存储账目信息、分类等数据，创建过程、引入项目与App开发一致，请参考图7-16至图7-27。点击“新建页面”，创建新的页面new和classSet，作为输入新账目信息页和分类信息页，请参考如图7-28、图7-29所示。创建小程序 b开发“我的记账本”主页 UI界面设计1b开发“我的记账本”主页 UI界面设计2b开发“我的记账本”主页 修改“导航栏标题”“我的记账本”主页需要引入accountData数据集，选择“数据”中创建成功的accountData数据集，单击鼠标左键，然后拖拽数据集到页面上“数据|服务”黄色区域即可，参考如图7-32所示。b开发“我的记账本”主页 放入“上中下布局”组件b开发“我的记账本”主页 放入“滚动列表”和绑定数据放入行列的页面结构在第2列加入“按钮”组件，可以删除当前账目信息。设置所在列的属性，使列的宽度（20%），并“垂直居中”。设置“按钮”组件属性，修改显示文字、图标、样式和点击事件，参考图7-41至图7-44 所示。b开发“我的记账本”主页 放入“文本”组件和数据绑定1b开发“我的记账本”主页 放入“文本”组件和数据绑定2b开发“我的记账本”主页 放入“文本”组件和数据绑定3b开发“我的记账本”主页 放入“按钮组”组件 设置“按钮（新建账目）”组件点击事件 c开发“新建账目”new页 UI界面设计c开发“新建账目”new页 UI界面设计c开发“新建账目”new页 “新建账目”new页需要引入创建的4个数据集，选择“数据”中创建成功的4个数据集，依次单击鼠标左键，然后拖拽数据集到页面上“数据|服务”黄色区域即可，设置accountData数据集自动模式为“自动新增”，参考图7-57、图7-58所示。在“上中下布局”组件的“内容区域”放入2个“标签+下拉”组件，展示账目信息的“类型”和“分类”，设置标签文本、绑定下拉数据和标签事件，参考图7-59至图7-62所示。 修改“导航栏标题”c开发“新建账目”new页 为了实现记录类型（type）改变，从而过滤分类（class）数据，需要设置accountClass的过滤条件，参考图7-63(a)至图7-63(c)所示。在 “标签+下拉”组件下方放入3个“标签+输入框”组件，展示账目信息的“日期”、“金额”和“备注”，设置标签文本和绑定数据，参考图7-64至图7-66所示。c开发“新建账目”new页 设置“按钮（保存）”组件点击事件 放入“按钮组”组件设置“按钮（返回）”组件点击事件c开发“新建账目”new页 设置“按钮（返回）”组件点击事件d开发“编辑账目”edit页 “编辑账目”UI界面设计1d开发“编辑账目”edit页 “编辑账目”UI界面设计2d开发“编辑账目”edit页 “编辑账目”edit页的页面布局和大部分功能与“新建账目”new页基本一致，可以复制“新建账目”new页修改页面信息为“编辑账目”edit页，参考图7-72(a)至图7-72(c)所示。在主页里，选择某行账目信息的账目所在列，设置此列的点击事件，可以打开“编辑账目”edit页面，对已有账目信息进行编辑，参考图7-73所示。在edit页里，选择accountData数据集，设置自动模式为“自动加载”，添加2个刷新后事件，参考图7-74、图7-75所示。e开发“分类设置”classSet页 “分类设置”UI界面设计1e开发“分类设置”classSet页 “分类设置”UI界面设计2e开发“分类设置”classSet页 修改“导航栏标题”放入“上中下布局”组件e开发“分类设置”classSet页 “分类设置”classSet页需要引入accountClass数据集和typeData数据集，选择“数据”中创建成功的accountClass数据集和typeData数据集，依次单击鼠标左键，然后拖拽数据集到页面上“数据|服务”黄色区域即可，参考图7-79所示。放入“滚动列表”组件和数据绑定e开发“分类设置”classSet页 设置“输入框”组件所在列属性为“垂直居中”放入“按钮（删除）”组件和设置所在列属性e开发“分类设置”classSet页 “按钮组”组件添加按钮e开发“分类设置”classSet页 设置“按钮组”组件