uni-app实战在线教育小程序H5/APP：从入门到全平台发布
在移动互联网流量红利见顶的今天，如何以最低的开发成本覆盖最大的用户群体，成为所有教育科技从业者关注的焦点。传统的原生开发模式耗时耗力，而H5又受限于性能与体验。uni-app凭借其“一套代码，多端运行”的核心优势，已成为实现这一目标的最优解。本课程专为希望快速掌握跨平台开发、构建高质量在线教育应用的开发者与创业者设计，旨在通过一个完整的实战项目，带你从零搭建具备商业价值的教育类小程序、H5及App。
本课程无需深厚的原生开发背景，适合具备基础Web前端知识（HTML/CSS/JavaScript）的学习者入门。课程采用循序渐进的实战教学路线：首先深入解析uni-app的工程架构与多端运行机制，帮助你建立清晰的开发思维。你将首先完成项目初始化配置，重点攻克TabBar的全局导航栏设计与配置，这是构建复杂应用信息架构的基础。
随后，课程将带你走进应用的核心页面——首页。在这里，你不仅学习如何实现精美的幻灯片轮播图以提升用户留存，更将深入掌握导航栏的动态配置以及搜索框的交互逻辑，让应用第一时间给用户留下专业、友好的印象。进阶部分聚焦于数据驱动视图的开发技巧。针对在线教育内容密集的特点，课程详细拆解了课程列表的接口对接与数据渲染流程，并通过高强度的样式实现训练，让你彻底精通Flex布局与样式重构，解决多端样式兼容这一最大难题。在课程分类页的开发中，你将体验到经典的“左右联动”交互模式：左侧一级分类与右侧内容区域实时联动，这种高频使用的UI组件将为你未来的复杂页面开发奠定坚实基础。
此外，课程还涵盖了用户登录注册等关键业务流程，确保应用具备完整的用户体系闭环。通过本项目的历练，你将不再局限于单一平台，而是具备独立交付多端在线教育产品的核心竞争力。学完本课程后，你将能够独立完成一个涵盖首页、分类、课程详情及用户体系的完整教育类应用开发，真正掌握uni-app跨平台开发的实战技能，为职业发展或创业落地提供强有力的技术支撑。
课程目录
1-1 [uni-app课程实战介绍] uni-app实战开发课程介绍 (05:11) 2-1 [项目创建各平台运行以及tabBar] 项目创建各平台运行及tabBar创建 (13:38) 3-1 [uni-app实战项目首页] uni-app实战导航栏以及搜索框 (09:04) 3-2 [uni-app实战项目首页] uni-app实战幻灯片展示 (13:14) 3-3 [uni-app实战项目首页] uni-app实战之课程列表数据展示 (08:53) 3-4 [uni-app实战项目首页] uni-app实战课程列表样式实现 (32:52) 4-1 [uni-app实战课程分类页面] 课程分类左边导航 (20:50) 4-2 [uni-app实战课程分类页面] 课程分类右边课程列表展示 (20:50) 5-1 [uni-app用户登录注册页面] 用户注册页面样式处理 (14:29) 5-2 [uni-app用户登录注册页面] 表单数据合法验证以及登录页面 (25:43) 6-1 [uni-app课程详情页面] 课程详情创建以及课程图片展示 (09:08) 6-2 [uni-app课程详情页面] 课程详情tab点击 (08:36) 6-3 [uni-app课程详情页面] tab点击和滑动改变展示内容 (09:09) 6-4 [uni-app课程详情页面] 根据展示内容动态调整swiper高度 (14:57) 6-5 [uni-app课程详情页面] 滑动tab固定在顶部 (27:36) 7-1 [uni-app实战课程介绍以及课程评论组件] 课程介绍组件样式1 (16:51) 7-2 [uni-app实战课程介绍以及课程评论组件] 课程介绍组件样式2 (18:25) 7-3 [uni-app实战课程介绍以及课程评论组件] 课程评论组件样式1 (12:45) 7-4 [uni-app实战课程介绍以及课程评论组件] 课程评论组件样式2 (10:10) 7-5 [uni-app实战课程介绍以及课程评论组件] 课程评论组件样式3 (27:32) 7-6 [uni-app实战课程介绍以及课程评论组件] 课程详情目录展示 (14:08) 7-7 [uni-app实战课程介绍以及课程评论组件] 课程目录标题样式 (20:49) 7-8 [uni-app实战课程介绍以及课程评论组件] 课程目录标题点击播放视频 (16:54) 7-9 [uni-app实战课程介绍以及课程评论组件] 课程详情页面footer商品购买 (08:06) 8-1 [uni-app实战订单支付页面] 订单支付页面(1) (16:16) 8-2 [uni-app实战订单支付页面] 订单支付页面(2) (17:46) 9-1 [uni-app实战用户中心] 用户中心登录和未登录处理 (19:18) 9-2 [uni-app实战用户中心] 用户中心样式以及推出登录 (14:14) 9-3 [uni-app实战用户中心] 订单页面tab切换 (10:24) 9-4 [uni-app实战用户中心] 订单页面订单列表样式(1) (13:29) 9-5 [uni-app实战用户中心] 订单页面订单列表样式(2) (21:44) 9-6 [uni-app实战用户中心] 订单评价页面 (09:50) 9-7 [uni-app实战用户中心] 用户中心我的优惠券页面 (22:10) 9-8 [uni-app实战用户中心] 用户登状态定公共方法封装 (23:28) 10-1 [uni-app实战搜索页面支付成功页面] 课程搜索结果展示 (11:24) 10-2 [uni-app实战搜索页面支付成功页面] 未搜索到数据的提示组件 (07:28) 10-3 [uni-app实战搜索页面支付成功页面] 订单支付成功页面 (17:12) 11-1 [uni-app实战课程总结] 课程补充以及课程总结 (12:14)
