淘票票小程序

影片模块

页面最顶部设置 ”正在热映“ 和 ”即将上映“ 的页签，点击页签显示不同影视列表。

正在热映

页签底部设计一组轮播图。

轮播图下方设计影片列表。

影片列表中显示影片海报、影片名称、导演、主演及上映时间等信息。

点击列表可进入该影片的详细信息页。

即将上映

页签底部设计星推荐影片列表，横线滚动显示。

星推荐列表中包括影片名称以及影片的上映时间。

星推荐底部设计影片列表，该列表与正在热映的列表相同。

影片详情页

详情页共有影片信息、影片标签、影片热评三处信息展示区。

影片信息中包括影片名称、影片时长、上映时间、类型、导演及主演。

影片标签中显示该影片对应的标签列表，将该列表渲染到页面中。

影片热评中显示群众对该影片的评论，在这一区块中显示用户头像，用户昵称，评论时间及评论内容。

个人中心模块

在本模块中，首页负责显示用户登录状态、活动选项卡及各功能入口列表。

登录状态

根据用户是否授权显示头像及昵称。

未授权时，显示默认头像；文本显示 ”点击登录“。点击 ”点击登录“ 按钮，弹出授权窗口获取用户信息。成功获取信息后，将信息存入项目缓存中，下次进入小程序时，判断缓存中是否存在用户数据。

已授权时，显示用户头像及昵称。

功能选项卡

水平分布

选项列表包括：电影票、演出票、优惠卷、影城卡。

自行设计数据结构，图标自取。

功能入口列表

列表左侧显示入口名称、右侧显示进入入口的指向图标。

自信设计数据结构。

电影模块

首页（电影列表页）

在页面初始数据中设计导航数组和导航选择类数组。

使用 flex 布局，将导航数组渲染到页面中。

水平排布页签，每个页签宽度占总宽度的 50%。

设计标签选中时样式：字体颜色与下边框颜色均为 #fb4e64。

给标签添加单击事件，单击标签时将标签对应的数组下标传入事件内部。

单击事件中接收数据，根据数据改变导航选择类数组。

根据导航选择类数组控制页签的选中 or 未选中。以及页面的显示内容。

正在上映页签

轮播图

在初始化数据中设计轮播图路径数组。

使用 swiper 组件和 swiper-item 组件设计图片的轮播效果。

影片列表

页面加载时，请求网络接口，获取影片列表数据。

将请求的数据存入页面初始化数据中。

使用 wx:for 语句将列表数据渲染到页面中。

在列表中启用 flex 布局，将列表横向分为图片（image）、信息（info）、按钮（button）三个区域。

图片区域：显示影片海报。

信息区域：显示影片名称、导演、主演、上映时间等信息。

按钮区域：显示购票按钮。

给列表绑定单击事件，单击列表后调转到列表详情页，并将被单击的影片 id 传到详情页中。

即将上映

星推荐

页面加载时，请求网络接口，获取星推荐影片列表。

将请求的数据存入页面初始化数据中。

设计星推荐标题

文本内容

字体颜色

左边框大小及颜色

标题内外边距

利用 scroll-view 组件设置横向滚动列表效果。

将数据渲染到列表中。

影片列表：同正在上映页签中的页签列表

影片详情页

页面加载时接收首页传递过来的参数，参数为某影片的影片 id

根据这个 id 发起网络请求，请求该影片的详细数据、标签数据以及热评数据。

页面中分为详细信息、标签信息、热评信息三个区块。

详细信息

利用 flex 布局将影片详细信息以图文并茂的形式渲染到页面中。

数据包括：影片名、影片时长、上映事件、类型、导演、主演列表。

其中，主演列表中利用 scroll-view 组件设置横向滚动列表效果，并将演员头像及姓名显示到列表中。

标签信息

将页面加载时请求的标签数据渲染到页面中。

设置每个标签的内边距及背景色，使其美观一些。

设置每个标签的外边距，使标签与标签之间存在间隔。

热评信息

将页面加载时请求的热评数据渲染到页面中。

数据中包括热评内容，热评时间以及热评的用户信息。

利用 flex 布局，用户信息及热评信息展示出来。

个人中心模块

对于个人中心模块来说，仅有首页一个页面。在这个页面中包括登录、活动、功能入口三大区块。

登录区块

页面加载时查看缓存数据，若缓存中有相关用户数据，说明该用户以对小程序授权，把用户信息渲染到登录区块中，其中包括用户头像及用户昵称。

若缓存中无任何数据，则表示该用户为对小程序赋予公开信息的权限，此时登录区块显示默认状态。

默认状态点击 “点击登录” 按钮，页面中会弹出授权窗口，引导用户授权，授权后将用户数据存入缓存中。

活动区块

在页面初始化数据中添加数据，数据结构在下方对应模块中详细展示。

将数据以列表的形式渲染到页面中。

在页面中，启用 flex 布局，将列表横向渲染到页面中。

每个列表项包括活动图标及活动名称。

功能入口区块

在页面初始化数据中添加数据，数据结构在下方对应模块中详细展示。

将数据以列表的形式渲染到页面中。

在页面中，启用 flex 布局，将入口名称及指向图标并排显示，且两端对齐。

淘票票小程序.zip