尧图网页设计 
简介知识付费系统源码是一套基于PHP开发的网校建站解决方案面向教育培训机构、内容创作者及有私域运营需求的开发者帮助低成本搭建覆盖PC端、H5、小程序和App的私有化知识付费平台。整套源码包共658个文件以613个PHP文件为主配合图片素材、JSON配置、Markdown说明等包体仅2.09MB虽然体积不大但目录结构完整前后端代码均可直接部署或二次开发。已有426人学习/下载。功能上涵盖录播直播、图文课程、考试练习等教务场景以及课程秒杀、团购、分销裂变等营销模块后台支持课程管理、数据明细、系统配置与店铺装修可快速构建从招生引流到学员管理、交易闭环的独立网校。对于具备PHP与Linux运维基础的读者这套源码是理解知识付费系统架构、扩展个性化功能的实用参考。1. 知识付费系统源码一套代码同时出四端到底意味着什么知识付费系统源码pc小程序h5app前端后台完整源码.zip这串字对两类人最有吸引力一类是手里有课程、想快速起一个商城的技术型运营者另一类是接外包、靠二次开发赚钱的技术员。标题里最值钱的不是“完整源码”这三个字而是“pc小程序h5app”这一串——同一套后端API同时供给四个前端后台管理一次上架课程四个端的数据同步刷新。我拿到这类源码的第一件事不是看课程列表有多花哨而是数目录结构一个api服务端、一个admin管理后台、一个能编译出H5/小程序/App的uniapp工程再加一个PC独立端。先把这几块的协作关系理清后面部署、改需求、修bug才不会抓瞎。这篇文章就按这四块往下拆从目录落到部署再讲我踩过的坑。2. 拆解源码包一套后端API是怎么同时喂饱PC、小程序、H5和App的常见知识付费系统的代码包不会把四个端各写一套后端那样维护成本没人扛得住。四端共用同一套API差异只出现在登录方式、支付拉起的客户端和支付回调地址这三个地方。这一章我按后端、前端、数据表三条线把目录结构讲清楚方便你拿到任意一份源码后都能快速定位改哪里。2.1 后端目录入口、控制器和支付回调放在哪里我一般先从后端目录画一张横向图。无论是ThinkPHP还是Laravel结构上都是单入口加模块化控制器。入口文件是public/index.phpNginx把不影响真实文件的请求都转发给它controller目录下面按业务模块分课程、订单、用户、支付、分销。支付回调一定是独立的比如callback/Wechat.php、callback/Alipay.php因为这个目录要接收微信/支付宝服务器发来的异步通知通知里没有登录态不能被common中间件里的登录校验拦掉。server/ ├── public/index.php # 单入口所有请求先走这里 ├── app/ │ ├── controller/ │ │ ├── api/Course.php # 课程列表、详情、章节四端共用 │ │ ├── api/Order.php # 下单、取消、订单列表 │ │ └── api/User.php # 手机号登录、资料、会员信息 │ ├── service/ │ │ ├── PayService.php # 拉起支付、查单、统一状态处理 │ │ └── CoursePermission.php # 课程/会员权限判断 │ └── callback/ │ ├── Wechat.php # 微信支付异步回调 │ └── Alipay.php # 支付宝异步回调 └── config/ └── database.php # 数据库连接配置上面的目录是常见布局不是每份源码都一样但分层逻辑不会变。controller只接收参数并返回JSON真正改订单状态的逻辑在service里这样四端调用同一个接口时行为一致。callback目录不用JWT登录只做签名和金额校验因为微信支付宝的回调是服务端到服务端不是用户发起的请求。若把回调加进需要token的中间件就会看到“支付成功但订单未更新”的怪现象——用户的回调请求被拦在校验环节根本进不了业务方法。2.2 前端三件套admin管理后台、uniapp聚合端、PC独立端前端部分通常有三个独立工程。第一个是管理后台admin技术栈常见是Vue2加ElementUI编译后部署在admin.你的域名.com只管理员访问它调用的是另一套/admin接口不开放给用户端。第二个是uniapp工程它用一套代码编译出H5、微信小程序、支付宝小程序和App用户端的主要页面都在这。第三个是PC站点很多源码里为了SEO和运营投放会单独做一个Vue项目样式偏重部署在www.你的域名.com。判断一份代码到底几个前端看根目录下的package.json或unpackage文件夹就能知道。工程目录技术栈产物典型部署位置adminVue ElementUI后台管理站点admin.example.commobileuni-appH5 / 小程序 / App 安装包H5在h5.example.com小程序走微信平台App发版pcVue Vue RouterPC商城www.example.com这里有一个关键点uniapp工程里pages.json用来定义页面路由manifest.json里声明各平台配置比如微信小程序的appid、App的包名、H5的base路径。改端的时候优先改manifest.json别在代码里到处写平台判断。常见做法是页面模板和业务逻辑只写一遍平台差异放在一个platform.js工具文件里。这样当小程序商城需要单独隐藏某些营销位时只要在该组件里加两句#ifdef MP-WEIXIN注释即可编译时其他平台会自动忽略。2.3 数据表设计课程、会员、订单怎么串起来知识付费的核心是权限数据表也围绕“谁能看哪节课”展开。课程表course存标题、封面、价格、老师id课时表lesson挂在课程下带is_trial字段表示是否试看会员表vip定义月卡季卡订单表order记录交易状态用户课程表user_course记录购买解锁关系分销表distribution记录上下级佣金。我摘一段常见的权限判断逻辑它直接决定四端能不能正常观看// app/service/CoursePermission.php public function canUserViewLesson($userId, $lessonId) { $lesson Lesson::find($lessonId); if ($lesson[is_trial] 1) { return true; // 试看课时所有人都能看 } $course Course::find($lesson[course_id]); if ($course[is_free] 1) { return true; // 免费课程无需购买 } $order Order::where(user_id, $userId) -where(course_id, $course[id]) -where(status, paid) -first(); if ($order) { return true; // 单课购买记录已支付 } $vip UserVip::where(user_id, $userId) -where(expire_at, , time()) -first(); if ($vip) { return true; // 会员在有效期内 } return false; }参数说明is_trial、is_free、status、expire_at这几个字段是知识付费系统的标配不同源码可能命名成is_try、free、pay_status拿到代码后先搜这几个词。注意最后一步的会员判断如果expire_at使用datetime类型和time()比较时要转成strtotime否则在PHP8下会报类型不匹配很多线上bug就出在这里。这个函数要同时服务于PC、H5、小程序、App所以改动它之前必须把四个端的观看接口都回归一遍。3. 后端从0跑通环境配置、数据库导入和接口自测拿到源码后第一件事不是看前端而是先让后端在一个干净环境里跑起来。后端不活四端全是空壳。下面按我自己的部署顺序来每一步都有对应的命令和判断标准。3.1 环境准备PHP版本、伪静态和Composer依赖我一般用宝塔做LNMP环境PHP开到7.4或8.0MySQL不低于5.7。打开终端先确认版本再装依赖php -v composer -V composer install --no-dev --prefer-dist每一行都有讲究php -v用来确认版本符合代码要求很多老源码在PHP8.1下会报deprecated警告我建议先按源码注释里要求的版本装composer -V确认依赖工具在最后的composer install是拉取vendor目录--no-dev跳过开发环境依赖--prefer-dist让下载用zip包而不是源码速度快不少。装完依赖后看项目里有没有.env.example有就复制cp .env.example .env php think run --port 8000php think run是ThinkPHP6起的开发服务器端口可以换。生产环境不该用这个命令跑常驻应该把站点根目录指向public并配好伪静态。Nginx里常见的配置是这样location / { if (!-e $request_filename) { rewrite ^(.*)$ /index.php?s$1 last; } }这段伪静态的作用是把所有不存在真实文件的请求交给index.php处理让前端访问/course/detail/12这样的URL时能找到API。如果省略这段你会发现后端接口直接404。参数说明rewrite里的$1会捕获请求路径再作为s参数传给FastCGI这是ThinkPHP、Laravel类项目的通用做法。3.2 数据库导入与.env配置从SQL到后台登录后端能启动之后要把数据库结构导入进去。源码包里通常会带一个install.sql或init.sql有的是/admin/install目录在线安装。我习惯先用命令行导入mysql -u root -p install.sql注意如果线上MySQL账号不允许root远程登录先登录MySQL把数据库创建好再指定数据库导入mysql -u root -p -e CREATE DATABASE IF NOT EXISTS knowledge_edu DEFAULT CHARACTER SET utf8mb4; mysql -u root -p knowledge_edu install.sql导入成功后改.env里的数据库段DB_HOST127.0.0.1 DB_PORT3306 DB_DATABASEknowledge_edu DB_USERNAMEedu_root DB_PASSWORD改成你的复杂密码 DB_PREFIXedu_ JWT_SECRET请用openssl rand -base64 32生成参数说明DB_PREFIX必须和install.sql里的表前缀一致比如edu_course、edu_order不一致时后端会报“表不存在”。JWT_SECRET是登录token的签名钥匙不换的话任何人都可以伪造token这个字段我每次部署都强制改成随机字符串。改好后启动ThinkPHP开发服务访问http://127.0.0.1:8000/admin能进入后台登录页就算成功。默认账号通常是admin/admin123登录后第一件事改密码和后台路径别用默认路径裸奔。3.3 用命令行自测三个核心接口登录、课程列表、下单后台通了不代表用户端接口通了我用curl把三个关键接口调一遍确认token链路没问题。下面是模拟移动端请求的脚本BASEhttp://127.0.0.1:8000/api # 1. 登录拿到token curl -X POST $BASE/login \ -H Content-Type: application/json \ -d {mobile:13800138000,code:1234} # 2. 带token获取课程列表 TOKEN把上面返回的token粘到这里 curl -X GET $BASE/course/list \ -H Authorization: Bearer $TOKEN # 3. 创建订单client_type标识是h5 curl -X POST $BASE/order/create \ -H Authorization: Bearer $TOKEN \ -H Content-Type: application/json \ -d {course_id:1,client_type:h5}这三个请求对应了知识付费系统最核心的用户动线登录、浏览、下单。第一步返回里通常有token和用户信息如果code返回401说明校验码不正确测试环境一般有万能码或者关闭短信发送的开关去配置里找“sms_debug”。第二步必须带头否则后端会返回未登录这一步能确认中间件对四端是共用的。第三步的client_type参数我特意写清楚因为后端要根据它选择支付通道——h5走公众号支付mp-weixin走微信小程序支付app走App支付pc可能扫码。这个参数错了拉起支付时就会出现“当前环境不支持”之类的问题。4. 多端分发uniapp编译到H5、小程序和App以及PC端的部署后端活了接下来把前端变成真实可访问的四端。这套源码的价值就在于改动同一份uniapp代码用一个发布命令得到三种产物再配合PC独立工程组成完整矩阵。这一章讲每个端怎么编出来以及最容易踩的配置项。4.1 H5和PC路由模式与静态资源路径的调整uniapp工程编译H5关键在于manifest.json里的h5配置。我见过太多人直接在HBuilderX里运行发布到服务器后二级页面刷新一片白其实就是base和publicPath没设对。{ h5: { router: { base: /h5/ }, publicPath: https://static.yourdomain.com/h5/, devServer: { port: 8080 } } }参数说明base决定编译产物挂在哪个子路径服务器上如果你把H5放在子目录就必须保持一致publicPath是独立出来的静态资源域名能减轻主站带宽压力。如果简单部署publicPath可以设成相对路径./但要注意页面路由是hash还是historyhistory模式下相对路径会失效。编译命令是npm run build:h5编译产物在dist/build/h5里把整个目录丢到服务器的h5目录下。PC端如果是独立Vue工程它不经过uniapp直接用常规npm run build部署到/www/pc然后做Nginx回退配置location / { try_files $uri $uri/ /index.html last; }这行的意思是请求的文件存在就返回文件不存在就返回index.html让Vue Router接管路由。没有这段PC端用户每次按F5刷新商品详情页都会看到404这是PC端最容易被投诉的体验问题。4.2 微信小程序从开发者工具导入到获取手机号登录编译小程序前先确认manifest.json里的mp-weixin节点填了正确的appid。然后执行npm run build:mp-weixin产物在dist/build/mp-weixin。打开微信开发者工具选择“导入项目”目录指向这个文件夹appid用线上真实appid。开发阶段会在工具详情里勾选“不校验合法域名”但到真机预览时必须勾掉否则会被拦截。现在微信不支持前端直接拿手机号了登录必须走button的getPhoneNumber能力button open-typegetPhoneNumber getphonenumberhandlePhoneNumber 微信一键登录 /buttonmethods: { handlePhoneNumber(e) { if (e.detail.errMsg ! getPhoneNumber:ok) { uni.showToast({ title: 需要授权手机号, icon: none }); return; } uni.login({ provider: weixin, success: (res) { // res.code是微信登录凭证e.detail.code是手机号授权凭证 this.loginByWechat(res.code, e.detail.code); } }); } }逻辑说明第一步判断用户是否同意授权第二步调用uni.login拿到临时code第三步把两个code一起提交后端。后端拿res.code去微信的code2Session换openid再拿e.detail.code调用手机号换取接口得到用户手机号后建号登录。老代码里如果直接用getUserInfo接口取手机号基本都失效了——这是微信从2022年起收紧的规则拿到这套源码后先检查登录页是不是老写法是的话必须改成上面这套。4.3 App端云打包与异常机型适配App端的产物不是浏览器能打开的页面而是安装包。uniapp工程在HBuilderX里选择“发行-云打包”填好Android包名和证书。测试阶段用一种过的公共测试证书上架前再换正式签名否则用户要从老包升级到新包时会报签名不一致。知识付费App端经常需要自定义导航栏这里有一个和微信小程序共通的坑顶部导航栏高度因机型而异刘海屏、挖孔屏、胶囊按钮位置不一样。直接用固定像素布局在iPhone 14 Pro上会把标题顶到状态栏。做法是给布局加上安全区适配.header-nav { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); }constant是旧iOS写法env是新写法两条都写才能兼容。如果是微信小程序里的自定义导航栏更稳妥的做法是调用uni.getMenuButtonBoundingClientRect()拿胶囊按钮位置再反推状态栏高度动态设置导航栏的高度和padding。这个参数在真机和开发者工具里结果不同必须真机调试来验证。App端还有一类问题来自于原生插件直播、推送、分享这些功能在uniapp里要对应原生SDK云打包的时候如果没有在manifest里填上申请的key打包能出但调用时会静默失败。5. 部署上线避坑支付回调、白屏、域名与防盗链的4个教训这套系统我完整部署过多次最大的成本不是搭环境而是支付和播放两条链路。下面四条是我踩过并且回头改过的坑每个都按现象、原因、解决顺序写遇到类似的线上报障可以直接照这来。5.1 支付回调不通用户付了钱订单卡在“未支付”现象小程序里微信付款成功后台订单状态仍然是待支付课程也不解锁用户反复点击支付。原因最常见是回调地址不可达。微信支付要求回调地址必须是公网可访问的HTTPS地址裸IP或局域网地址会被腾讯直接拒。另一种情况是回调目录放在了登录鉴权中间件后面微信服务器的请求没有用户token在鉴权这一层就被拦截业务代码根本收不到。还有一种容易忽略的宝塔开启了防火墙没放行Https端口回调请求到不了Nginx。解决先看Nginx访问日志和PHP日志确认有没有来自微信的POST请求。再检查回调路由是否在中间件白名单里。最后用收款商户平台里的“支付回调通知”工具重发一次看后端是否返回了XML里的SUCCESS字样。大多数源码在回调地址配置处都有日志开关部署时把日志打开调试完再关。如果你接的是App支付还要检查PayService里是否有专门处理App支付回调的分支因为App支付的回调报文里多了一个attach字段旧源码没解析就会出现客户已支付但系统没更新。5.2 H5刷新白屏路由模式导致404现象H5商城首页能打开点进课程详情再点刷新页面一片空白URL显示404。原因H5部署时用了history路由但服务器没有把不存在的路径回退到index.html。刷新时请求/course/1服务器找不到这个文件返回404页面前端没有机会接管路由。解决Nginx给H5站点加try_files回退位置在上一章的Nginx配置里已经写过。如果是Apache在.htaccess里加RewriteRule ^(.*)$ /index.html [L]。排查时先在浏览器控制台看网络请求如果刷新时是200但页面空白那就是JS报错如果是404那就直接看路由回退。顺带提一个隐藏问题如果H5部署在子目录而manifest里的base没跟子目录一致一样会404这个要一起排查。5.3 小程序真机连不上开发者工具正常手机全挂现象在微信开发者工具里接口调得通数据正常一扫码真机预览所有请求都报request:fail或网络异常。原因开发工具勾了“不校验合法域名”帮你绕过了域名白名单真机上没有这个特权。小程序正式环境要求request合法域名是HTTPS且备案并且在该小程序的mp后台里配过。很多源码演示包里让开发者把“不校验”打开放到真机就翻车。如果用了uniapp的web-view嵌套H5web-view的业务域名也要单独配置否则真机白屏。解决在微信公众平台开发设置里配置服务器域名request合法域名填API的域名uploadFile合法域名填文件上传域名downloadFile合法域名填课程视频/附件域名。域名都必须备案且SSL证书正确。开发调试时用“小程序账号”是没问题的但别拿演示账号冒充正式AppID否则支付、手机号登录全部受限。5.4 视频防盗链把小程序播放器挡在门外现象课程视频在H5上播放正常在微信小程序里黑屏或报MEDIA_ERR_NETWORK。原因知识付费的课程视频大多放阿里云OSS或腾讯云VOD开了Referer防盗链。H5的Referer是yourdomain.com被白名单放行而微信小程序video组件的网络环境不一样Referer是servicewechat.com或者根本没有被防盗链拦截。有些源码的视频地址是后端重定向到OSS的重定向时Referer会带上源站的域名导致小程序的白名单判断失效。解决在视频存储侧把servicewechat.com加进Referer白名单。如果是App端还要在manifest里配置web-view的域名白名单或者使用原生播放器插件绕过浏览器环境的Referer限制。如果是后端重定向把重定向URL改成直接返回302的模式OSS白名单里同时加servicewechat.com。另外注意播放器的视频地址如果有时效签名小程序端要确保后端返回的新签名链接没被缓存否则过期后同样黑屏。6. 上线验证用抓包工具把微信支付回调从头跑到尾最后一步不是“跑通了”而是“验证过真的能收到钱”。我每次接手知识付费系统都会用Charles在手机端抓一次完整的支付回调再用curl模拟一次服务端回调确认订单状态切换可靠。第一步手机和电脑连同一局域网手机代理设为电脑IP和Charles监听端口安装Charles证书到信任列表。把小程序调成调试模式进入支付环节但先不付款。Charles里过滤https找到微信支付Notify请求保存到本地。第二步用curl模拟微信回调的内容把它POST到后端回调地址curl -X POST https://api.yourdomain.com/callback/wechat \ -H Content-Type: application/json \ -d {out_trade_no:20250101120000,transaction_id:420000123,total_fee:9900,result_code:SUCCESS,sign:把抓包里的sign原样填进来}这一步的意义是不需要真的一笔笔付款就能回归后端处理逻辑。如果返回里没有“SUCCESS”说明回调业务没走通去查日志里是签名校验失败还是订单查询失败。有些源码对sign的校验依赖商户密钥模拟时可以把校验临时关掉验证基础流程再开回来测签名。我自己的教训是第一次测回调时直接拿明文data去POST结果一直被签名校验弹回来我还以为是回调地址错了查了半小时才发现压根没带sign。后来养成的习惯是任何支付改动先用抓包拿真实报文再拿真实报文改参数做回归。这套习惯让我在几个项目里都避开了线上支付翻车。希望帮到你。本文还有配套的精品资源点击获取 知识付费系统源码实战：多端统一API与部署避坑全指南
简介知识付费系统源码是一套基于PHP开发的网校建站解决方案面向教育培训机构、内容创作者及有私域运营需求的开发者帮助低成本搭建覆盖PC端、H5、小程序和App的私有化知识付费平台。整套源码包共658个文件以613个PHP文件为主配合图片素材、JSON配置、Markdown说明等包体仅2.09MB虽然体积不大但目录结构完整前后端代码均可直接部署或二次开发。已有426人学习/下载。功能上涵盖录播直播、图文课程、考试练习等教务场景以及课程秒杀、团购、分销裂变等营销模块后台支持课程管理、数据明细、系统配置与店铺装修可快速构建从招生引流到学员管理、交易闭环的独立网校。对于具备PHP与Linux运维基础的读者这套源码是理解知识付费系统架构、扩展个性化功能的实用参考。1. 知识付费系统源码一套代码同时出四端到底意味着什么知识付费系统源码pc小程序h5app前端后台完整源码.zip这串字对两类人最有吸引力一类是手里有课程、想快速起一个商城的技术型运营者另一类是接外包、靠二次开发赚钱的技术员。标题里最值钱的不是“完整源码”这三个字而是“pc小程序h5app”这一串——同一套后端API同时供给四个前端后台管理一次上架课程四个端的数据同步刷新。我拿到这类源码的第一件事不是看课程列表有多花哨而是数目录结构一个api服务端、一个admin管理后台、一个能编译出H5/小程序/App的uniapp工程再加一个PC独立端。先把这几块的协作关系理清后面部署、改需求、修bug才不会抓瞎。这篇文章就按这四块往下拆从目录落到部署再讲我踩过的坑。2. 拆解源码包一套后端API是怎么同时喂饱PC、小程序、H5和App的常见知识付费系统的代码包不会把四个端各写一套后端那样维护成本没人扛得住。四端共用同一套API差异只出现在登录方式、支付拉起的客户端和支付回调地址这三个地方。这一章我按后端、前端、数据表三条线把目录结构讲清楚方便你拿到任意一份源码后都能快速定位改哪里。2.1 后端目录入口、控制器和支付回调放在哪里我一般先从后端目录画一张横向图。无论是ThinkPHP还是Laravel结构上都是单入口加模块化控制器。入口文件是public/index.phpNginx把不影响真实文件的请求都转发给它controller目录下面按业务模块分课程、订单、用户、支付、分销。支付回调一定是独立的比如callback/Wechat.php、callback/Alipay.php因为这个目录要接收微信/支付宝服务器发来的异步通知通知里没有登录态不能被common中间件里的登录校验拦掉。server/ ├── public/index.php # 单入口所有请求先走这里 ├── app/ │ ├── controller/ │ │ ├── api/Course.php # 课程列表、详情、章节四端共用 │ │ ├── api/Order.php # 下单、取消、订单列表 │ │ └── api/User.php # 手机号登录、资料、会员信息 │ ├── service/ │ │ ├── PayService.php # 拉起支付、查单、统一状态处理 │ │ └── CoursePermission.php # 课程/会员权限判断 │ └── callback/ │ ├── Wechat.php # 微信支付异步回调 │ └── Alipay.php # 支付宝异步回调 └── config/ └── database.php # 数据库连接配置上面的目录是常见布局不是每份源码都一样但分层逻辑不会变。controller只接收参数并返回JSON真正改订单状态的逻辑在service里这样四端调用同一个接口时行为一致。callback目录不用JWT登录只做签名和金额校验因为微信支付宝的回调是服务端到服务端不是用户发起的请求。若把回调加进需要token的中间件就会看到“支付成功但订单未更新”的怪现象——用户的回调请求被拦在校验环节根本进不了业务方法。2.2 前端三件套admin管理后台、uniapp聚合端、PC独立端前端部分通常有三个独立工程。第一个是管理后台admin技术栈常见是Vue2加ElementUI编译后部署在admin.你的域名.com只管理员访问它调用的是另一套/admin接口不开放给用户端。第二个是uniapp工程它用一套代码编译出H5、微信小程序、支付宝小程序和App用户端的主要页面都在这。第三个是PC站点很多源码里为了SEO和运营投放会单独做一个Vue项目样式偏重部署在www.你的域名.com。判断一份代码到底几个前端看根目录下的package.json或unpackage文件夹就能知道。工程目录技术栈产物典型部署位置adminVue ElementUI后台管理站点admin.example.commobileuni-appH5 / 小程序 / App 安装包H5在h5.example.com小程序走微信平台App发版pcVue Vue RouterPC商城www.example.com这里有一个关键点uniapp工程里pages.json用来定义页面路由manifest.json里声明各平台配置比如微信小程序的appid、App的包名、H5的base路径。改端的时候优先改manifest.json别在代码里到处写平台判断。常见做法是页面模板和业务逻辑只写一遍平台差异放在一个platform.js工具文件里。这样当小程序商城需要单独隐藏某些营销位时只要在该组件里加两句#ifdef MP-WEIXIN注释即可编译时其他平台会自动忽略。2.3 数据表设计课程、会员、订单怎么串起来知识付费的核心是权限数据表也围绕“谁能看哪节课”展开。课程表course存标题、封面、价格、老师id课时表lesson挂在课程下带is_trial字段表示是否试看会员表vip定义月卡季卡订单表order记录交易状态用户课程表user_course记录购买解锁关系分销表distribution记录上下级佣金。我摘一段常见的权限判断逻辑它直接决定四端能不能正常观看// app/service/CoursePermission.php public function canUserViewLesson($userId, $lessonId) { $lesson Lesson::find($lessonId); if ($lesson[is_trial] 1) { return true; // 试看课时所有人都能看 } $course Course::find($lesson[course_id]); if ($course[is_free] 1) { return true; // 免费课程无需购买 } $order Order::where(user_id, $userId) -where(course_id, $course[id]) -where(status, paid) -first(); if ($order) { return true; // 单课购买记录已支付 } $vip UserVip::where(user_id, $userId) -where(expire_at, , time()) -first(); if ($vip) { return true; // 会员在有效期内 } return false; }参数说明is_trial、is_free、status、expire_at这几个字段是知识付费系统的标配不同源码可能命名成is_try、free、pay_status拿到代码后先搜这几个词。注意最后一步的会员判断如果expire_at使用datetime类型和time()比较时要转成strtotime否则在PHP8下会报类型不匹配很多线上bug就出在这里。这个函数要同时服务于PC、H5、小程序、App所以改动它之前必须把四个端的观看接口都回归一遍。3. 后端从0跑通环境配置、数据库导入和接口自测拿到源码后第一件事不是看前端而是先让后端在一个干净环境里跑起来。后端不活四端全是空壳。下面按我自己的部署顺序来每一步都有对应的命令和判断标准。3.1 环境准备PHP版本、伪静态和Composer依赖我一般用宝塔做LNMP环境PHP开到7.4或8.0MySQL不低于5.7。打开终端先确认版本再装依赖php -v composer -V composer install --no-dev --prefer-dist每一行都有讲究php -v用来确认版本符合代码要求很多老源码在PHP8.1下会报deprecated警告我建议先按源码注释里要求的版本装composer -V确认依赖工具在最后的composer install是拉取vendor目录--no-dev跳过开发环境依赖--prefer-dist让下载用zip包而不是源码速度快不少。装完依赖后看项目里有没有.env.example有就复制cp .env.example .env php think run --port 8000php think run是ThinkPHP6起的开发服务器端口可以换。生产环境不该用这个命令跑常驻应该把站点根目录指向public并配好伪静态。Nginx里常见的配置是这样location / { if (!-e $request_filename) { rewrite ^(.*)$ /index.php?s$1 last; } }这段伪静态的作用是把所有不存在真实文件的请求交给index.php处理让前端访问/course/detail/12这样的URL时能找到API。如果省略这段你会发现后端接口直接404。参数说明rewrite里的$1会捕获请求路径再作为s参数传给FastCGI这是ThinkPHP、Laravel类项目的通用做法。3.2 数据库导入与.env配置从SQL到后台登录后端能启动之后要把数据库结构导入进去。源码包里通常会带一个install.sql或init.sql有的是/admin/install目录在线安装。我习惯先用命令行导入mysql -u root -p install.sql注意如果线上MySQL账号不允许root远程登录先登录MySQL把数据库创建好再指定数据库导入mysql -u root -p -e CREATE DATABASE IF NOT EXISTS knowledge_edu DEFAULT CHARACTER SET utf8mb4; mysql -u root -p knowledge_edu install.sql导入成功后改.env里的数据库段DB_HOST127.0.0.1 DB_PORT3306 DB_DATABASEknowledge_edu DB_USERNAMEedu_root DB_PASSWORD改成你的复杂密码 DB_PREFIXedu_ JWT_SECRET请用openssl rand -base64 32生成参数说明DB_PREFIX必须和install.sql里的表前缀一致比如edu_course、edu_order不一致时后端会报“表不存在”。JWT_SECRET是登录token的签名钥匙不换的话任何人都可以伪造token这个字段我每次部署都强制改成随机字符串。改好后启动ThinkPHP开发服务访问http://127.0.0.1:8000/admin能进入后台登录页就算成功。默认账号通常是admin/admin123登录后第一件事改密码和后台路径别用默认路径裸奔。3.3 用命令行自测三个核心接口登录、课程列表、下单后台通了不代表用户端接口通了我用curl把三个关键接口调一遍确认token链路没问题。下面是模拟移动端请求的脚本BASEhttp://127.0.0.1:8000/api # 1. 登录拿到token curl -X POST $BASE/login \ -H Content-Type: application/json \ -d {mobile:13800138000,code:1234} # 2. 带token获取课程列表 TOKEN把上面返回的token粘到这里 curl -X GET $BASE/course/list \ -H Authorization: Bearer $TOKEN # 3. 创建订单client_type标识是h5 curl -X POST $BASE/order/create \ -H Authorization: Bearer $TOKEN \ -H Content-Type: application/json \ -d {course_id:1,client_type:h5}这三个请求对应了知识付费系统最核心的用户动线登录、浏览、下单。第一步返回里通常有token和用户信息如果code返回401说明校验码不正确测试环境一般有万能码或者关闭短信发送的开关去配置里找“sms_debug”。第二步必须带头否则后端会返回未登录这一步能确认中间件对四端是共用的。第三步的client_type参数我特意写清楚因为后端要根据它选择支付通道——h5走公众号支付mp-weixin走微信小程序支付app走App支付pc可能扫码。这个参数错了拉起支付时就会出现“当前环境不支持”之类的问题。4. 多端分发uniapp编译到H5、小程序和App以及PC端的部署后端活了接下来把前端变成真实可访问的四端。这套源码的价值就在于改动同一份uniapp代码用一个发布命令得到三种产物再配合PC独立工程组成完整矩阵。这一章讲每个端怎么编出来以及最容易踩的配置项。4.1 H5和PC路由模式与静态资源路径的调整uniapp工程编译H5关键在于manifest.json里的h5配置。我见过太多人直接在HBuilderX里运行发布到服务器后二级页面刷新一片白其实就是base和publicPath没设对。{ h5: { router: { base: /h5/ }, publicPath: https://static.yourdomain.com/h5/, devServer: { port: 8080 } } }参数说明base决定编译产物挂在哪个子路径服务器上如果你把H5放在子目录就必须保持一致publicPath是独立出来的静态资源域名能减轻主站带宽压力。如果简单部署publicPath可以设成相对路径./但要注意页面路由是hash还是historyhistory模式下相对路径会失效。编译命令是npm run build:h5编译产物在dist/build/h5里把整个目录丢到服务器的h5目录下。PC端如果是独立Vue工程它不经过uniapp直接用常规npm run build部署到/www/pc然后做Nginx回退配置location / { try_files $uri $uri/ /index.html last; }这行的意思是请求的文件存在就返回文件不存在就返回index.html让Vue Router接管路由。没有这段PC端用户每次按F5刷新商品详情页都会看到404这是PC端最容易被投诉的体验问题。4.2 微信小程序从开发者工具导入到获取手机号登录编译小程序前先确认manifest.json里的mp-weixin节点填了正确的appid。然后执行npm run build:mp-weixin产物在dist/build/mp-weixin。打开微信开发者工具选择“导入项目”目录指向这个文件夹appid用线上真实appid。开发阶段会在工具详情里勾选“不校验合法域名”但到真机预览时必须勾掉否则会被拦截。现在微信不支持前端直接拿手机号了登录必须走button的getPhoneNumber能力button open-typegetPhoneNumber getphonenumberhandlePhoneNumber 微信一键登录 /buttonmethods: { handlePhoneNumber(e) { if (e.detail.errMsg ! getPhoneNumber:ok) { uni.showToast({ title: 需要授权手机号, icon: none }); return; } uni.login({ provider: weixin, success: (res) { // res.code是微信登录凭证e.detail.code是手机号授权凭证 this.loginByWechat(res.code, e.detail.code); } }); } }逻辑说明第一步判断用户是否同意授权第二步调用uni.login拿到临时code第三步把两个code一起提交后端。后端拿res.code去微信的code2Session换openid再拿e.detail.code调用手机号换取接口得到用户手机号后建号登录。老代码里如果直接用getUserInfo接口取手机号基本都失效了——这是微信从2022年起收紧的规则拿到这套源码后先检查登录页是不是老写法是的话必须改成上面这套。4.3 App端云打包与异常机型适配App端的产物不是浏览器能打开的页面而是安装包。uniapp工程在HBuilderX里选择“发行-云打包”填好Android包名和证书。测试阶段用一种过的公共测试证书上架前再换正式签名否则用户要从老包升级到新包时会报签名不一致。知识付费App端经常需要自定义导航栏这里有一个和微信小程序共通的坑顶部导航栏高度因机型而异刘海屏、挖孔屏、胶囊按钮位置不一样。直接用固定像素布局在iPhone 14 Pro上会把标题顶到状态栏。做法是给布局加上安全区适配.header-nav { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top); }constant是旧iOS写法env是新写法两条都写才能兼容。如果是微信小程序里的自定义导航栏更稳妥的做法是调用uni.getMenuButtonBoundingClientRect()拿胶囊按钮位置再反推状态栏高度动态设置导航栏的高度和padding。这个参数在真机和开发者工具里结果不同必须真机调试来验证。App端还有一类问题来自于原生插件直播、推送、分享这些功能在uniapp里要对应原生SDK云打包的时候如果没有在manifest里填上申请的key打包能出但调用时会静默失败。5. 部署上线避坑支付回调、白屏、域名与防盗链的4个教训这套系统我完整部署过多次最大的成本不是搭环境而是支付和播放两条链路。下面四条是我踩过并且回头改过的坑每个都按现象、原因、解决顺序写遇到类似的线上报障可以直接照这来。5.1 支付回调不通用户付了钱订单卡在“未支付”现象小程序里微信付款成功后台订单状态仍然是待支付课程也不解锁用户反复点击支付。原因最常见是回调地址不可达。微信支付要求回调地址必须是公网可访问的HTTPS地址裸IP或局域网地址会被腾讯直接拒。另一种情况是回调目录放在了登录鉴权中间件后面微信服务器的请求没有用户token在鉴权这一层就被拦截业务代码根本收不到。还有一种容易忽略的宝塔开启了防火墙没放行Https端口回调请求到不了Nginx。解决先看Nginx访问日志和PHP日志确认有没有来自微信的POST请求。再检查回调路由是否在中间件白名单里。最后用收款商户平台里的“支付回调通知”工具重发一次看后端是否返回了XML里的SUCCESS字样。大多数源码在回调地址配置处都有日志开关部署时把日志打开调试完再关。如果你接的是App支付还要检查PayService里是否有专门处理App支付回调的分支因为App支付的回调报文里多了一个attach字段旧源码没解析就会出现客户已支付但系统没更新。5.2 H5刷新白屏路由模式导致404现象H5商城首页能打开点进课程详情再点刷新页面一片空白URL显示404。原因H5部署时用了history路由但服务器没有把不存在的路径回退到index.html。刷新时请求/course/1服务器找不到这个文件返回404页面前端没有机会接管路由。解决Nginx给H5站点加try_files回退位置在上一章的Nginx配置里已经写过。如果是Apache在.htaccess里加RewriteRule ^(.*)$ /index.html [L]。排查时先在浏览器控制台看网络请求如果刷新时是200但页面空白那就是JS报错如果是404那就直接看路由回退。顺带提一个隐藏问题如果H5部署在子目录而manifest里的base没跟子目录一致一样会404这个要一起排查。5.3 小程序真机连不上开发者工具正常手机全挂现象在微信开发者工具里接口调得通数据正常一扫码真机预览所有请求都报request:fail或网络异常。原因开发工具勾了“不校验合法域名”帮你绕过了域名白名单真机上没有这个特权。小程序正式环境要求request合法域名是HTTPS且备案并且在该小程序的mp后台里配过。很多源码演示包里让开发者把“不校验”打开放到真机就翻车。如果用了uniapp的web-view嵌套H5web-view的业务域名也要单独配置否则真机白屏。解决在微信公众平台开发设置里配置服务器域名request合法域名填API的域名uploadFile合法域名填文件上传域名downloadFile合法域名填课程视频/附件域名。域名都必须备案且SSL证书正确。开发调试时用“小程序账号”是没问题的但别拿演示账号冒充正式AppID否则支付、手机号登录全部受限。5.4 视频防盗链把小程序播放器挡在门外现象课程视频在H5上播放正常在微信小程序里黑屏或报MEDIA_ERR_NETWORK。原因知识付费的课程视频大多放阿里云OSS或腾讯云VOD开了Referer防盗链。H5的Referer是yourdomain.com被白名单放行而微信小程序video组件的网络环境不一样Referer是servicewechat.com或者根本没有被防盗链拦截。有些源码的视频地址是后端重定向到OSS的重定向时Referer会带上源站的域名导致小程序的白名单判断失效。解决在视频存储侧把servicewechat.com加进Referer白名单。如果是App端还要在manifest里配置web-view的域名白名单或者使用原生播放器插件绕过浏览器环境的Referer限制。如果是后端重定向把重定向URL改成直接返回302的模式OSS白名单里同时加servicewechat.com。另外注意播放器的视频地址如果有时效签名小程序端要确保后端返回的新签名链接没被缓存否则过期后同样黑屏。6. 上线验证用抓包工具把微信支付回调从头跑到尾最后一步不是“跑通了”而是“验证过真的能收到钱”。我每次接手知识付费系统都会用Charles在手机端抓一次完整的支付回调再用curl模拟一次服务端回调确认订单状态切换可靠。第一步手机和电脑连同一局域网手机代理设为电脑IP和Charles监听端口安装Charles证书到信任列表。把小程序调成调试模式进入支付环节但先不付款。Charles里过滤https找到微信支付Notify请求保存到本地。第二步用curl模拟微信回调的内容把它POST到后端回调地址curl -X POST https://api.yourdomain.com/callback/wechat \ -H Content-Type: application/json \ -d {out_trade_no:20250101120000,transaction_id:420000123,total_fee:9900,result_code:SUCCESS,sign:把抓包里的sign原样填进来}这一步的意义是不需要真的一笔笔付款就能回归后端处理逻辑。如果返回里没有“SUCCESS”说明回调业务没走通去查日志里是签名校验失败还是订单查询失败。有些源码对sign的校验依赖商户密钥模拟时可以把校验临时关掉验证基础流程再开回来测签名。我自己的教训是第一次测回调时直接拿明文data去POST结果一直被签名校验弹回来我还以为是回调地址错了查了半小时才发现压根没带sign。后来养成的习惯是任何支付改动先用抓包拿真实报文再拿真实报文改参数做回归。这套习惯让我在几个项目里都避开了线上支付翻车。希望帮到你。本文还有配套的精品资源点击获取