资源描述:
《第9章--教育类:仿猿题库微信小程序》由会员上传分享,免费在线阅读,更多相关内容在行业资料-天天文库。
微信小程序开发全案精讲主讲人:小刚老师
1第9章教育类:仿猿题库微信小程序9.1需求描述及交互分析9.2设计思路和相关知识点9.3练习界面九宫格导航设计9.4科目设置界面设计微信小程序开发全案精讲
2第9章教育类:仿猿题库微信小程序9.5语文科目练习设计9.6练习题目设计9.7发现列表导航设计9.8排行榜设计微信小程序开发全案精讲
3第9章教育类:仿猿题库微信小程序9.9我界面列表导航设计微信小程序开发全案精讲
4需求描述(1)练习界面九宫格导航设计,点击更多导航会进入到全部科目设置界面;9.1需求描述及交互分析第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
5需求描述(2)在练习九宫格导航界面里,单击语文导航,会进入到语文同步练习和语文中考练习界面;9.1需求描述及交互分析第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
6需求描述(3)在中考练习界面,可以单击考点练习,进行语文题目的专项智能练习;9.1需求描述及交互分析第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
7需求描述(4)发现模块列表式导航设计以及排行榜设计,排行榜分为全校学霸、全省学霸、全省校霸;9.1需求描述及交互分析第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
8需求描述(5)我界面列表导航设计以及设置界面列表导航设计;9.1需求描述及交互分析第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
9交互分析(1)底部标签导航有练习、发现、我,单击不同底部标签导航显示对应的界面内容;(2)在练习界面里,有九宫格导航,单击更多导航进行全部科目的设置,单击语文导航可以进行语文科目的练习;(3)在发现模块里,采用列表式导航设计发现模块内容,单击排行榜列表导航,可以进入到排行榜界面,在排行榜界面里有全校学霸、全省学霸、全省校霸三个页签,可以相互的切换;(4)在我界面里,采用列表式导航设计我界面内容,同时可以单击设置导航进行学校、学习阶段、中考时间等等内容的设计;9.1需求描述及交互分析第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
10设计思路(1)设计底部标签导航,准备好底部标签导航的图标和建立相应的三个页面;(2)设计练习界面的九宫格导航,需要准备好要导航的图片,以及科目导航的数据;(3)全部科目设置采用科目导航的数据,设置两种状态,一种是在练习界面里显示出来,另一种是不显示出来,这样就可以根据自己的需求放置哪些科目在练习界面;(4)语文练习界面,分为同步练习和中考练习,需要使用swiper滑块视图容器组件,进行两个界面的切换显示;(5)在进行语文题目练习时,题目的切换显示需要使用swiper滑块视图容器组件,进行题目内容的切换显示;(6)发现、我的界面布局设计,需要使用view、image、swiper等组件,进行列表式导航设计;9.2设计思路及相关知识点第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
11相关知识点(1)swiper滑块视图容器组件,可以实现海报轮播效果动态展示以及页签内容切换效果;(2)wx.setStorageSync将数据存储在本地缓存中指定的key中,会覆盖掉原来该key对应的内容,这是一个同步接口;(3)wx.getStorageSync从本地缓存中同步获取指定key对应的内容;9.2设计思路及相关知识点第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
12练习界面九宫格导航设计9.3练习界面九宫格导航设计第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
13科目设置界面设计9.4科目设置界面设计第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
14语文科目练习设计9.5语文科目练习设计第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
15练习题目设计9.6练习题目设计第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
16发现列表导航设计9.7发现列表导航设计第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
17排行榜设计9.8排行榜设计第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
18我界面列表导航设计9.9我界面列表导航设计第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
19练习界面九宫格导航设计科目设置界面设计语文科目练习设计练习题目设计发现列表导航设计排行榜设计我界面列表导航设计总结第9章教育类:仿猿题库微信小程序微信小程序开发全案精讲
20谢谢观看