第9章 教育类：仿猿题库微信小程序

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