Flask-uniapp实现通用视频播放器

三端通用视频播放器应用

基于 Python Flask + MySQL 8.0 + UniApp(Vue3) 开发的移动端视频播放器，支持微信小程序、App、H5 三端运行。

项目结构

├── backend/                # Flask 后端│   ├── app/│   │   ├── __init__.py     # 应用工厂│   │   ├── models.py       # 数据模型│   │   ├── utils.py        # 工具函数│   │   └── routes/         # 路由蓝图│   │       ├── auth.py     # 用户认证接口│   │       ├── video.py    # 视频接口│   │       └── record.py   # 播放记录接口│   ├── static/uploads/     # 文件存储目录│   ├── config.py           # 配置文件│   ├── run.py              # 启动入口│   ├── database.sql        # 建表SQL脚本│   └── requirements.txt    # Python依赖├── frontend/               # UniApp 前端│   ├── pages/              # 页面│   │   ├── index/          # 首页│   │   ├── play/           # 播放页│   │   ├── record/         # 播放记录│   │   ├── mine/           # 个人中心│   │   ├── login/          # 登录│   │   └── register/       # 注册│   ├── utils/│   │   ├── request.js      # 请求封装│   │   └── api.js          # 接口管理│   ├── pages.json          # 页面配置│   └── package.json        # 前端依赖└── README.md

一、后端部署

环境要求

Python 3.9+
MySQL 8.0

部署步骤

# 1. 进入后端目录cd backend# 2. 创建虚拟环境python -m venv venv# Windows:venv\Scripts\activate# macOS/Linux:source venv/bin/activate# 3. 安装依赖pip install -r requirements.txt# 4. 创建数据库（登录MySQL后执行）mysql -u root -p < database.sql# 5. 修改数据库连接（按需编辑 config.py）# SQLALCHEMY_DATABASE_URI 中的用户名、密码、数据库名# 6. 启动服务python run.py

服务启动后运行在 http://localhost:5000

数据库配置

编辑 backend/config.py 中的数据库连接串：

mysql+pymysql://用户名:密码@localhost:3306/video_app?charset=utf8mb4

二、前端部署

环境要求

Node.js 18+
HBuilderX（推荐）或 CLI 方式

CLI 方式运行

# 1. 进入前端目录cd frontend# 2. 安装依赖npm install# 3. H5端开发npm run dev:h5# 4. 微信小程序开发npm run dev:mp-weixin# 5. App开发npm run dev:app

HBuilderX 方式

用 HBuilderX 打开 frontend 目录
点击运行 → 运行到浏览器/小程序/App

接口地址配置

编辑 frontend/utils/request.js 中的 BASE_URL：

const BASE_URL = 'http://localhost:5000'// 改为实际后端地址

三、接口文档

统一响应格式

{ "code": 200, "msg": "操作成功", "data": {} }

用户认证

接口	方法	路径	参数
注册	POST	/api/auth/register	username, password, nickname
登录	POST	/api/auth/login	username, password
获取信息	GET	/api/auth/profile	Header: Authorization
更新信息	PUT	/api/auth/profile	nickname, avatar

视频

接口	方法	路径	参数
分类列表	GET	/api/video/categories	-
视频列表	GET	/api/video/list	page, per_page, category
视频详情	GET	/api/video/detail/:id	-
点赞	POST	/api/video/like/:id	-
收藏	POST	/api/video/favorite/:id	-
上传视频	POST	/api/video/upload	FormData: video, cover, title, category, description, duration

播放记录

接口	方法	路径	参数
添加记录	POST	/api/record/add	video_id, play_duration, progress
记录列表	GET	/api/record/list	page, per_page

四、tabBar 图标

项目需要在 frontend/static/icons/ 下放置以下图标文件（81x81px PNG）：

home.png / home-active.png
record.png / record-active.png
mine.png / mine-active.png

可使用 iconfont 等图标库下载，或暂时注释 pages.json 中的 iconPath 配置。