企业官网建设流程全解析

简介：面向移动应用开发者与影视类项目学习者的双端影视APP源码包，聚焦安卓与iOS两端在线视频聚合应用的完整实现，可用于研究跨平台开发、后台服务与会员运营逻辑，适合具备一定移动端基础、希望理解影视类应用商业闭环的读者。压缩包为zip格式，体积约42.5MB；文件总数一栏为0、类型明细暂无数据，包内具体构成需以实际下载内容为准。已有1177人学习下载，具备一定参考热度。源码内容覆盖双端应用、分销关系与佣金结算、用户与视频内容管理、支付接口、数据分析、卡密生成与验证、会员权益分享等模块，并附带使用和部署教程；数据库.sql可用于理解后台数据结构与初始化。对希望梳理影视APP从客户端到后台、从内容管理到虚拟商品运营完整链路的开发者，具有较高的拆解与二次开发参考价值。

1. 拿到一套影视 APP 双端源码，先看哪几处

多数人拿到影视 APP 双端源码程序，第一件事是数页面：首页、分类、详情、播放、我的，五个 Tab 齐全，就觉得这东西能交差。我习惯反着看——先去翻播放页的地址下发逻辑，再看首页瀑布流的分页接口。道理不复杂，UI 是这类源码包里最容易抄、也最容易被替换的一层，真正决定它能不能上线、能不能扛住真实用户的是播放鉴权、续播进度、双端播放器差异这几块硬骨头。这套影视 APP 源码适合两类人：一类是想快速搭个能跑的内容分发壳子、再往里填自己业务的团队，一类是拿真实项目练双端联调的开发者。库里能跑通列表和详情不算本事，能把「进了播放页不黑屏、退出去再进来接得上上次进度」这条链路走顺，才算摸到门。

2. 技术栈与目录结构：一套代码怎么同时喂饱安卓和 iOS

先泼一盆冷水：市面上叫「双端」的影视源码至少有两种含义。一种是真·一套代码编译两端，另一种是安卓工程和 iOS 工程各一份，共用一套后端接口，打包时给你两个压缩包。这两种的维护成本差着一个数量级，动手之前必须分清楚，否则你改了半天的pages/index/index.vue，对方给你的却是两个原生工程，白干。

我手上这类包常见形态是：客户端走跨端框架，服务端走 PHP 系框架，数据库 MySQL，缓存 Redis，播放地址由自己的存储或 CDN 服务商签发。下面这套结构是按这个形态拆的，你拿到别的实现，对号入座即可。

2.1 三种双端路线的真实代价

第一行是影视类源码最常见的打法，原因很实际：页面天天改，运营今天要加个「热播榜」入口，明天要换首页楼层顺序，Vue 那套模板改起来门槛最低。代价是播放器这一步绕不开原生，video组件能覆盖大部分场景，但碰到硬解、HLS 多码率切换、投屏这类需求，就得往uni_modules里塞原生插件。

第二行 Flutter 的优势是双端表现一致、动画细腻，缺点是播放器要么用平台视图把原生播放器嵌进来，要么用第三方封装，前者有性能开销，后者受制于插件维护状态。第三行不用多说，两套代码就是两份人力，除非你对播放体验有硬指标，否则不建议中小团队碰。

提示：判断一份源码属于哪种，最快的办法是看根目录有没有pages.json/manifest.json，有就是 uni-app 系；有pubspec.yaml就是 Flutter；两边各一个build.gradle和.xcodeproj就是原生双份。

2.2 目录结构逐层拆解

