Uniapp知识付费源码及网站小程序开源搭建 | TP6 + Vue完整Docker部署
知识付费赛道这几年彻底火了。但很多内容创作者和教培机构都被卡在一个问题上：用第三方 SaaS 平台（小鹅通、海豚知道等），每年要交不菲的年费，还要被抽成 5%–30%；想自己搭，又不知道从哪下手。 好消息是，目前 GitHub/Gitee 上有不少基于 Uniapp 的知识付费开源源码，技术栈成熟、功能完整，完全可以私有化部署一套属于自己的网校系统。本文将以主流开源项目（匠言、万岳等）为参考原型，手把手带你完成从服务器环境到多端发布的完整搭建流程。 源码：zs.xcxyms.top > 💡 读完本文你将掌握：Uniapp 知识付费系统的典型技术架构、CentOS 服务器环境配置、后端 PHP 项目上线、Uniapp 多端编译发布、微信小程序接入、音视频存储方案，以及商用授权的合规注意事项。 --- ## 一、为什么选 Uniapp 做知识付费前端？ 知识付费场景最大的痛点之一是**多端覆盖**：你的学员可能用微信小程序、可能用 H5 网页、可能用 App，甚至可能用抖音/支付宝小程序。如果每个端单独开发，成本直接翻 5 倍。  Uniapp 的核心价值就是**"一套代码，多端编译"**： - 编译目标覆盖 iOS、Android、H5、微信/支付宝/抖音/百度/QQ 等小程序 - 基于 Vue.js 语法，前端开发者零学习成本切换 - DCloud 生态成熟，插件市场丰富，资料文档齐全 - 配合 uView UI / ColorUI 等组件库，能快速搭建课程卡片、播放器、会员中心等页面 主流的开源知识付费系统均采用 Uniapp 作为前端方案： |开源项目|前端|后端|核心特性| | --- | --- | --- | --- | |匠言知识付费开源版|Uniapp|TP5 + MySQL + Redis + Workerman|课程/直播/考试/会员/分销/多端| |万岳在线教育开源版|Uniapp + socket.io + WebRtc|PhalApi + TP5.1 (ThinkCMF)|内置直播、聊天室、多端适配| |追格小程序|Uniapp|WordPress|轻量级，适合博客/圈子延展| |创创猫 (Java 版)|Uniapp|Spring Boot|Java 技术栈选型| > 📌 本文以** "TP5/TP6 + MySQL + Uniapp**" 这一最主流的 PHP 技术栈为例展开，因为它占开源知识付费源码的 90% 以上，且二开资料最丰富。 --- ## 二、典型系统架构与功能全景  一套完整的知识付费系统，通常包括**三层架构**： ``` ┌─────────────────────────────────────────┐ │ 表现层：Uniapp 编译出的 小程序/H5/APP │ ├─────────────────────────────────────────┤ │ 接口层：PHP (TP) 提供的 RESTful API │ │ - 课程/订单/支付/会员/分销 等业务接口 │ ├─────────────────────────────────────────┤ │ 数据层：MySQL + Redis + OSS/COS 对象存储 │ └─────────────────────────────────────────┘ ``` **核心功能模块**（以匠言开源版为例）： - **课程管理**：视频课、音频课、图文课、专栏、电子书 - **直播管理**：支持语音+视频、语音+PPT 等多种直播形态 - **会员与订单**：会员等级、VIP 订阅、单独购买、余额支付 - **支付系统**：微信支付、支付宝支付（H5/小程序/APP 多端） - **营销工具**：分销裂变、优惠券、兑换码、拼团、积分 - **互动社区**：圈子、评论、@提醒、消息推送 - **讲师与机构**：多角色后台（平台/机构/讲师/学员） - **数据统计**：学习进度、销售统计、会员升级分析 --- ## 三、服务器与环境准备  ### 1. 硬件与系统选型 |项目|最低配置|生产推荐| | --- | --- | --- | |CPU|2 核|4 核及以上| |内存|4 GB|8 GB+| |系统|CentOS 7.9 / Ubuntu 20.04|CentOS 7.9 / Rocky Linux 8| |带宽|5 Mbps|10 Mbps+（音视频场景建议分离存储）| |硬盘|40 GB SSD|100 GB+ SSD| 数据来源：匠言官方推荐配置要求 2G 内存 40G 硬盘 5M 带宽起步，阿里云/腾讯云实战文章推荐 4 核 8G 起步。 ### 2. 安装宝塔面板（强烈推荐） 手动编译 LNMP 环境太痛苦，宝塔能节省 80% 的时间： ``` # CentOS yum install -y wget && wget -O install.sh http://download.bt.cn/install/install_6.0.sh && sh install.sh ``` 安装完成后登录宝塔面板，一键安装： - **Nginx 1.18+**（匠言等系统明确要求 Nginx，伪静态规则基于 Nginx 配置） - **MySQL 5.7+**（字符集 utf8mb4） - **PHP 7.4**（匠言开源版基于 TP5 推荐 7.2–7.4；若用 TP6 版则建议 PHP 8.1） - **Redis 7.0+** ### 3. 安装必要的 PHP 扩展 在宝塔 PHP 管理页面安装以下扩展：  ``` fileinfo redis opcache bcmath openssl pcntl posix sockets ``` > ⚠️ 缺失 `fileinfo` 会导致音视频/图片上传失败；缺失 `redis` 会导致缓存和会话功能异常。这是新手最常见的两个坑。 ### 4. 放行端口与配置防火墙 ``` firewall-cmd --zone=public --add-port=80/tcp --permanent firewall-cmd --zone=public --add-port=443/tcp --permanent firewall-cmd --zone=public --add-port=8282/tcp --permanent # Workerman（如有） firewall-cmd --reload ``` 同时别忘了在云服务商的安全组中放行上述端口。 --- ## 四、后端项目部署（以匠言 TP5 版为例） ### 1. 上传源码并配置站点 ``` cd /www/wwwroot git clone https://gitee.com/asliangzai/zsffzxkc.git kefu_pay # 前端 Uniapp 代码另存 git clone https://gitee.com/teacher_of_speech/knowledge-payment-front-end.git frontend ``` 在宝塔中添加站点： - **根目录**：`/www/wwwroot/kefu_pay/public`（站点入口必须为 public 目录） - **PHP 版本**：7.4 - **伪静态**：选择 "thinkphp" 规则 ### 2. 配置数据库 创建 MySQL 数据库（utf8mb4 字符集），然后导入官方提供的 SQL 文件： ``` mysql -u root -p your_db 📌 匠言开源版的数据库文件需 Star 项目后关注公众号领取，这是开源项目的常见做法。 ### 3. 修改数据库配置 编辑 `/config/database.php`： ``` return [ 'hostname' => '127.0.0.1', 'database' => 'your_db', 'username' => 'your_user', 'password' => 'your_password', 'charset' => 'utf8mb4', ]; ``` ### 4. 配置 Redis 与缓存 编辑 `/config/cache.php`，将默认 File 缓存改为 Redis： ``` 'default' => 'redis', 'stores' => [ 'redis' => [ 'type' => 'redis', 'host' => '127.0.0.1', 'port' => 6379, 'password' => '', ], ]; ``` ### 5. 运行安装向导 在浏览器访问 `http://你的域名/install.php`，按引导完成安装： - 第一步：环境检测（确保所有项 ✅） - 第二步：数据库配置 - 第三步：管理员账号设置 - 第四步：安装完成 ### 6. 配置对象存储（音视频必备） 知识付费的核心是音视频，本地存储撑不住。匠言支持七牛云 OSS，其他系统多用阿里云 OSS 或腾讯云 COS。 **以阿里云 VOD 为例**： 1. 开通 VOD 服务，获取 AccessKey 1. 修改 `/config/oauth.php` 或相关配置文件 1. 配置视频转码模板、域名加速 CDN 1. 开启**防盗链**（Referer 白名单），防止课程被非法盗播 ### 7. 配置 Workerman 长连接（实时消息/直播用） 如果系统带直播或 IM 功能，需要启动 Workerman： ``` cd /www/wwwroot/kefu_pay/gateway php start.php start -d ``` 配置 systemd 守护： ``` [Unit] Description=Kefu Workerman After=network.target [Service] Type=simple User=www Group=www WorkingDirectory=/www/wwwroot/kefu_pay/gateway ExecStart=/usr/bin/php start.php start -d Restart=always [Install] WantedBy=multi-user.target ``` --- ## 五、Uniapp 前端编译与多端发布 ### 1. 环境准备 - 下载安装 **HBuilderX** - 安装 **Node.js 14+**、npm 6+ - 安装微信开发者工具（小程序调试用） ### 2. 导入项目并配置 用 HBuilderX 打开前端源码目录，主要修改两个文件： **`manifest.json**`： ``` { "name": "我的知识店铺", "appid": "wx你的小程序AppID", "mp-weixin": { "appid": "wx你的小程序AppID", "setting": { "urlCheck": false } } } ``` **`config.js**`（或 `.env`）： ``` export default { BASE_URL: 'https://api.yourdomain.com', // 后端 API 域名 WS_URL: 'wss://api.yourdomain.com/ws', // WebSocket 地址 OSS_BUCKET: 'your-bucket', // ... 其他配置 } ``` ### 3. 编译到多端 HBuilderX 顶部菜单 → 发行： |目标平台|操作路径|产物| | --- | --- | --- | |H5|发行 → 网站 PC/H5|静态文件，部署到 Nginx| |微信小程序|发行 → 小程序 → 微信小程序|上传代码包到微信后台| |App (Android/iOS)|发行 → 原生 App|生成 APK/IPA 安装包| |支付宝/抖音小程序|发行 → 小程序 → 对应平台|各平台代码包| > 💡 一次代码，五端同发。这就是 Uniapp 最大的生产力优势。 ### 4. 微信小程序发布要点  1. 登录**微信公众平台**，注册并认证小程序（个人主体无法开通微信支付，**必须用企业主体**） 1. 在「开发管理 → 开发设置」中配置**服务器域名**： - request 合法域名：`https://api.yourdomain.com` - uploadFile 合法域名：你的 OSS/CDN 域名 - downloadFile 合法域名：同上 1. 在「微信支付 → 商户号」绑定微信支付商户号 1. HBuilderX 发行小程序代码包 → 导入微信开发者工具 → 上传 → 提交审核 > ⚠️ 小程序视频无法播放的常见原因：视频域名未配置到合法域名列表，或 OSS/COS 未开启 Referer 防盗链白名单。 --- ## 六、Nginx 反向代理与 HTTPS 配置 ### 1. 配置 HTTPS（微信小程序强制要求） ``` server { listen 443 ssl; server_name api.yourdomain.com; ssl_certificate /ssl/yourdomain.pem; ssl_certificate_key /ssl/yourdomain.key; root /www/wwwroot/kefu_pay/public; index index.php index.html; # 伪静态（ThinkPHP） location / { if (!-e $request_filename) { rewrite ^(.*)$ /index.php?s=/$1 last; } } # PHP 处理 location ~ \.php$ { fastcgi_pass unix:/tmp/php-cgi-74.sock; fastcgi_index index.php; include fastcgi.conf; } # 静态资源缓存 location ~* \.(jpg|jpeg|png|gif|ico|css|js|mp4)$ { expires 7d; } } ``` ### 2. H5 端独立站点配置 H5 编译后的静态文件单独部署： ``` server { listen 443 ssl; server_name h5.yourdomain.com; root /www/wwwroot/frontend_h5; index index.html; location / { try_files $uri $uri/ /index.html; } # API 反向代理（解决跨域） location /api/ { proxy_pass https://api.yourdomain.com/; } } ``` --- ## 七、支付与业务配置 ### 1. 微信支付配置 进入后台「系统配置 → 支付设置」： - 填写微信支付商户号（MCHID） - 填写 APIv3 密钥 - 上传商户证书（apiclient_cert.pem / apiclient_key.pem） - 配置支付回调地址：`https://api.yourdomain.com/payment/notify/wechat` ### 2. 支付宝支付配置 同理填写支付宝 APPID、应用私钥、支付宝公钥。 ### 3. 分销与会员体系 知识付费的核心变现引擎是**分销裂变**： - 一级/二级佣金比例设置 - 自动生成带参推广海报 - 分销员后台与提现审核 - 使用数据库事务确保"退款时佣金回滚"，避免乱账 ### 4. 兑换码与限免活动 运营冷启动时常用策略： - 批量生成体验码（如"7天VIP"）投放外部渠道 - 设置 3–5 节基础课限免，降低注册门槛 - 配合分销员高佣金（如前 50 名 40% 佣金）做种子裂变 --- ## 八、常见问题与排坑指南 ### ❌ 问题 1：页面 404 或路由失效 **原因**：Nginx 伪静态未配置或站点入口目录不对 **解决**：确认站点根目录为 `/public`，并配置 ThinkPHP 伪静态规则 ### ❌ 问题 2：音视频上传失败 **原因**：缺少 `fileinfo` 扩展，或 PHP 上传大小限制 **解决**： ``` # 宝塔 PHP 设置中修改 upload_max_filesize = 100M post_max_size = 100M ``` 并安装 fileinfo 扩展 ### ❌ 问题 3：小程序无法连接到后端 **原因**：域名未备案或未配置 HTTPS **解决**：微信小程序要求**必须 HTTPS + 已备案域名**，且需在公众平台配置 request 合法域名 ### ❌ 问题 4：课程视频无法播放 **原因**：OSS/COS 域名未加入小程序合法域名，或未开启 CDN 加速 **解决**：在微信公众平台「开发设置」中加入音视频 CDN 域名；在 OSS 控制台配置 Referer 防盗链白名单 ### ❌ 问题 5：高并发下订单超卖 **原因**：库存检查非原子操作 **解决**：使用 Redis 原子操作 `DECR`，或在 MySQL 中用 `UPDATE ... WHERE stock > 0` ### ❌ 问题 6：Workerman 服务启动后自动退出 **原因**：缺少 `pcntl`、`posix` 扩展，或 `event` 扩展未装 **解决**：安装对应扩展后重启 --- ## 九、性能优化建议 1. **Redis 缓存热点数据**：课程列表、排行榜、会员信息 1. **OSS/COS + CDN**：音视频必须走对象存储 + CDN，不要让应用服务器直接 serve 大文件 1. **MySQL 主从分离**：日活过万后，读写分离是必经之路 1. **Workerman 独立部署**：长连接服务与 HTTP 服务分离，互不影响 1. **开启 OPcache**：PHP 性能提升 2–3 倍 1. **图片懒加载 + 视频 HLS 切片**：前端用 Uniapp 的 `lazy-load` 属性，视频用 HLS 协议自适应码率 --- ## 十、合规与商用授权提醒（非常重要） 这是很多技术文章不会告诉你的部分，但**你必须重视**： > ⚠️ 开源 ≠ 可商用。以匠言知识付费开源版为例，其许可证为 CC0，允许学习交流，但**商用需购买商业授权**。万岳开源版也明确说明"开源版不适合商用，商用请购买商业版"。 **商用前必做的三件事**： 1. **仔细阅读 LICENSE**：是 GPL、MIT、CC0 还是商业授权？不同许可证对商用的要求天差地别 1. **购买商业授权**：大多数"开源版"仅用于学习，真要上线商用必须向作者购买授权 1. **不要使用"破解版""绿色版"源码**：这类源码可能植入后门，且法律风险极高 **合规清单**： - ✅ 域名已 ICP 备案 - ✅ 微信小程序已完成企业认证 - ✅ 微信支付商户号资质齐全（《增值电信业务经营许可证》等） - ✅ 课程内容版权清晰，不涉及侵权 - ✅ 用户隐私协议、付费协议完备 --- ## 十一、后续二次开发方向 拿到这套系统后，你可以基于 Uniapp + PHP 的架构做很多扩展： - **接 AI 大模型**：在课程问答、智能客服、AI 口语陪练等场景接入 DeepSeek / GPT - **接 CRM / 企微**：把学员线索同步到企业微信，做私域运营 - **多租户 SaaS 化**：通过 `tenant_id` 隔离数据，做成平台模式对外招商 - **直播带货**：结合 WebRTC 低延迟直播，做课程+带货双轮驱动 - **跨端数据打通**：利用微信开放平台的 unionid 机制，让公众号、小程序、APP 的用户体系归一
