网易云课堂 - uni-app实战在线教育类app开发

前端开发

课程简介

从零构建跨端在线教育应用：uni-app 技术栈与工程结构解析这份资料聚焦于如何利用 uni-app 技术栈，从零开始搭建一套功能完备的在线教育类移动应用。课程核心在于解决“如何快速实现多端兼容”与“组件化工程化开发”的痛点，而非单纯的 API 调用演示。对于有一定 Vue.js 基础，希望掌握跨端开发能力的开发者，这是极佳的实战参考。建议在开始时重点查…

已有 18 人浏览发布 2026-02-28 更新 2026-09-26

从零构建跨端在线教育应用：uni-app 技术栈与工程结构解析

这份资料聚焦于如何利用 uni-app 技术栈，从零开始搭建一套功能完备的在线教育类移动应用。课程核心在于解决“如何快速实现多端兼容”与“组件化工程化开发”的痛点，而非单纯的 API 调用演示。对于有一定 Vue.js 基础，希望掌握跨端开发能力的开发者，这是极佳的实战参考。建议在开始时重点查看“环境搭建和项目创建”章节，确认 HBuilderX 与 Node.js 的配置是否正确，这是后续编译运行的前提。在学习过程中，应重点关注“App.vue 全局样式引入”与“底部导航开发”的逻辑，这两块构成了应用的骨架，掌握了全局样式的复用机制与 Tabbar 的配置规范，后续开发首页等页面时就能大幅减少重复代码，提升开发效率。学完本套资料，开发者应具备独立完成一个包含搜索、轮播、分类导航及底部导航的在线教育应用前端工程的能力，能够理解 uni-app 的生命周期、组件通信以及全局配置的最佳实践。建议在实操时，不要只看视频，而是对照着工程源码，尝试修改全局样式变量，并自己实现一个简单的轮播图组件，通过动手复用课程中的模块来加深对工程结构的理解。

工程化思维：全局配置与模块复用策略

本课程的设计思路非常符合现代前端工程化的标准，通过“全局配置”与“组件拆分”来降低代码耦合度。在“全局样式和全局配置”章节中，课程详细演示了如何在 App.vue 中统一管理字体、颜色和图标库，这是构建大型应用的关键。通过引入自定义图标库和动画库，开发者可以快速提升应用的 UI 质感，而无需编写冗余的 CSS。此外，底部导航的开发逻辑也值得深入剖析，它展示了如何利用 uni-app 的导航组件结合路由配置，实现多 Tab 页面的快速切换。对于学习者而言，不仅要学会“怎么写”，更要学会“怎么复用”。在“首页开发”环节，课程将搜索栏、轮播图和图标分类拆分为独立组件，这种设计思路能帮助开发者建立模块化的编程思维。建议在练习时，尝试将首页的轮播图组件封装为一个独立文件，并在其他页面中复用，以此验证自己对组件封装与传参逻辑的掌握程度。

实战路径：从环境搭建到首页核心功能

为了确保开发过程的顺畅，建议严格按照“环境搭建和项目创建”的步骤进行操作，确保开发环境与课程版本一致。在正式进入业务逻辑开发前，先通过“App.vue 引入全局样式”和“动画库引入”打好基础，这能避免后续开发中频繁处理样式兼容性问题。课程的前半部分重点在于搭建应用的视觉基础和导航结构，这部分内容相对基础但至关重要，是连接环境与业务逻辑的桥梁。当掌握了全局样式与底部导航后，应立即跟进“首页开发”章节，这里涉及搜索栏配置、轮播图组件开发以及图标分类组件开发。这是整个课程的第一个实战难点，要求开发者理解数据绑定、循环渲染以及组件的嵌套使用。学完这些内容，开发者应能独立编写出具备搜索、轮播和分类功能的首页，并理解组件间的数据流向。配合源码进行练习时，可以尝试修改轮播图的数据源，或者调整图标的排列方式，通过具体的代码修改来熟悉项目结构，从而为后续更复杂的课程内容打下坚实基础。

📂 【163课堂-1211586802】uni-app实战在线教育类app开发/

📂 章节1课程介绍和准备/

📽️ [1.1]--课程介绍（学前必看）_ev.mp4 (32.12 MB)

📽️ [1.2]--环境搭建和项目创建_ev.mp4 (9.31 MB)

📂 章节2全局样式和全局配置/

📽️ [2.1]--App.vue引入全局样式.mp4 (22.40 MB)

