这门课解决什么问题：用一套代码搞定多端教育应用

很多前端开发者在接到“做一个在线教育类应用”的需求时，最头疼的不是业务逻辑，而是多端适配。老板通常要求既要有微信小程序方便裂变，又要有独立App沉淀用户，还要有H5网页做推广落地页。如果分别开发，工作量会成倍增加。这门以uni-app为核心的实战课，解决的就是这个场景下的重复造轮子问题。它聚焦于如何用一套代码同时编译出小程序、App和H5，并把业务重心放在在线教育常见的首页展示、课程分类、优惠券营销和数据交互上。对于需要快速落地多端教育产品的开发者来说，这种实战演示比单纯讲语法更直接。

适合什么基础，建议先看哪几块

这份资料不适合零基础转行者，它要求你对Vue基础语法、组件化开发思想以及常见的HTTP请求有基本了解。如果你写过普通网页但没碰过跨端框架，这门课能帮你平滑过渡。建议拿到资料后，不要从头按部就班看，先直奔“环境搭建和项目创建”以及“全局配置”这两块，把本地跑通能编译出多端的基础骨架。接着重点看“首页开发”里的轮播图、图标分类和公共列表组件。这几个模块是教育类应用复用率最高的组件，看懂了这几个核心组件的封装逻辑，整个项目的骨架你就掌握了一大半。

学完能独立做什么，资料怎么配合练习

跟着这套实战资料走完一遍，你能独立搭建出一个结构完整的在线教育前端应用。从底部的导航路由配置、首页搜索栏，到可复用的课程列表组件，再到与后端接口的数据联调，这些教育类App的高频模块你都能独立实现并打包到不同平台。在资料配合练习上，建议不要只盯着视频看，一定要跟着同步敲代码。视频里演示了如何引入自定义图标库和动画库，你在实操时可以尝试替换成自己找的图标资源，验证是否真正掌握了组件封装。当看到首页数据交互部分时，最好自己用工具模拟几个接口返回课程列表数据，把视频里的静态页面改造成动态渲染。只有自己把数据接通，才算真正把这套多端开发技能吃透。


通过学习可以独立开发APP、微信小程序、H5

课程目录

*   01 课程介绍和准备/

  *   01 课程介绍.mp4 11:09

  *   02 环境搭建和项目创建.mp4 04:26

*   02 全局样式和全局配置/

  *   01 App.vue引入全局样式.mp4 08:07

  *   02 动画库引入和使用.mp4 03:21

  *   03 引入自定义图标库.mp4 04:33

  *   04 底部导航开发.mp4 10:06

*   03 首页开发/

  *   01 首页搜索栏配置.mp4 13:16

  *   02 首页轮播图组件开发.mp4 06:49

  *   03 图标分类组件开发.mp4 09:47

  *   04 优惠券组件开发.mp4 16:09

  *   05 公共列表组件开发(1).mp4 14:33

  *   06 公共列表组件开发(2).mp4 07:06

  *   07 公共列表组件开发(3).mp4 09:30

  *   08 首页数据交互.mp4 19:02

  *   09 首页下拉刷新功能实现.mp4 03:00

  *   10 请求拦截器封装.mp4 11:15

  *   11 响应拦截器封装.mp4 16:25

  *   12 骨架屏加载优化.mp4 20:52

  *   13 首页数据交互（2）.mp4 09:53

*   04 登录注册模块开发/

  *   01 登录注册页开发（1）.mp4 12:38

  *   02 登录注册页开发（2）.mp4 18:32

  *   03 登录注册页开发（3）.mp4 03:36

  *   04 注册功能交互实现.mp4 08:53

  *   05 登录功能交互实现.mp4 12:44

  *   06 初始化用户功能实现.mp4 05:45

  *   07 验证同意隐私声明.mp4 04:53

  *   08 绑定手机号页开发（1）.mp4 08:06

  *   09 绑定手机号页开发（2）.mp4 08:30

  *   10 绑定手机号api交互（1）.mp4 07:25

  *   11 绑定手机号api交互（2）.mp4 12:59

  *   12 忘记密码页开发.mp4 03:43

  *   13 忘记密码api交互.mp4 05:35

