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