第5章-电影类：仿淘票票微信小程序

微信小程序开发全案精讲主讲人：小刚老师第5章电影类：仿淘票票微信小程序5.1需求描述及交互分析5.2设计思路和相关知识点5.3电影界面顶部页签切换效果设计5.4正在热映界面布局设计微信小程序开发全案精讲第5章电影类：仿淘票票微信小程序5.5即将上映界面布局设计5.6电影详情页设计5.7我的界面列表导航设计5.8登录设计微信小程序开发全案精讲

需求描述（1）电影顶部页签设计，分为正在热映、即将上映，单击页签会显示相应的内容；5.1需求描述及交互分析第5章电影类：仿淘票票微信小程序微信小程序开发全案精讲

需求描述（2）电影列表界面设计，显示电影海报、电影名称、电影类型、导演、主演、上映年份等等信息；5.1需求描述及交互分析第5章电影类：仿淘票票微信小程序微信小程序开发全案精讲

需求描述（3）单击电影列表信息，可以进入到电影详情页界面，查看电影的详细信息；5.1需求描述及交互分析第5章电影类：仿淘票票微信小程序微信小程序开发全案精讲

需求描述（4）我的界面设计，展示用户信息以及采用列表式导航设计我的界面导航信息；5.1需求描述及交互分析第5章电影类：仿淘票票微信小程序微信小程序开发全案精讲

需求描述（5）登录界面设计，输入用户名和密码进行登录，如果用户名和密码都正确，则允许登录到微信小程序里；5.1需求描述及交互分析第5章电影类：仿淘票票微信小程序微信小程序开发全案精讲

需求描述（5）分享功能设计，可以把电影列表界面分享给好友或者微信群；5.1需求描述及交互分析第5章电影类：仿淘票票微信小程序微信小程序开发全案精讲

交互分析（1）底部标签导航有电影、我的，单击不同底部标签导航显示对应的界面内容；（2）在电影界面里，顶部有两个页签：正在热映、即将上映，单击页签会显示相应的电影列表内容；（3）在电影界面里，单击电影列表信息，可以跳转到电影详情界面，查看电影详细信息；（4）在电影界面里，单击分享按钮，可以把电影列表界面分享给微信好友或者微信群里；（5）在我的界面里，展示用户信息以及采用列表式导航展示用户相关信息；（6）在我的界面里，如果用户未登录，单击用户图标，跳转到登录界面进行登录；5.1需求描述及交互分析第5章电影类：仿淘票票微信小程序微信小程序开发全案精讲

设计思路（1）设计底部标签导航，准备好底部标签导航的图标和建立相应的两个页面；（2）设计首页的幻灯片轮播效果，需要准备好要轮播的图片，同时借助于swiper滑块视图容器组件完成幻灯片轮播效果；（3）设计顶部页签切换效果，需要借助于swiper滑块视图容器组件，动态切换不同页签对应的内容；（4）展示电影列表信息，需要使用wx.request(OBJECT)发起网络请求获取电影列表信息，动态展示到电影界面里；（5）界面分享功能，需要使用onShareAppMessage函数进行界面的分享；（6）将用户信息保存到本地，需要借助于wx.setStorage这个API将用户数据信息异步保存到本地；（7）获取本地用户信息，需要使用wx.getStorage这个API从本地异步获取用户信息；（8）电影、影院、我的界面布局设计，需要使用view、image等组件，电影详情界面的立即购票按钮固定在底部设计需要使用position:fixed属性；5.2设计思路及相关知识点第5章电影类：仿淘票票微信小程序微信小程序开发全案精讲

相关知识点（1）swiper滑块视图容器组件，可以实现海报轮播效果动态展示以及页签内容切换效果；（2）wx.request(OBJECT)是用来发起的是HTTPS请求；（3）微信小程序支持页面分享功能，可以把指定页面分享给好友或者群，需要使用onShareAppMessage函数，设置该页面的分享信息；（4）wx.setStorage(OBJECT)将数据存储在本地缓存中指定的key中，会覆盖掉原来该key对应的内容，这是一个异步接口；（5）wx.getStorage(OBJECT)从本地缓存中异步获取指定key对应的内容，这是一个异步的接口；（6）input输入框组件，用来输入单行文本内容；5.2设计思路及相关知识点第5章电影类：仿淘票票微信小程序微信小程序开发全案精讲

电影界面顶部页签切换效果设计5.3电影界面顶部页签切换效果设计第5章电影类：仿淘票票微信小程序微信小程序开发全案精讲

正在热映界面布局设计5.4正在热映界面布局设计第5章电影类：仿淘票票微信小程序微信小程序开发全案精讲

即将上映界面布局设计5.5即将上映界面布局设计第5章电影类：仿淘票票微信小程序微信小程序开发全案精讲

电影详情页设计5.6电影详情页设计第5章电影类：仿淘票票微信小程序微信小程序开发全案精讲我的界面列表导航设计5.7我的界面列表导航设计第5章电影类：仿淘票票微信小程序微信小程序开发全案精讲登录设计5.8登录设计第5章电影类：仿淘票票微信小程序微