📽️ [2.2]--动画库引入和使用.mp4 (8.75 MB)

📽️ [2.3]--引入自定义图标库.mp4 (11.29 MB)

📽️ [2.4]--底部导航开发.mp4 (24.06 MB)

📂 章节3首页开发/

📽️ [3.1]--首页搜索栏配置.mp4 (32.67 MB)

📽️ [3.2]--首页轮播图组件开发.mp4 (17.08 MB)

📽️ [3.3]--图标分类组件开发.mp4 (23.01 MB)

📽️ [3.4]--优惠券组件开发.mp4 (42.83 MB)

📽️ [3.5]--公共列表组件开发(1).mp4 (35.13 MB)

📽️ [3.6]--公共列表组件开发(2).mp4 (18.95 MB)

📽️ [3.7]--公共列表组件开发(3).mp4 (26.93 MB)

📽️ [3.8]--首页数据交互.mp4 (58.86 MB)

📽️ [3.9]--首页下拉刷新功能实现.mp4 (8.21 MB)

📽️ [3.10]--请求拦截器封装.mp4 (29.55 MB)

📽️ [3.11]--响应拦截器封装.mp4 (43.99 MB)

📽️ [3.12]--骨架屏加载优化.mp4 (58.40 MB)

📽️ [3.13]--首页数据交互（2）.mp4 (25.93 MB)

📂 章节4登录注册模块开发/

📽️ [4.1]--登录注册页开发（1）.mp4 (30.15 MB)

📽️ [4.2]--登录注册页开发（2）.mp4 (45.93 MB)

📽️ [4.3]--登录注册页开发（3）.mp4 (9.16 MB)

📽️ [4.4]--注册功能交互实现.mp4 (20.31 MB)

📽️ [4.5]--登录功能交互实现.mp4 (28.99 MB)

📽️ [4.6]--初始化用户功能实现.mp4 (12.09 MB)

📽️ [4.7]--验证同意隐私声明.mp4 (10.72 MB)

📽️ [4.8]--绑定手机号页开发（1）.mp4 (21.79 MB)

📽️ [4.9]--绑定手机号页开发（2）.mp4 (18.82 MB)

📽️ [4.10]--绑定手机号api交互（1）.mp4 (15.88 MB)

📽️ [4.11]--绑定手机号api交互（2）.mp4 (31.51 MB)

📽️ [4.12]--忘记密码页开发.mp4 (9.87 MB)

📽️ [4.13]--忘记密码api交互.mp4 (12.56 MB)

📂 章节5个人中心模块开发/

📽️ [5.1]--个人中心页开发（1）.mp4 (132.80 MB)

📽️ [5.2]--个人中心页开发（2）.mp4 (112.97 MB)

📽️ [5.3]--个人中心数据交互.mp4 (67.90 MB)

📽️ [5.4]--个人设置页开发.mp4 (82.92 MB)

📽️ [5.5]--退出登录功能实现.mp4 (43.91 MB)

📽️ [5.6]--权限验证跳转.mp4 (52.55 MB)

📽️ [5.7]--修改密码页功能实现.mp4 (84.32 MB)

📽️ [5.8]--缓存计算和清除缓存.mp4 (63.91 MB)

📽️ [5.9]--修改资料页开发.mp4 (122.05 MB)

📽️ [5.10]--上传文件功能实现.mp4 (155.48 MB)

📽️ [5.11]--修改资料页交互.mp4 (92.23 MB)

📽️ [5.12]--我的订单列表开发.mp4 (96.64 MB)

📽️ [5.13]--我的订单列表交互.mp4 (102.17 MB)

📂 章节6优惠券模块开发/

📽️ [6.1]--首页优惠券列表交互.mp4 (102.83 MB)

📽️ [6.2]--领取优惠券功能实现.mp4 (41.30 MB)

📽️ [6.3]--登录退出后优惠券状态处理.mp4 (97.06 MB)

📽️ [6.4]--我的优惠券列表开发.mp4 (52.00 MB)

📽️ [6.5]--我的优惠券列表交互.mp4 (119.56 MB)

📂 章节7搜索页和列表页开发/

📽️ [7.1]--搜索页开发（1）.mp4 (68.80 MB)

📽️ [7.2]--搜索页开发（2）.mp4 (79.08 MB)

📽️ [7.3]--搜索结果页开发（1）.mp4 (143.45 MB)

📽️ [7.4]--搜索结果页开发（2）.mp4 (129.46 MB)

