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