*   05 个人中心模块开发/

  *   01 个人中心页开发（1）.mp4 15:43

  *   02 个人中心页开发（2）.mp4 10:57

  *   03 个人中心数据交互.mp4 06:40

  *   04 个人设置页开发.mp4 10:36

  *   05 退出登录功能实现.mp4 05:22

  *   06 权限验证跳转.mp4 08:39

  *   07 修改密码页功能实现.mp4 10:09

  *   08 缓存计算和清除缓存.mp4 08:30

  *   09 修改资料页开发.mp4 12:53

  *   10 上传文件功能实现.mp4 18:31

  *   11 修改资料页交互.mp4 12:02

  *   12 我的订单列表开发.mp4 12:53

  *   13 我的订单列表交互.mp4 14:31

*   06 优惠券模块开发/

  *   01 首页优惠券列表交互.mp4 11:02

  *   02 领取优惠券功能实现.mp4 05:03

  *   03 登录退出后优惠券状态处理.mp4 12:01

  *   04 我的优惠券列表开发.mp4 07:09

  *   05 我的优惠券列表交互.mp4 16:20

*   07 搜索页和列表页开发/

  *   01 搜索页开发（1）.mp4 08:41

  *   02 搜索页开发（2）.mp4 12:19

  *   03 搜索结果页开发（1）.mp4 15:58

  *   04 搜索结果页开发（2）.mp4 11:59

  *   05 搜索结果页交互.mp4 13:13

*   08 图文、音频和视频课程模块开发/

  *   01 课程详情页开发.mp4 20:32

  *   02 课程详情页交互.mp4 07:15

  *   03 图文课程详情页交互.mp4 14:00

  *   04 视频课程详情页交互.mp4 03:49

  *   05 音频课程详情页交互（1）.mp4 15:24

  *   06 音频课程详情页交互（2）.mp4 14:37

  *   07 音频课程详情页交互（3）.mp4 11:33

*   09 专栏模块开发/

  *   01 专栏详情页开发.mp4 07:53

  *   02 专栏详情页交互（1）.mp4 18:41

  *   03 专栏详情页交互（2）.mp4 10:35

*   10 学习进度模块开发/

  *   01 未登录时默认显示.mp4 07:20

  *   02 学习进度页开发.mp4 10:40

  *   03 更新学习进度-图文课程（1）.mp4 17:23

  *   04 更新学习进度-图文课程（2）.mp4 03:58

  *   05 更新学习进度-视频课程.mp4 02:36

  *   06 更新学习进度-音频课程.mp4 03:06

  *   07 更新学习进度-专栏.mp4 03:55

*   11 考试模块开发/

  *   01 考场列表页开发.mp4 11:35

  *   02 考场列表页交互.mp4 06:51

  *   03 开始考试页开发（1）-倒计时(1).mp4 10:33

  *   04 开始考试页开发（2）-倒计时(2).mp4 04:40

  *   05 开始考试页开发（3-1）-底部操作条.mp4 13:43

  *   06 开始考试页开发（3-2）.mp4 09:41

  *   07 开始考试页开发（4）-填空组件.mp4 07:35

  *   08 开始考试页开发（5）-单选组件.mp4 11:55

  *   09 开始考试页开发（6）-多选组件.mp4 05:20

  *   10 开始考试页交互.mp4 10:32

  *   11 开始考试页交互（2）-交卷前验证.mp4 10:48

  *   12 开始考试页交互（3）-交卷处理.mp4 12:24

  *   13 我的考试记录页开发.mp4 11:45

  *   14 修复考试倒计时问题.mp4 02:28

