微信小程序——Mini Movie

项目概览

• 成品展示
• 如何使用
• 前端实现
• 后端实现

成品展示

本项目为Udacity微信小程序纳米学位课程项目。主要页面包括推荐电影页面、电影列表展示、电影详情、编辑影评、 影评列表，收藏影评页面等。

效果图

如何使用

由于项目并未正式上线，故在手机端需打开调试模式。使用者需将项目及配套资源下载到本地，将 data.sql 导入数据库然后进行使用。注意：该小程序暂不支持全面屏

前端实现

界面展示	功能介绍
入口界面	用户可通过单击 热门电影 进入 电影列表 界面 用户可通过单击 我的收藏 进入 收藏影评 界面
我的收藏	用户可通过单击收藏按钮，收藏/取消收藏相应的影评 用户可通过单击任意影评查看影评详情 用户可通过单击电影名，进入到相关电影的 评论界面
电影列表界面	用户可通过左右滑动，浏览全部电影及概览 用户可通过单击任意电影卡片下方的 电影详情，进入到相应 电影详情界面
电影详情界面	用户可在详情界面查看电影的详细信息（电影类别、评分及简介等） 用户可通过单击 播放图标，播放电影的预告片 用户可以通过单击 查看影评，进入 影评列表页面 用户可以通过单击 编辑影评，进入 编辑评论页面
编辑影评界面	用户可选择：语音评论 或者 文字评论，发表自己的影评 添加语音评论：用户通过按住 录音图片 开始录音，进度条提示剩余时间（最大录音时长1min），松开图标即可停止录音 添加文字评论：用户单击底部 转为文字评论，即可切换到文字评论界面，通过键盘输入即可编辑文字影评 预览评论及发表：用户单击底部 预览评论，即可查看正在编辑的影评，确认无误后即可 单击 发表评论 将评论发表，也可单击 重新编辑 再次编辑影评
影评列表界面	用户可查看全部影评，对于感兴趣的影评进行相关操作（收藏/取消收藏） 通过单击影评，用户可查看该影评的详情 当文字评论大于5条时，页面底部会出现 弹幕列表 按钮，用户单击后会将所有文字评论以弹幕的形式显示

后端实现

这一部分主要借助小程序提供的wafer2 SDK 实现对于数据库资源的请求访问，主要的数据表结构如下：

movies 电影资源

键名	key	类型
id	id	int(11) —— 自增键
电影名	title	varchar(255)
评分	score	varchar(255)
年份	year	varchar(255)
海报	image	varchar(255)
缩略图	thumbnail	varchar(255)
预告片	video	varchar(255)
电影类别	category	varchar(255)
简介	description	TEXT CHARACTER
创建时间	create_time	datetime —— 自动生成

movie_comment 影评资源

键名	key	类型
id	id	int(11) —— 自增键
用户	user	varchar(255)
用户名	username	varchar(255)
用户头像	useravatar	varchar(255)
用户评论	content	utf8mb4_unicode_ci
电影id	movie_id	int(11) —— 与 movies 表中的 id 关联
评论类别	type	varchar(255)
创建时间	create_time	datetime —— 自动生成

collect_comment 收藏评论资源

键名	key	类型
id	id	int(11) —— 自增键
用户	user	varchar(255)
评论id	comment_id	int(11) —— 与 movie_comment 中的 id 关联
创建时间	create_time	datetime —— 自动生成