微信小程序开发项目实战（微课版）课件 3-2 课件-“天天打卡”布局设计 .pptx

项目三小程序常用组件Punchineverydaylayoutdesign任务二“天天打卡”布局设计

如果需要每天打卡，统计要卡数据，那么打卡小程序肯定是最佳选择，本任务配套源代码中提供了完整的天天打卡小程序案例。从图来看，天天打卡小程序的页面可以分成上下两个区域，上面区域用于实现打卡信息的填写，包括用户昵称、打卡名称、打卡地点以及打卡时间。下面区域以标签的形式列出打卡记录。方便用户查看打卡记录。项目三小程序常用组件任务描述

页面基本结构分析了天天打卡小程序并学习了Flex布局，接下来编写天天打卡小程序的基础页面结构和样式，打开pages/card/card.wxml文件编写页面结构代码。!--?昵称、打卡名称?--view?class=card?mt20/view!--?打卡地点?--view?class=card?mt20/view?!--?打卡时间：时间选择器、重复日期?--view?class=card?mt20/view!--?新建按钮?--view?class=create/view!--?打卡标签?--view?class=list?/view

案例初始化在chapter03项目中创建一个名为card的空白页面，打开app.json文件，创建新页面的代码如下所示。{??pages:[?pages/card/card]}打开pages/card/card.json文件中编写页面配置代码，设置具体如下。{??navigationBarTitleText:?天天打卡,??navigationBarBackgroundColor:?#15a8e2}

感谢观看THANK