uni-app 影视类小程序开发从零到一

uni-app 影视类小程序开发从零到一 | 开源项目分享

引言

在数字娱乐时代，移动设备已成为我们生活中不可或缺的一部分，尤其是对于电影爱好者而言，随时随地享受精彩影片成为一种日常需求。爱影家，一款基于 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