📽️ [7.5]--搜索结果页交互.mp4 (115.04 MB)

📂 章节8图文频和视频课程模块开发/

📽️ [8.1]--课程详情页开发.mp4 (209.43 MB)

📽️ [8.2]--课程详情页交互.mp4 (68.54 MB)

📽️ [8.3]--图文课程详情页交互.mp4 (184.63 MB)

📽️ [8.4]--视频课程详情页交互.mp4 (48.73 MB)

📽️ [8.5]--音频课程详情页交互（1）.mp4 (171.82 MB)

📽️ [8.6]--音频课程详情页交互（2）.mp4 (156.50 MB)

📽️ [8.7]--音频课程详情页交互（3）.mp4 (135.17 MB)

📂 章节9专栏模块开发/

📽️ [9.1]--专栏详情页开发.mp4 (86.13 MB)

📽️ [9.2]--专栏详情页交互（1）.mp4 (203.83 MB)

📽️ [9.3]--专栏详情页交互（2）.mp4 (106.62 MB)

📂 章节10学习进度模块开发/

📽️ [10.1]--未登录时默认显示.mp4 (62.63 MB)

📽️ [10.2]--学习进度页开发.mp4 (126.59 MB)

📽️ [10.3]--更新学习进度-图文课程（1）.mp4 (188.84 MB)

📽️ [10.4]--更新学习进度-图文课程（2）.mp4 (38.28 MB)

📽️ [10.5]--更新学习进度-视频课程.mp4 (25.22 MB)

📽️ [10.6]--更新学习进度-音频课程.mp4 (36.61 MB)

📽️ [10.7]--更新学习进度-专栏.mp4 (38.85 MB)

📂 章节11考试模块开发/

📽️ [11.1]--考场列表页开发.mp4 (111.87 MB)

📽️ [11.2]--考场列表页交互.mp4 (79.77 MB)

📽️ [11.3]--开始考试页开发（1）-倒计时(1).mp4 (80.77 MB)

📽️ [11.4]--开始考试页开发（2）-倒计时(2).mp4 (41.03 MB)

📽️ [11.5]--开始考试页开发（3-1）-底部操作条.mp4 (141.47 MB)

📽️ [11.6]--开始考试页开发（3-2）.mp4 (85.16 MB)

📽️ [11.7]--开始考试页开发（4）-填空组件.mp4 (61.05 MB)

📽️ [11.8]--开始考试页开发（5）-单选组件.mp4 (119.06 MB)

📽️ [11.9]--开始考试页开发（6）-多选组件.mp4 (48.02 MB)

📽️ [11.10]--开始考试页交互.mp4 (75.91 MB)

📽️ [11.11]--开始考试页交互（2）-交卷前验证.mp4 (73.11 MB)

📽️ [11.12]--开始考试页交互（3）-交卷处理.mp4 (82.04 MB)

📽️ [11.13]--我的考试记录页开发.mp4 (102.60 MB)

📽️ [11.14]--修复考试倒计时问题.mp4 (26.85 MB)

📂 章节12社区和电子书模块开发/

📽️ [12.1]--社区列表页开发（1）.mp4 (82.70 MB)

📽️ [12.2]--社区列表页开发（2）.mp4 (90.80 MB)

📽️ [12.3]--社区列表页开发（3）.mp4 (122.32 MB)

📽️ [12.4]--社区列表页开发（4）.mp4 (165.91 MB)

📽️ [12.5]--社区列表页交互（1）.mp4 (134.00 MB)

📽️ [12.6]--社区列表页交互（2）.mp4 (56.92 MB)

📽️ [12.7]--社区列表页交互（3）.mp4 (104.08 MB)

📽️ [12.8]--发布帖子页开发（一）.mp4 (129.08 MB)

📽️ [12.9]--发布帖子页开发（二）.mp4 (81.37 MB)

📽️ [12.10]--发布帖子交互实现（三）.mp4 (221.75 MB)

📽️ [12.11]--帖子详情页开发.mp4 (123.19 MB)

📽️ [12.12]--帖子评论列表.mp4 (160.74 MB)

📽️ [12.13]--帖子点赞功能（一）.mp4 (65.82 MB)

📽️ [12.14]--帖子点赞功能（二）.mp4 (116.91 MB)

📽️ [12.15]--帖子发表评论功能.mp4 (137.98 MB)

📽️ [12.16]--我的帖子列表页.mp4 (50.92 MB)

📽️ [12.17]--删除我的帖子功能.mp4 (80.33 MB)