movie-app/ ├── client/ # 客户端，一套代码编译安卓/iOS │ ├── pages/ │ │ ├── index/index.vue # 首页：轮播 + 分类入口 + 瀑布流 │ │ ├── category/category.vue # 分类筛选：按类型/地区/年份 │ │ ├── detail/detail.vue # 详情页：简介、剧集列表、收藏 │ │ ├── play/play.vue # 播放页：播放器 + 选集 + 线路切换 │ │ └── mine/mine.vue # 我的：登录、会员、观看历史 │ ├── components/ │ │ ├── vod-card/ # 海报卡片，首页与分类页复用 │ │ └── video-player/ # 播放器封装，续播/倍速/全屏都在这 │ ├── api/ │ │ ├── request.js # 统一请求封装，双端共用 │ │ └── vod.js # 业务接口，按模块拆文件 │ ├── store/ # 全局状态：token、用户信息、播放历史 │ ├── static/ # 图片、字体、启动图 │ ├── uni_modules/ # 原生插件目录（播放器增强、投屏） │ ├── pages.json # 路由与 TabBar 配置 │ └── manifest.json # 双端打包配置：包名、权限、启动图 ├── server/ # 服务端 │ ├── app/ │ │ ├── api/controller/ # 对 App 暴露的接口 │ │ ├── admin/controller/ # 后台管理接口 │ │ └── common/ # 公共模型、中间件、异常处理 │ ├── config/ # 数据库、缓存、签名密钥 │ ├── route/ # 路由定义 │ ├── public/ # 入口文件与静态资源 │ └── runtime/ # 运行时缓存，权限要给足 └── docs/ # 部署说明、接口文档

这份结构里有两处容易被忽略。一是uni_modules，很多人拿到包直接npm install然后跑，结果播放器插件没装，播放页一片空白——原生插件不是 npm 包，得用对应的 IDE 打开工程让插件挂载上去。二是runtime目录，Linux 上部署时如果没给写权限，表现是接口 500 但日志里什么都没有，因为日志本身也写不进去。

2.3 数据表与接口分层：内容、剧集、用户、播放记录

影视类业务的数据模型其实很薄，四张表撑起大半功能。下面这份建表语句是这类项目的典型形态，字段名各家不同，结构大差不差：

