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

news2024/9/24 17:11:07

引言

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1937900.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

北京交通大学《深度学习》专业课,实验3卷积、空洞卷积、残差神经网络实验

一、实验要求 1. 二维卷积实验(平台课与专业课要求相同) ⚫ 手写二维卷积的实现,并在至少一个数据集上进行实验,从训练时间、预测精 度、Loss变化等角度分析实验结果(最好使用图表展示) ⚫ 使用torch.nn…

基于ffmepg的视频剪辑

1.ffmpeg命令实现视频剪辑 FFmpeg是一个非常强大的视频处理工具,可以用来剪辑视频。以下是一个基本的FFmpeg命令行示例,用于剪辑视频: $ ffmpeg -i ./最后一滴水.mp4 -ss 0:0:20 -t 50 -c copy output.mp4-i ./最后一滴水.mp4 输入文件  …

利用PyTorch进行模型量化

利用PyTorch进行模型量化 目录 利用PyTorch进行模型量化 一、模型量化概述 1.为什么需要模型量化? 2.模型量化的挑战 二、使用PyTorch进行模型量化 1.PyTorch的量化优势 2.准备工作 3.选择要量化的模型 4.量化前的准备工作 三、PyTorch的量化工具包 1.介…

Linux复习02

一、什么是操作系统 操作系统是一款做软硬件管理的软件! 一个好的操作系统,衡量的指标是:稳定、快、安全 操作系统的核心工作: 通过对下管理好软硬件资源的手段,达到对上提供良好的(稳定,快…

【MindSpore学习打卡】应用实践-LLM原理和实践-文本解码原理 —— 以MindNLP为例

在自然语言处理(NLP)领域,文本生成是一项重要且具有挑战性的任务。从对话系统到自动文本补全,文本生成技术无处不在。本文将深入探讨自回归语言模型的文本解码原理,使用MindNLP工具进行示例演示,并详细分析…

240719_图像二分类任务中图像像素值的转换-[0,255]-[0,1]

240719_图像二分类任务中图像像素值的转换-[0,255]-[0,1] 在做语义分割二分类任务时,有时下载到的数据集或者我们自己制作的数据集,标签像素值会是[0,255](或者含有一些杂乱像素),但在该类任务中,往往0代表…

androidkiller重编译apk失败的问题

androidkiller重编译apk失败 参考: https://blog.csdn.net/qq_38393271/article/details/127057187 https://blog.csdn.net/hkz0704/article/details/132855098 已解决:“apktool” W: invalid resource directory name:XXX\res navigation 关键是编译…

脑肿瘤有哪些分类? 哪些人会得脑肿瘤?

脑肿瘤,作为一类严重的脑部疾病,其分类复杂多样,主要分为原发性脑肿瘤和脑转移瘤两大类。原发性脑肿瘤起源于颅内组织,常见的有胶质瘤、脑膜瘤、生殖细胞瘤、颅内表皮样囊肿及鞍区肿瘤等。其中,胶质瘤作为最常见的脑神…

# Redis 入门到精通(九)-- 主从复制

Redis 入门到精通(九)-- 主从复制(1) 一、redis 主从复制 – 主从复制简介 1、互联网“三高”架构 高并发高性能高可用 2、你的“Redis”是否高可用? 1)单机 redis 的风险与问题 问题1.机器故障  现…

WeTest 海外本地化测试的全生命周期服务 第一期

伴随全球化和数字化的加速推进,越来越多的国内企业希望将其产品服务推向国际,以便在全球数字市场中占有一席之地。除去传统的欧美市场,国内企业也积极开拓东南亚、南亚、拉美、中东和非洲等新兴市场。这些地区的互联网普及率和数字化需求正在…

vue+watermark-dom实现页面水印效果

前言 页面水印大家应该都不陌生,它可以用于验证数字媒体的来源和完整性,还可以用于版权保护和信息识别,这些信息可以在不影响媒体质量的情况下嵌入,‌并在需要时进行提取。‌本文将通过 vue 结合 watermark-dom 库,教大…

《AIGC 实战宝典》(2024版) 正式发布!

2024 新年伊始,OpenAI 推出文生视频 Sora,风靡整个科技圈。 最近又发布了 ChatGPT-4o,这是一个全新模型,不仅能处理文本,还能实时理解和生成音频和图像。OpenAI 用实际行动给全世界的科技公司又上了一课。 如何从0到1…

零基础STM32单片机编程入门(十五) DHT11温湿度传感器模块实战含源码

文章目录 一.概要二.DHT11主要性能参数三.DHT11温度传感器内部框图四.DTH11模块原理图五.DHT11模块跟单片机板子接线和通讯时序1.单片机跟DHT11模块连接示意图2.单片机跟DHT11模块通讯流程与时序 六.STM32单片机DHT11温度传感器实验七.CubeMX工程源代码下载八.小结 一.概要 DH…

offer题目51:数组中的逆序对

题目描述:在数组中的两个数字,如果前面一个数字大于后面的数字,则这两个数字组成一个逆序对。输入一个数组,求出这个数组中的逆序对的总数。例如,在数组{7,5,6,4}中,一共存在5个逆序对,分别是(7…

[Vulnhub] TORMENT IRC+FTP+CUPS+SMTP+apache配置文件权限提升+pkexec权限提升

信息收集 IP AddressOpening Ports192.168.101.152TCP:21,22,25,80,111,139,143,445,631 $ nmap -p- 192.168.101.152 --min-rate 1000 -sC -sV PORT STATE SERVICE VERSION 21/tcp open ftp vsftpd 2.0.8 or later | ftp-anon: Anonymous FTP login a…

新建一个git仓库并且把已有项目推送到git远程仓库

总贴 1. 创建一个空项目,不会看新建仓库 2. 克隆这个项目到某个文件夹去,比如我想克隆到我的E盘的code下面 3. 我的这个文件夹下面是有东西的,一点都不影响 . 4. 用命令行进入这个文件夹 命令行已经显示了已经在E盘下面code文件夹, 不会…

【linux】报错解决:配置RAIDA1之后系统识别不到

【linux】报错解决:配置RAIDA1之后系统识别不到 一、问题描述: 我的主板是华南金牌X99-F8D PLUS,安装了ubuntu20.04,通过BIOS创建了RAID1数组,进入系统之后识别不到我创建的RAID1数组。 二、原因分析: 可…

【算法】算法模板

算法模板 文章目录 算法模板简介数组字符串列表数学树图动态规划 简介 博主在LeetCode网站中学习算法的过程中使用到并总结的算法模板,在算法方面算是刚过初学者阶段,竞赛分数仅2000。 为了节省读者的宝贵时间,部分基础的算法与模板未列出。…

IMU提升相机清晰度

近期,一项来自北京理工大学和北京师范大学的团队公布了一项创新性的研究成果,他们将惯性测量单元(IMU)和图像处理算法相结合,显著提升了非均匀相机抖动下图像去模糊的准确性。 研究团队利用IMU捕捉相机的运动数据&…

用程序画出三角形图案

创建各类三角形图案 直角三角形&#xff08;左下角&#xff09; #include <iostream> using namespace std;int main() {int rows;cout << "输入行数: ";cin >> rows;for(int i 1; i < rows; i){for(int j 1; j < i; j){cout << &…