# app视频

**Repository Path**: Chenfangyijie_code/app-video

## Basic Information

- **Project Name**: app视频
- **Description**: 基于 uni-app + Vue 2 + tm-vuetify 的视频播放应用，含首页分类、社区动态、会员中心、个人中心四大模块，支持 Android、iOS、各小程序、H5 多端运行。
- **Primary Language**: HTML
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2022-02-20
- **Last Updated**: 2026-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# 布尔视频 App

> 基于 uni-app + Vue 2 + tm-vuetify 的视频播放应用，含首页分类、社区动态、会员中心、个人中心四大模块，支持 Android、iOS、各小程序、H5 多端运行。

---

## 一、项目介绍

布尔视频是一款面向 C 端用户的视频浏览与播放应用，主要功能包括：

- **启动引导页**：5 秒倒计时自动跳转，支持点击"跳过"立即进入
- **首页**：顶部分类切换（精选/原创/最新/热门等 9 类）、搜索框、轮播图、电视剧横滑列表、电影竖屏列表、动漫横屏列表
- **社区**：分类切换（推荐/最新/关注/同城），用户动态卡片含头像、定位、内容图、点赞/评论/浏览
- **会员中心**：会员权益轮播、用户信息、升级 VIP、会员推荐、热度/口碑/收藏/独家榜单
- **个人中心**：头像、VIP 标识、会员/钱包/推广入口、应用中心/历史/收藏等菜单、注销登录
- **视频播放页**：视频播放、非会员试看 60 秒、下载到相册、收藏/分享、相关推荐

### 技术栈

| 类别 | 选型 |
| --- | --- |
| 框架 | uni-app (Vue 2) |
| UI 库 | tm-vuetify（已内置，无需额外安装） |
| 多端 | APP-PLUS / H5 / 微信小程序 / 支付宝小程序 / 百度小程序 / 抖音小程序 |
| 视频模块 | uni-app 内置 `<video>` + manifest VideoPlayer 模块 |

### 目录结构

```
app-video/
├─ App.vue                 # 应用入口，启动配置校验 + Android 导航栏配色
├─ main.js                 # Vue 实例化，注册 tmVuetify
├─ manifest.json           # 应用配置（名称、权限、模块、多端）
├─ pages.json              # 页面路由 + 全局样式
├─ uni.scss                # 全局样式变量
├─ index.html              # H5 入口模板
├─ config/
│  └─ app.config.js        # 【配置中心】远程地址、业务参数、常量
├─ utils/
│  ├─ util.js              # 【通用工具】跳转/提示/平台判断/防抖节流等
│  └─ configChecker.js     # 【配置校验】启动阶段合法性校验
├─ pages/                  # 业务页面
│  ├─ guide/guide.vue      # 启动引导页
│  ├─ index/index.vue      # 主页框架（底部 4 tab 切换）
│  ├─ index/home.vue       # 首页内容
│  ├─ community/community.vue  # 社区页
│  ├─ vip/vip.vue          # 会员页
│  ├─ user/user.vue        # 个人中心
│  └─ play/play.vue        # 视频播放页
├─ components/             # 业务组件
│  ├─ sliding.vue          # 横向视频滑动列表
│  ├─ play.vue             # 视频播放组件（含试看逻辑）
│  ├─ dataInfo.vue         # 社区动态卡片
│  ├─ tabs.vue             # 榜单 tabs + 列表
│  └─ vip.vue              # VIP 横向列表
├─ static/                 # 本地静态资源
│  ├─ bg.jpg               # 背景图
│  └─ logo.png             # 应用 Logo
└─ tm-vuetify/             # 内置 UI 库（请勿修改）
```

---

## 二、Demo 图片

| 背景图 `static/bg.jpg` | Logo `static/logo.png` |
| :---: | :---: |
| ![背景图](./static/bg.jpg) | ![Logo](./static/logo.png) |
| 用于社区榜单背景，营造内容氛围 | 绿底白字"U"，应用品牌标识 |

---

## 三、部署教程（小白友好）

