[移动开发] 微信小程序仿陶票票课程设计

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> 移动开发 -> 微信小程序仿陶票票课程设计 -> 正文阅读

[移动开发]微信小程序仿陶票票课程设计

说明

课程设计的代码:github源码地址
课程设计报告word版本地址:课程设计报告地址
本次课程设计没有使用微信小程序的任何框架,使用的原生的三件套完成,也没有使用微信云开发

注意,程序下载之后要在微信小程序中配置两个地址,如下图所示
一个是:https://www.wjiangquan.top
一个是:https://m.douban.com

本项目正在持续更新中…

1 设计题目

淘票票小程序

2 开发环境及开发技术

硬件环境:处理器 Intel? Core? i5-5350U CPU @ 1.80GHz 1.80 GHz 机带 RAM 8.00 GB 系统类型 64 位操作系统, 基于 x64 的处理器.服务器使用的是阿里云服务器开发技术:前端使用 html,css,javascipt,微信小程序官方 api,后端接口使用 javaweb, 数据库使用的 mysql5.5,容器使用的 tomcat8.5。本项目主要以微信小程序界面的书写,js 逻辑部分为主

3 需求分析

首先在首页右顶部显示正热播和即将播放按钮,左边有一个按钮点击之后可以选择不同的城市。默认选择的是正在热播,在该界面会展示最近几天正在播放的电影,并且在列表中显示关键的信息。列表分成三部分,左侧显示电影的图片,中间显示电影的标题,电影的标题, 电影的导演,主演,根据综合情况,显示今日最热和一周最热,列表的右侧显示购票按钮,点金之后进入到购票页面。点击即将播放按钮之后出现后面播放的电影。点击正在热播按钮之后进入到电影的详情页面,在该界面的顶部播放该电影的广告片段, 只要用户不离开该界面就循环播放改片段.在电影的下面显示改点影的一些关键信息,如播放时长,播放的具体时间等我.再该部分的下面可以显示评分的关键信息,如评价人数,评价的等级等。再接下来就是显示三个按钮,简介,影评以及更多按钮,在简介部分有电影的详细信息,演职人员列表,演职列表展示演员的图片,以及剧组的剧照等。在最底部显示票房的一些关键数据,如今日票房排名,首周票房,累计票房以及票房详情.在影评部分显示观众热评, 在更多部分存放的官方二维码。在每个界面向下划一定的距离之后都会出现回到顶部按钮。在影院界面显示一些影院的信息,在顶部有选择城市,筛选,综合排序,以及搜索按钮,可以对于价格,距离进行排序。在发现界面可以看到一些关于电影的界面,这个关于用于的情况进行推荐,点击每一项之后展示影评的详细信息,并且在底部会展示评价内容.在顶部有发送评论的功能,用户点击之后跳转到评论界面,发送评之后跳转回来,并且发送的评论的评论将展示在最前面,对于每一条评论的信息都会展示发布的信息。

4 系统总体设计

4.1 系统的总体功能结构描述

如下图 4-1 为陶票票小程序的总体思维导图,总共有八个界面,分别为首页,影院,发现, 我的,点击正在热映电影列表部分之后进行到电影详情界面,点击列表中的购买按钮之后进入到购买详情界面,点击发现详情界面之后进入到发现详情界面。点击详情界面底部的发送消息按钮之后进入到发送消息界面。下面的思维导图展示页面之间的相互关系。
在这里插入图片描述

4.2 影片页面详情的功能描述

点击首页的电影列表部分之后进入到详情界面,详情界面的功能如下图 4-2 所示
在这里插入图片描述

4.3 发现详情的功能描述

在这里插入图片描述

4.4 购买详情界面的功能描述

点击首页中的购买按钮之后进入到购买你详情界面,如图 4-4 所示。
在这里插入图片描述

5 详细设计

5.1 首页的详细设计

首页的样式的布局如图 5-2。
在这里插入图片描述
如上图页面的布局分为四个部分,分别为顶部的导航栏,中间的轮播图,静态列表,以及最下面的动态列表部分,页面的布局主要用是 flex 布局,后面的界面大多用的是 flex 布局, 将不再做说明。wxml 代码结构如下图 5-3 所示所示
在这里插入图片描述
由于样式代码过多,对于一些重复的,常见的将不做详细说明,对于之前不是很熟悉的, 单独说明。为了后期更换主机的时候避免大量改动js中的代码,将主机定义在app.js中,如下所示, 在本项目中使用到三个主机地址,baseURL1 为本地测试主机地址;baseURL2 为本地的最终上线地址,baseURL3 为豆瓣官方地址,用于首页和电影详情页面数据的动态渲染。

在这里插入图片描述
下面的代码用于获取首页数据的后端接口的代码,首页在页面加载的时候通过 wx.request 向后端发送请求,请求成功的话,将数据通过 setData 存放在 homeList 数组中

下面列举部分 wxml 代码,通过下面的方式对于数据进行动态渲染。
在这里插入图片描述
本页面的主要难点部分在于在于正在热映和即将上映之间的切换,下面将详细说明该功能的实现代码。下面给出关键的 wxml 的代码以及 js 代码,为了避免篇幅过长就不列出 wxss 的代码,样式可以根据自己的喜好进行设置,在后文也尽可能少的列出 wxss 代码。wx:for 对于 js 中 data 中的数据进行渲染,wxml 中将出现并列的即将上映和正在上映 view 标签,同时将在页面中进行渲染数据。在 js 中 data 初始数组中的 select 中默认为 true 和 false,这个时候展示的是正在热映的内容。当点击正在热映或者即将上映按钮的时候将触发 navClick 函数,这个时候通过 e.currentTarget.dataset.index 获取在自定义的属性 data-index 中的数据 index(index 的值由于 wx:for 的存在将默认从 0 开始增加)来确定点击的是正在上映还是即将上映,然后改变 select 中的 true 和 false 的顺序,然后通过 select[index]?’select’:’’给点击的那一个设置样式。并且通过 wx:if 来隐藏未被点击的,显示点击的那一项。
在这里插入图片描述

5.2 电影详情页面的详细设计

当点击首页中的电影列表部分的时候,将跳转到电影详情页面。电影详情页面的样式布局如图 5-6 所示。
在这里插入图片描述
如上图所示,该界面大体上主要分为 5 个部分,第一部分展示宣传视频部分,第二部分展示该电影的列表信息,第三部分展示电影的评分信息,第四部分展示导航列表,最后一部分展示导航列表对应的内容部分。
本节讲解的的第一个点为从首页点击之后进入到详情页面,如何保证进入到所点击的列表项所对应的详情内容。
如下为首页关键的 wxml 代码,为了避免内容过于冗余,这里仅列出了关键的代码,当点击某一项的时候,通过自定义属性 data-id 获取所点击的列表项的后端传过来的 id 如图 5-9 所示。并将 id 传到电影详情页面如图 5-10 所示。如何 5-11,电影详情页面通过传过来的 id 向后端发送请求,获取对应页面的数据。如图 5-11 是电影详情页面的部分接口数据
在这里插入图片描述

如上图 5-11 所示,在电影详情页面中的下方点击简介,影评所对应的请求函数。回到顶部的代码如下所示。如图 5-13 为 wxml 的代码。