*   12 社区和电子书模块开发/

  *   01 社区列表页开发（1）.mp4 08:08

  *   02 社区列表页开发（2）.mp4 09:02

  *   03 社区列表页开发（3）.mp4 14:28

  *   04 社区列表页开发（4）.mp4 18:34

  *   05 社区列表页交互（1）.mp4 12:04

  *   06 社区列表页交互（2）.mp4 06:24

  *   07 社区列表页交互（3）.mp4 13:36

  *   08 发布帖子页开发（一）.mp4 15:47

  *   09 发布帖子页开发（二）.mp4 08:58

  *   10 发布帖子交互实现（三）.mp4 21:28

  *   11 帖子详情页开发.mp4 13:47

  *   12 帖子评论列表.mp4 19:18

  *   13 帖子点赞功能（一）.mp4 11:06

  *   14 帖子点赞功能（二）.mp4 10:19

  *   15 帖子发表评论功能.mp4 15:46

  *   16 我的帖子列表页.mp4 05:58

  *   17 删除我的帖子功能.mp4 07:20

*   13 电子书、收藏模块开发/

  *   01 电子书列表交互.mp4 14:57

  *   02 电子书详情交互.mp4 15:10

  *   03 电子书章节内容交互（一）.mp4 13:21

  *   04 电子书章节内容交互（二）.mp4 11:15

  *   05 电子书章节内容交互（三）.mp4 04:52

  *   06 发布帖子增加上传验证.mp4 12:10

  *   07 我的公告列表页面交互.mp4 06:55

  *   08 收藏功能实现.mp4 10:37

  *   09 取消收藏功能实现.mp4 07:22

  *   10 我的收藏列表交互.mp4 12:42

*   14 拼团、秒杀和订单模块开发/

  *   01 课程和专栏列表交互.mp4 13:35

  *   02 拼团和秒杀列表交互.mp4 08:48

  *   03 拼团详情页开发（一）.mp4 15:23

  *   04 拼团详情页开发（二）.mp4 11:22

  *   05 秒杀详情页开发.mp4 08:54

  *   06 免费学习功能交互.mp4 10:04

  *   07 创建订单页交互.mp4 15:20

  *   08 选择优惠券功能（1）.mp4 05:43

  *   09 选择优惠券功能（2）.mp4 16:12

  *   10 选择优惠券功能（3）.mp4 05:32

  *   11 微信H5支付接入（1）.mp4 19:31

  *   12 微信H5支付接入（2）.mp4 13:35

*   15 直播模块开发/

  *   01 直播列表交互实现.mp4 10:52

  *   02 直播内容页和下单交互（一）.mp4 16:46

  *   03 直播内容页和下单交互（二）.mp4 13:18

  *   04 H5端引入西瓜直播播放器.mp4 11:39

  *   05 发布弹幕功能实现（一）.mp4 10:14

  *   06 发布弹幕功能实现（二）.mp4 10:52

  *   07 发布弹幕功能实现（三）.mp4 06:47

  *   08 微信app端支付申请和基座打包.mp4 13:29

  *   09 微信app端支付实现.mp4 14:46

  *   10 微信app端支付实现（2）.mp4 12:18

  *   11 发起拼团功能（1）.mp4 09:32

  *   12 发起拼团功能（2）.mp4 12:54

  *   13 参与组团功能（1）.mp4 14:41

  *   14 参与组团功能（2）.mp4 08:44

  *   15 参与秒杀功能.mp4 06:58

  *   16 微信H5登录功能实现.mp4 13:28

  *   17 微信app登录功能实现.mp4 12:51

  *   18 微信小程序登录功能.mp4 09:24

  *   19 细节补充（1）.mp4 09:36

  *   20 细节补充（2）.mp4 11:50

  *   21 微信小程序端支付.mp4 15:33

*   16 多端兼容和项目部署/

  *   01 兼容微信小程序端（1）.mp4 18:48

  *   02 兼容微信小程序端（2）.mp4 15:51

  *   03 兼容app端处理.mp4 18:40

  *   04 【附加课】部署前环境搭建.mp4 14:58

  *   05 【附加课】后端api部署.mp4 16:47

  *   06 小程序端分包处理.mp4 38:04