> 以下步骤假设你已安装好 [Node.js](https://nodejs.org)（建议 14 及以上）。如未安装，前往官网下载 LTS 版本，一路"下一步"安装即可。

### 1. 安装 HBuilderX（必装）

uni-app 官方推荐使用 HBuilderX 开发，免去环境配置烦恼：

1. 访问 [HBuilderX 下载页](https://www.dcloud.io/hbuilderx.html)
2. 下载 **App 开发版**（注意是 App 版，不是标准版）
3. 解压到任意目录，双击 `HBuilderX.exe` 启动

### 2. 导入项目

1. 打开 HBuilderX，顶部菜单：`文件` → `导入` → `本地项目`
2. 选择本项目根目录 `app-video` 文件夹
3. 点击"导入"，等待工程加载完成

### 3. 安装依赖（如需）

本项目 UI 库 `tm-vuetify` 已内置在工程内，**无需 npm install**。若你后续添加了其他 npm 包，再在项目根目录执行：

```bash
npm install
```

### 4. 运行到浏览器（最快验证）

1. 顶部菜单：`运行` → `运行到浏览器` → `Chrome`
2. 浏览器自动打开，即可看到引导页 → 5 秒后进入主页

### 5. 运行到手机/模拟器

**Android（推荐真机调试）：**

1. 手机开启"开发者选项" → 打开"USB 调试"
2. 用数据线连接电脑
3. 顶部菜单：`运行` → `运行到手机或模拟器` → 选择你的设备

**iOS：**

1. 需 Mac 电脑 + Xcode + Apple 开发者账号
2. 顶部菜单：`运行` → `运行到手机或模拟器` → 选择 iOS 设备

### 6. 打包发布

- **Android APK**：`发行` → `原生 App-云打包`，按提示配置签名后打包
- **iOS**：`发行` → `原生 App-云打包` → 选择 iOS，需上传证书
- **微信小程序**：`发行` → `小程序-微信`，需在 `manifest.json` 填入自己的 `mp-weixin.appid`

---

## 四、使用教程

### 首次启动

1. 应用打开后显示引导页，5 秒倒计时结束自动进入主页
2. 想立即进入？点击右上角"跳过"按钮

### 主页操作

- **切换分类**：点击顶部"精选/原创/最新…"标签切换
- **搜索**：在搜索框输入关键词（演示版仅展示搜索框）
- **看视频**：点击任意视频封面进入播放页
- **切换底部 Tab**：底部 4 个图标分别进入 视频 / 社区 / 会员 / 我的

### 视频播放

- 进入播放页自动播放
- **非会员试看**：播放 60 秒后自动暂停，弹窗提示开通会员
- **下载**：点击"下载"按钮，确认后开始下载，进度条实时显示，完成后自动保存到手机相册
- **收藏/分享**：点击对应图标（演示版给出友好提示）

### 个人中心

- 查看头像、VIP 等级
- 点击"vip会员"进入会员开通页
- 点击"注销登录"退出并回到引导页

---

## 五、配置说明

所有可配置项集中在 `config/app.config.js`，**修改后无需改代码**：

```js
// 修改远程资源服务器
remoteBase: 'http://uniapp.181860.cn'

// 修改引导页时长
guide: { duration: 5000 }  // 毫秒

// 修改非会员试看时长
play: { previewSeconds: 60 }  // 秒

// 修改底部导航
tabbar: [...]
```

启动时会自动校验配置合法性，配置错误会弹窗精准提示错误项与修正建议，避免运行时崩溃。

---

## 六、FAQ 排错

### Q1：启动后白屏？

- **原因**：远程资源服务器 `http://uniapp.181860.cn` 无法访问
- **解决**：打开 `config/app.config.js`，把 `remoteBase` 改为你自己的资源服务器地址；或检查网络

### Q2：H5 运行报"plus is not defined"？

- **原因**：`plus` 是 App 端专属 API，H5 不支持
- **解决**：本项目已用条件编译 `#ifdef APP-PLUS` 隔离，若仍报错请确认运行目标是 App 而非 H5

### Q3：下载视频失败？

- **可能原因**：① 网络不通；② Android 未授予相册权限；③ 远程视频地址不可达
- **解决**：① 检查网络；② 去"设置 → 应用管理 → 布尔视频 → 权限"开启存储权限；③ 确认 `config/app.config.js` 中 `play.defaultVideo` 可访问

### Q4：微信小程序无法打包？

- **原因**：`manifest.json` 中 `mp-weixin.appid` 为空
- **解决**：前往 [微信公众平台](https://mp.weixin.qq.com) 申请小程序，把 AppID 填入 `manifest.json`

### Q5：iOS 启动崩溃？

- **原因**：`App.vue` 中 Android 导航栏配色代码在 iOS 执行
- **解决**：本项目已加平台判断与 try-catch，若仍崩溃请确认 HBuilderX 为最新版

### Q6：如何切换主题色？

- 修改 `App.vue` 中 `page` 的 `background-color`，以及 `tm-vuetify/scss/theme.css` 引入的主题包

### Q7：如何接入真实接口？

- 当前数据为占位演示。在 `pages/index/home.vue` 等页面的 `created`/`onLoad` 中调用 `uni.request` 拉取数据，替换 `data` 中的占位数组即可

---

## 七、参与贡献

1. Fork 本仓库
2. 新建 `feat_xxx` 分支
3. 提交代码
4. 新建 Pull Request

---

## 八、许可证

本项目仅供学习交流使用。`tm-vuetify` UI 库的许可证见 `tm-vuetify/license.md`。