-- 影片主表：一部剧一行 CREATE TABLE `vod` ( `id` int unsigned NOT NULL AUTO_INCREMENT, `name` varchar(120) NOT NULL COMMENT '片名', `sub_title` varchar(120) DEFAULT '' COMMENT '副标题/别名', `cat_id` int unsigned NOT NULL DEFAULT 0 COMMENT '分类ID', `area` varchar(20) DEFAULT '' COMMENT '地区', `year` smallint DEFAULT 0 COMMENT '年份', `poster` varchar(255) DEFAULT '' COMMENT '竖版海报', `score` decimal(3,1) DEFAULT 0.0 COMMENT '评分', `status` tinyint NOT NULL DEFAULT 1 COMMENT '1上架 0下架', `updated_at` int unsigned DEFAULT 0 COMMENT '更新时间戳', PRIMARY KEY (`id`), KEY `idx_cat_status` (`cat_id`, `status`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='影片主表'; -- 剧集表：一集一行，电影就是一行 CREATE TABLE `vod_episode` ( `id` int unsigned NOT NULL AUTO_INCREMENT, `vod_id` int unsigned NOT NULL, `episode` smallint NOT NULL DEFAULT 1 COMMENT '第几集', `title` varchar(120) DEFAULT '', `play_path` varchar(255) NOT NULL COMMENT '相对路径，域名走配置', `line` tinyint DEFAULT 1 COMMENT '线路号，多线路切换用', PRIMARY KEY (`id`), KEY `idx_vod_line` (`vod_id`, `line`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='剧集表'; -- 播放记录：续播靠它 CREATE TABLE `play_log` ( `id` bigint unsigned NOT NULL AUTO_INCREMENT, `uid` int unsigned NOT NULL, `vod_id` int unsigned NOT NULL, `ep_id` int unsigned NOT NULL, `progress` int unsigned DEFAULT 0 COMMENT '已播放秒数', `updated_at` int unsigned DEFAULT 0, PRIMARY KEY (`id`), UNIQUE KEY `uk_uid_vod` (`uid`, `vod_id`) ) ENGINE=InnoDB DEFAULT CHARSET=utf8mb4 COMMENT='播放记录';

第一张表里poster只存相对路径、域名走配置，这个设计不是洁癖，是血泪经验——后面换存储服务商或者上 CDN，只改一个配置项，不用写 SQL 批量刷库。第二张表的line字段支撑「线路一/线路二」切换，影视类资源经常出现某条线挂掉的情况，多线路是基本盘。第三张表建了uid + vod_id的唯一索引，续播只保留最新一条，用REPLACE INTO或先删后插都行，别做成每次播放插一行，半年后这张表能涨到几千万行。

接口侧通常按模块拆成这几组：

注意/api/play/sign是唯一必须带 token 的播放相关接口，这个设计决定了很多事——地址不是明文存在数据库里直接给客户端的，而是用户鉴权通过之后临时签发。后面第 3 章会展开。

3. 核心模块拆解：从首页瀑布流到播放页的完整链路

这一章按用户真实操作路径走一遍：打开 App 看到首页 → 点进详情 → 进播放页出画面 → 退出再进来接上进度。每一步落一段代码，讲清楚参数该怎么配、为什么这么配。

3.1 首页数据装配：一次请求拿回三层结构

首页是最容易被写烂的地方。常见翻车是轮播、分类入口、瀑布流各发一个请求，用户看着三个骨架屏依次亮起来，网差的时候能等五六秒。合格做法是后端一次装配好返回，客户端一次渲染。

先看请求封装，这层决定了后面所有接口的写法：

// client/api/request.js —— 双端共用的请求层 const BASE_URL = 'https://api.your-domain.com' // 换成自己的接口域名，结尾不要带斜杠 export function request(options) { const token = uni.getStorageSync('token') // 登录成功后写入，退出登录时清掉 return new Promise((resolve, reject) => { uni.request({ url: BASE_URL + options.url, method: options.method || 'GET', data: options.data || {}, timeout: 8000, // 列表接口偶发慢，8 秒足够，别设 30 秒让用户干等 header: { 'Content-Type': 'application/json', ...(token ? { Authorization: 'Bearer ' + token } : {}) }, success: (res) => { const body = res.data if (body.code === 0) return resolve(body.data) // 约定 code=0 为业务成功 if (body.code === 401) { // token 过期，统一回登录 uni.removeStorageSync('token') uni.reLaunch({ url: '/pages/login/login' }) return reject(body) } uni.showToast({ title: body.msg || '请求失败', icon: 'none' }) reject(body) }, fail: (err) => reject(err) }) }) }

timeout这个参数值得单独说。默认值在不同平台上不一样，安卓上有时是 60 秒，用户点了没反应又不敢退，体验极差。设成 8 秒，超时就走fail分支弹个重试，比一直转圈强。401在这里统一处理，别让每个页面各写一遍跳登录的逻辑，早晚写漏一个。

分页逻辑在首页长列表里最容易出 bug：

// pages/index/index.vue 中的列表加载片段 const list = ref([]) const page = ref(1) const hasMore = ref(true) const loading = ref(false) async function loadList(reset = false) { if (loading.value || (!hasMore.value && !reset)) return if (reset) { page.value = 1; hasMore.value = true } loading.value = true try { const res = await request({ url: '/api/vod/list', data: { page: page.value, size: 12, cat_id: catId.value } }) // 首屏覆盖，后续追加，避免下拉刷新时出现重复项 list.value = page.value === 1 ? res.list : list.value.concat(res.list) hasMore.value = res.list.length === 12 // 返回不足一页即认为到底 page.value++ } finally { loading.value = false } }

size和「不足一页即到底」这个判断必须成对出现。见过不少人把size改成 20，忘了同步改判断条件，结果列表永远差最后几条加载不出来。另一个坑是reset参数，下拉刷新时必须回到第 1 页并清空hasMore，否则用户刷新之后再也拉不动。

3.2 播放页：续播、倍速和切集重建

播放页是整个项目里最值得多看两眼的地方。影视类的核心体验就三件事：点进去能出画面、退出再进来能接上、切下一集不用等太久。

<!-- client/components/video-player/index.vue --> <template> <view class="player-wrap"> <video :id="'vod-' + epId" :key="epId" :src="playUrl" :poster="poster" :initial-time="startTime" :autoplay="true" :enable-progress-gesture="true" :playback-rate="rate" object-fit="contain" @timeupdate="onTimeUpdate" @loadedmetadata="onLoaded" @error="onError" /> </view> </template> <script setup> import { ref, watch } from 'vue' import { request } from '@/api/request' const props = defineProps({ vodId: { type: Number, required: true }, epId: { type: Number, required: true } }) const playUrl = ref('') const startTime = ref(0) // 续播起点，单位秒 const rate = ref(1) // 倍速，1 / 1.25 / 1.5 / 2 let lastReport = 0 // 上报节流用 // 每次切集重新签发地址，key 变化会强制重建 video 节点 watch(() => props.epId, async (id) => { const res = await request({ url: '/api/play/sign', method: 'POST', data: { vod_id: props.vodId, ep_id: id } }) playUrl.value = res.url startTime.value = res.progress || 0 }, { immediate: true }) // 播放进度每 5 秒上报一次，别每帧都发请求 function onTimeUpdate(e) { const now = e.detail.currentTime if (now - lastReport < 5) return lastReport = now request({ url: '/api/play/progress', method: 'POST', data: { vod_id: props.vodId, ep_id: props.epId, progress: Math.floor(now) } }).catch(() => {}) // 上报失败不打扰用户 } function onError(e) { uni.showToast({ title: '播放失败，试试切换线路', icon: 'none' }) } </script>

几个参数必须讲清楚。:key="epId"是这段代码里最关键的一行，没有它，切换剧集时video组件会复用旧节点，initial-time不生效，用户点了第 5 集却从第 1 集的进度开始播——这个 bug 在新手项目里出现频率高得离谱。:playback-rate是 uni-app 提供的倍速属性，值域一般在 0.5 到 2 之间，超出范围安卓上会静默忽略。

onTimeUpdate的节流也不能省。timeupdate事件触发频率跟设备有关，有的安卓机能到每秒四五次，不做节流就是每秒四五个写请求，服务端连接池很快被打满。5 秒一次足够续播精度，用户不会在意差那几秒。

注意：initial-time在 iOS 上有概率不生效，表现为进度条停在 0 但实际音频已经播到后面。稳妥做法是监听loadedmetadata之后再取一次currentTime，发现偏差大于 3 秒就手动seek一次。

3.3 播放地址下发：签名、过期与权限校验

服务端这一环是很多人抄源码时直接跳过的部分，但它决定了你的存储地址会不会被扒走白用。思路很简单：数据库里只存相对路径，客户端请求时现场签发一个带过期时间的地址。

// server/app/api/controller/Play.php public function sign() { $vodId = (int) input('post.vod_id'); $epId = (int) input('post.ep_id'); $uid = $this->uid; // 中间件解析 token 后注入，未登录为 0 // 1. 权限校验：会员 / 单点购买 / 免费片，三种策略按业务组合 if (!$this->checkPermission($uid, $vodId)) { return json(['code' => 403, 'msg' => '请先开通会员']); } // 2. 取相对路径，域名不进库，换存储服务商时只改配置 $path = Db::name('vod_episode') ->where(['id' => $epId, 'vod_id' => $vodId]) ->value('play_path'); if (!$path) { return json(['code' => 404, 'msg' => '剧集不存在']); } // 3. 签发带过期时间的地址，10 分钟内有效 $expire = time() + 600; $sign = hash_hmac('md5', $path . '|' . $expire, config('app.play_secret')); $url = config('app.media_host') . $path . "?e={$expire}&sign={$sign}"; // 4. 顺带把续播进度带回去，省一次请求 $progress = Db::name('play_log') ->where(['uid' => $uid, 'vod_id' => $vodId]) ->value('progress') ?: 0; return json(['code' => 0, 'data' => ['url' => $url, 'expire' => $expire, 'progress' => $progress]]); }

play_secret放在配置文件里而不是数据库里，方便不同环境用不同密钥。签名用hash_hmac而不是直接md5拼接，是因为纯拼接的签名一旦密钥泄露或者被猜到拼接规则，就等于没有。10 分钟的过期窗口是权衡结果：太短，用户看到一半地址失效；太长，地址被分享出去的有效期也长。真实项目里通常还会加一层按 IP 或按设备维度的频控，防止有人写脚本批量刷地址。

checkPermission里根据业务需要组合判断，免费片直接放行、会员看会员有效期、单片付费的查订单表。这块逻辑别写死在控制器里，抽成独立服务，后面接第三方订单系统时能少改很多地方。

4. 跑起来：本地环境搭建与首屏联调

源代码能不能跑通，八成卡在环境和服务端配置上，客户端反而是最简单的部分。按下面的顺序来，别跳步。

4.1 后端环境：PHP、MySQL、Redis 三件套

这类影视源码的后端大多是 PHP 框架，版本要求一般在 README 或者composer.json里写着。第一步永远是看版本要求，我见过有人拿 PHP 7.2 去跑用了 PHP 8 语法的项目，报错信息五花八门，折腾一下午才发现是版本问题。

# 1. 先确认版本，别急着 composer install php -v composer -V # 2. 装依赖，线上部署加 --no-dev 跳过测试相关包 composer install --no-dev # 3. 建库并导入，源码包里一般带一个 .sql 文件 mysql -uroot -p -e "CREATE DATABASE movie DEFAULT CHARSET utf8mb4 COLLATE utf8mb4_unicode_ci;" mysql -uroot -p movie < server/docs/movie.sql # 4. 配置文件从示例复制，改数据库账号、接口域名、播放密钥 cp server/.env.example server/.env vim server/.env # 5. 目录权限，Linux 上接口 500 十有八九是这里 chmod -R 755 server/public chmod -R 777 server/runtime # 6. 用内置服务器先验证接口通不通，别一上来就配 nginx php think run -p 8080 curl "http://127.0.0.1:8080/api/vod/list?page=1&size=12"

第 3 步的.sql文件里通常包含建表语句和几条演示数据，导完之后先curl一下列表接口，能返回 JSON 就说明后端这条线通了。第 5 步的权限问题值得单独强调：runtime目录不可写时，框架的异常处理也会失败，最终表现为一个没有内容的 500 页面，日志目录里空空如也，很难查。第 6 步用 PHP 内置服务器验证是最快的路径，确认没问题再上 nginx 配伪静态，能把「到底是代码问题还是 web 服务器配置问题」这个二选一排除掉。

Redis 在这类项目里主要用来存缓存和验证码，如果本机没装，可以先在配置里把缓存驱动改成文件，功能不受影响，只是性能差些。

4.2 客户端连本地：改三个地方就能出画面

客户端跑起来只需要改三处：接口地址、打包配置、原生插件。前两个改完就能在模拟器里看到首页数据。

// client/manifest.json 关键字段 { "name": "影视", "appid": "__UNI__XXXXXXX", "versionName": "1.0.0", "versionCode": 100, "app-plus": { "distribute": { "android": { "package": "com.yourcorp.movie", "permissions": [ "<uses-permission android:name=\"android.permission.INTERNET\"/>" ] }, "ios": { "appid": "com.yourcorp.movie" } } } }

appid是框架分配的应用标识，换项目要重新申请，直接沿用别人的会打不出包。package和 iOS 的appid字段是应用商店里的唯一标识，一旦上架就不能改，动手前先想好命名规则。安卓侧权限如果漏了网络权限，表现是首页一直转圈但日志里没有任何请求记录。

原生插件这一步用对应 IDE 打开client目录，等插件自动挂载完成再运行。如果播放页提示找不到插件，多半是插件目录里的编译产物缺失，需要用 IDE 重新打一次自定义基座，标准基座里不包含这些第三方原生插件。

4.3 打包前：一份我自己会走的检查清单

最后一行吃过亏：安卓应用商店对versionCode是严格递增的，同一个号传第二次会直接被打回，而错误提示往往只说「包已存在」，不告诉你原因。

5. 常见问题排查：双端联调最容易翻车的五个地方

这一章是我自己踩过的坑，按「现象 → 原因 → 解决」写，遇到了直接对号入座。

5.1 接口全 404，浏览器里访问却是通的

现象：手机模拟器里首页一直转圈，抓包看所有请求返回 404，但把同样的地址贴到浏览器能正常返回。

原因：请求域名后面多了或者少了斜杠，拼出来成了//api/vod/list；或者BASE_URL结尾带了/，业务代码里又写了一段/api/xxx，拼成双斜杠。部分服务端会把它当非法路径处理。

解决：把BASE_URL统一约定为不带结尾斜杠，所有业务路径都以/开头，并在request.js里加一行断言，开发环境下发现双斜杠直接在控制台报错，别等上线才发现。

5.2 播放页黑屏但能听到声音

现象：进播放页画面全黑，声音正常，进度条也在走。

原因：视频编码格式和设备解码能力不匹配。常见于用了 H.265 编码的片源，部分中低端安卓机不支持硬解，或者服务器返回的Content-Type不正确，播放器把它当成了下载流。

解决：第一步抓一下响应头，确认Content-Type是video/mp4或application/vnd.apple.mpegurl；第二步换一个 H.264 的片源测试，如果立刻正常，就是编码问题，需要在转码环节统一输出 H.264 加 HLS 切片，别指望客户端兜底。

5.3 iOS 上切集后进度条不动

现象：安卓正常，iOS 上从第 1 集切到第 2 集，画面出来了但进度条始终停在 0，拖动也没反应。

原因：video组件节点被复用，initial-time只在首次挂载时生效，后续切集虽然src变了，组件内部状态没重置。

解决：给video加:key="epId"强制重建节点，代价是切集时有一次短暂的重建开销，比重置状态可靠。如果重建后仍然不动，检查initial-time是否在loadedmetadata之前就设置了，必要时在元数据加载完回调里手动seek。

5.4 会员到期时间差几个小时

现象：后台显示会员 12 月 1 日到期，用户手机上显示 11 月 30 日晚上到期，客服天天被问。

原因：服务端存的是时间戳或者 UTC 时间，客户端用本地时区格式化，两边时区不一致；或者服务端直接存了datetime字符串，客户端用new Date('2024-12-01 00:00:00')解析，iOS 对带空格的格式解析失败返回Invalid Date。

解决：统一约定接口只传时间戳（秒或毫秒选一个，全项目一致），客户端用统一的格式化函数渲染。iOS 那个解析坑更隐蔽，2024-12-01 00:00:00在安卓上能解析，在 iOS 上必须写成2024/12/01 00:00:00或者直接传时间戳，这个差异坑过太多人。

5.5 打出来的包装上就闪退

现象：真机调试一切正常，打完包安装，点开图标闪一下就退出。

原因：三类。打包时用了标准基座而项目依赖自定义原生插件；签名证书和包名不匹配；manifest.json里配置了某个权限但原生模块没打进去。

解决：先打自定义基座在真机上跑一遍，能跑再出正式包；核对包名与证书指纹；把manifest.json里的权限逐条过一遍，删掉没用到的。如果还是闪退，用安卓的日志工具连上看崩溃日志，第一行通常就写着缺哪个类。

6. 二次开发：把通用壳子改成自己业务的动手点

改这类源码，我的顺序是「先加数据、再通接口、最后动页面」，反过来做十有八九要返工。拿最常见的需求举例：运营想加一个「专题片单」，首页放个入口，点进去是人工编排的一组影片。

第一步建两张表，专题主表和关联表，别想着在vod表加个topic_id字段糊弄过去，一部影片早晚要出现在多个专题里。第二步在后端加一组接口，列表接口复用现成的分页封装，详情接口返回专题信息加影片数组。第三步才是前端，pages/topic/detail.vue里用现成的vod-card组件渲染，首页入口配在后台的楼层配置里。

改造过程中有几处容易出问题，我列了个对照：

pages.json那一条我单独拎出来说，因为它是纯配置，不加代码也能跑，但跳转时会静默失败或者跳到空白页，新手排查半天以为是页面写错了。改完页面第一件事是去pages.json补路由，养成肌肉记忆。

验证方式我一般分三层走：先用curl直接打接口，确认返回结构对；再在客户端里只渲染文本，确认数据能拿到；最后才上样式和图片。跳过中间那步直接调样式，出问题时你分不清是接口没数据还是渲染写错了。

还有一条习惯值得说：改任何源码之前，先git init提交一版原始代码，再建个分支动手。我吃过一次亏，把一套影视 APP 双端源码程序的首页改得面目全非之后，客户说还是原来那版好，而我连原始文件都找不回来了，只能重新解压一遍压缩包——结果发现那份包已经在清理下载目录时删掉了。从那以后我每次拿到新源码包，第一件事就是建仓库、打 tag、写一行 README 记下原始状态，改到什么程度都能退回去。希望帮到你。

本文还有配套的精品资源，点击获取