企业官网建设流程全解析

开源地址：https://gitee.com/tuzhi-open/tuzhi-mobile-open

凸知（Tuzhi）是一套完整的知识付费解决方案，支持私有化部署，覆盖课程售卖、直播授课、圈子社区、考试测评、分销营销、实物商品等完整业务场景，提供管理后台、移动端（H5 / 微信小程序）、PC 学员端等多端入口，帮助个人 IP、教培机构与品牌商家搭建自有卖课平台。

凸知移动端是一款基于 uni-app（Vue 2）+ TDesign 开发的知识付费移动端前端，支持H5 / 微信小程序多端编译（不支持 App 打包）。覆盖课程点播、直播、专栏、圈子社区、订单支付（前端交互）、优惠券、余额红包、考试答题等完整学习场景。

一、功能特性

• 终端覆盖：电脑端 / 微信公众号（H5）/ 微信小程序多端学习
• 课程内容：图文 / 视频 / 音频 / 专栏售卖，支持试看试听、课件资料与内容保护
• 互动教学：练习 / 考试测评 / 题库 / 试卷库 / 证书 / 表单 / 圈子社区
• 直播能力：直播授课 / 伪直播 / 回放 / 直播带货 / 送礼物 / 发红包
• 营销增长：分销推广 / 优惠券 / 每日签到 / 积分商城 / 付费会员卡 / 组合商品 / 卡密兑换
• 实物商品：商品管理 / 多规格 SKU / 限购设置 / 售后退换
• 交易支付：购物车 / 订单管理 / 余额支付 / 微信支付 / 支付宝支付
• 用户数据：用户管理 / 订阅记录 / 学习分析 / 交易分析 / 订单管理
• 系统安全：页面 DIY 装修 / 云存储 / 短信与消息推送 / 管理员权限 / 版权保护（跑马灯 / 防录屏）

界面预览：

二、系统架构

凸知是一套完整的知识付费系统，由四个部分组成：

凸知终端技术结构：

整体调用链路：移动端 / PC 学员端 / 管理后台 → 后端接口服务（{code, msg, data}协议）→ MySQL 数据库。

本仓库仅开源移动端前端源码；如需后端服务或管理后台等其余端的源码，需购买商业授权获取，详见「十一、使用许可」与授权价格。

三、技术栈

四、快速开始

环境要求：Node.js >= 14（建议 16/18）、npm

# ① 安装依赖npminstall# ② H5 开发（默认不启用 Mock，对接真实后端；如需 Mock 见「Mock 数据」）npmrun dev:h5

浏览器访问http://localhost:8080即可看到完整页面效果。

微信小程序编译：

# ③ 小程序开发模式（监听编译，产物在 dist/dev/mp-weixin）npmrun dev:mp-weixin# ④ 小程序生产构建（内置 TDesign 适配补丁，产物在 dist/build/mp-weixin）npmrun build:mp-weixin

用微信开发者工具「导入项目」选择对应产物目录（开发选dist/dev/mp-weixin，生产选dist/build/mp-weixin），并在src/manifest.json中替换为自己的 appid。

对接真实后端：

1. 修改src/siteinfo.js中的siteroot为你的后端地址；
2. 在src/common/request/api_list.js中核对接口地址与{code, msg, data}协议；
3. 微信小程序构建需在src/manifest.json中替换为自己的 appid。

五、构建

小程序构建内置 TDesign 适配补丁（scripts/），构建成功后产物在dist/build/下。

⚠️ 注意：当前版本不支持 App 打包，仅支持 H5 与微信小程序两个平台。

六、Mock 数据

• H5 开发模式（NODE_ENV=development）默认关闭，全部走真实后端接口；
• 开启方式：将src/static/config.js的enableMock改为true（显式设置优先级最高），或通过uni.setStorageSync('enableMock', true)/ 环境变量MOCK_ENABLE切换；
• 覆盖 200+ 接口，fixture 位于src/mock/data/，按module/action路由镜像；
• 未覆盖的接口自动透传真实网络并输出提示；
• Mock 数据由仓库内 mock-crawler 工具采集真实后端响应生成，发布前已做敏感字段脱敏（token/openid/手机号等）。

七、目录结构

src/ ├── pages/ 页面（index 主包 + public/app/user/order/course 五个分包，约 100+ 页面） │ ├── index/ 首页（主包唯一页面，tabBar 入口） │ ├── launch/ 启动页（加载与参数透传跳转，未在 pages.json 注册） │ ├── public/ 公共分包：登录 / 注册 / 找回密码 / 协议 / 搜索 / 消息 / 结果页等 │ ├── app/ 业务功能分包：活动 / 圈子 / 考试 / 优惠券 / 积分 / 签到 / 证书 / 分销 / 直播带货等 │ ├── user/ 用户分包：个人中心 / 资产 / 余额 / 地址 / 收藏 / 学习记录 / 订阅 / 红包等 │ ├── order/ 订单分包：订单列表 / 详情 / 提交 / 评价 / 售后 / 物流等 │ ├── course/ 课程分包：课程详情 / 分类 / 专栏 / 小组 / 直播等 │ └── template/ 页面模板（新建页面的三文件拆分参考，未在 pages.json 注册） ├── components/ 组件（tz/ 自研组件库、uview-ui、qiun-data-charts、视频播放器等） ├── common/ 公共层 │ ├── request/ 接口封装（$api 点分路由、统一鉴权/错误处理） │ ├── utils/ 工具（路由映射、支付、直播、OSS 签名等） │ ├── order/ 订单状态处理 │ └── wechat/ 微信登录/分享 SDK 封装 ├── mock/ Mock 数据（H5 开发模式默认关闭，开启方式见「六、Mock 数据」） ├── static/ 静态资源 ├── pages.json 页面路由与分包配置 └── manifest.json 应用配置（appid 等）

八、开发约定

• 页面采用xxx.vue + js.vue + css.css三文件拆分（<script src="./js.vue">+@import "./css.css"），逻辑与样式分离；
• 接口调用统一走this.$api('module.action', data)，登录态、401 跳转、错误提示由拦截器统一处理；
• 业务组件优先复用components/tz/自研组件库；
• 提交信息遵循 Conventional Commits（feat:/fix:/chore:）。