引言
在数字娱乐时代,移动设备已成为我们生活中不可或缺的一部分,尤其是对于电影爱好者而言,随时随地享受精彩影片成为一种日常需求。爱影家,一款基于 uni-app 开发的影视类小程序,正是为此而生。它不仅提供了丰富的影视推荐,还融入了个性化知乎日报等内容,是不错的学习练手素材,同时对电影爱好者来说可以关注电影动态,免费无任何广告,分享给有需要的小伙伴。
项目特点
爱影家小程序采用 uni-app 框架构建,兼容多平台,无论是 iOS、Android 还是 H5 页面,都能流畅运行。项目集成了 Vue.js 和 SCSS/SASS,使得前端开发更加高效,同时也利用了 uni-app 的丰富插件,实现了诸如电影详情、搜索、分类、评价、收藏等一系列核心功能。
后台接口采用golang+MongoDB实现。目前小程序接口使用的我部署好的腾讯云服务器服务,下载项目后即可直接体验和运行。
小程序开源地址:GitHub - yangyongzhen/imovie: 爱影家,影视类小程序完整源码
https://gitee.com/yyz116/imovie
后台golang接口服务开源地址:go-imovie: imovie电影小程序的后台接口服务。golang语言+mongoDB实现。详细介绍《uniapp小程序开发 | 从零实现一款影视类app》:https://blog.csdn.net/yyz_1987/article/details/139454984
首页效果
功能概览
首页:展示最新、最热门的电影资讯,轮播图呈现精选影片预告。
电影详情页:详尽的电影信息,包括剧情简介、演员阵容、幕后花絮等。
电影搜索页:快速查找感兴趣的电影,支持关键词匹配。
电影分类页:按类型、地区、年代等维度筛选电影。
电影评价页:用户可以发表对电影的看法,参与社区讨论。
电影收藏页:保存喜欢的电影,方便日后观看。
个人中心页:管理个人信息,查看观影历史和收藏列表。
电影评论页:查看电影的口碑,评分和评论等内容。
知乎日报列表页:仿知乎日报实现每日日报。
知乎日报详情页:展示每日日报的详情。
滑动操作与表单提交:优化交互体验,简化用户操作流程。
开发与运行
下载项目:从 GitHub 或 Gitee 下载项目源码,解压至本地。导入 HBuilder X:将项目文件夹导入到 HBuilder X 开发环境中。
运行项目:一键启动,即可在模拟器或真机上体验爱影家小程序,默认连接个人后台golang服务接口,你可可以根据接口协议实现自己的后台服务。
项目效果截图
[首页]https://gitee.com/yyz116/imovie/raw/master/doc/home.png
[电影详情页]https://gitee.com/yyz116/imovie/raw/master/doc/detail.png
[电影搜索页]https://gitee.com/yyz116/imovie/raw/master/doc/search.png
[电影更多页]https://gitee.com/yyz116/imovie/raw/master/doc/more.png
[电影评论页]https://gitee.com/yyz116/imovie/raw/master/doc/comment.png
[个人中心页]https://gitee.com/yyz116/imovie/raw/master/doc/mine.png
[知乎日报列表页]https://gitee.com/yyz116/imovie/raw/master/doc/zhihudaily.png
[知乎日报详情页]https://gitee.com/yyz116/imovie/raw/master/doc/zhihudailynews.png
项目源码结构
├─api // 后台接口
├─common // 公共组件
├─components // 业务组件
├─doc // 项目文档
├─mock // mock数据
│ └─better-mock
├─pages // 页面
│ ├─about // 关于页面
│ └─tabBar // 底部导航
│ ├─index // 首页
│ │ ├─detail // 电影详情页
│ │ ├─moreMovie // 电影详情
│ │ └─search // 电影搜索
│ ├─list
│ │ └─detail // 电影列表
│ └─mine
│ ├─report // 用户反馈
│ ├─xieyi // 用户协议
│ └─yinsi // 隐私协议
├─static // 静态资源
│ ├─hot
│ ├─swiper
│ └─tabbar
├─uni_modules // uni-app插件
│ ├─uni-badge
│ │ └─components
│ │ └─uni-badge
│ └─uni-ui
│ └─components
│ └─uni-ui
└─utils // 工具类
使用到的一些后台api接口
- 轮播图接口:https://api.imovie.vip/api/v1/banner
- 电影列表接口:https://api.imovie.vip/api/v1/movie/list
- 电影详情接口:https://api.imovie.vip/api/v1/movie/detail
- 电影搜索接口:https://api.imovie.vip/api/v1/movie/search
- 电影分类接口:https://api.imovie.vip/api/v1/movie/category
- 电影评价接口:https://api.imovie.vip/api/v1/movie/comment
- 电影收藏接口:https://api.imovie.vip/api/v1/movie/collect
- 个人中心接口:https://api.imovie.vip/api/v1/user/info
- 电影评分接口:https://api.imovie.vip/api/v1/movie/score
- 电影评论接口:https://api.imovie.vip/api/v1/movie/comment
- 头部导航接口:https://api.imovie.vip/api/v1/nav
- 知乎日报列表接口:https://api.imovie.vip/api/v1/zhihudaily/list
- 知乎日报详情接口:https://api.imovie.vip/api/v1/zhihudaily/detail
- 滑动操作接口:https://api.imovie.vip/api/v1/slide
- 表单提交接口:https://api.imovie.vip/api/v1/report
其他资源
使用uni-app和Golang开发影音类小程序_uniapp音视频项目-CSDN博客
uni-app的uni-list列表组件高效使用举例 (仿知乎日报实现)-CSDN博客
uniapp小程序开发 | 从零实现一款影视类app (后台接口实现,go-zero微服务的使用)_uniapp影视app怎么开发-CSDN博客
Go-Zero 框架使用 MongoDB,数据采集入库如此简单_golang mongo库推荐-CSDN博客
https://github.com/shichunlei/-Api/blob/master/%E8%B1%86%E7%93%A3%E7%94%B5%E5%BD%B1.md#new_movies