飞豹客 · 教程详情

- 移动Web App开发之实战美团外卖

会员可免费下载本篇

月会员、年会员、永久会员可按日额度下载（每篇扣 1 次）。

开通会员 · 按档位下载 →

体系课

0 人浏览发布 2026-10-17更新 2026-10-18

这门课到底能解决什么问题

移动Web App开发，听起来是技术活，但美团外卖这类实战项目背后，藏着的是一套完整的H5交互逻辑与移动端适配方案。很多开发者在做类似项目时，往往卡在“页面能跑，但体验别扭”的节点上——比如滑动卡顿、定位不准、支付流程断档，或者在不同手机屏幕上布局错乱。这门课聚焦的就是这些真实工作场景里的高频痛点。它不讲空洞的理论，而是以美团外卖的核心功能链路为骨架，带你把移动端前端开发的常见坑逐个填平。你学完后，能够独立搭建一个具备基础商品浏览、购物车交互、地址管理与模拟下单流程的移动端Web应用，而不是只会照抄demo。

适合什么基础、先看哪几块

这门课适合已经掌握HTML、CSS、JavaScript基础，并了解移动端适配概念（如rem、vw、弹性布局）的初学者。如果你连Flexbox怎么居中都没摸清，建议先补前端三件套的基础语法；如果你已经能用Vue或React做过小项目，那这门课的实战节奏会非常顺手。课程资料庞大，但不用从头到尾死磕。建议优先看三类内容：一是核心交互模块，比如首页的商品分类滑动与列表加载逻辑，这是整个App的骨架；二是用户流程模块，重点攻克购物车状态管理和订单提交前后的数据传递，这是最容易出Bug的地方；三是移动端适配与性能优化章节，这类内容能让你理解为什么你的页面在iPhone上看着正常，在安卓低端机上却卡成PPT。剩下的工具配置、环境搭建等章节，遇到具体问题再回查即可，不需要逐帧看完。

资料怎么配合练习、学完能做什么

资料包里提供了完整的课件与参考代码，但切记不要直接复制粘贴。最好的用法是：先跟着视频把核心功能逻辑在脑海里过一遍，然后关掉视频，尝试自己从零搭建目录结构和基础样式。遇到报错或布局错乱时，再回去对照资料里的参考代码找差异。这种“先独立尝试、再对照修正”的过程，才是真正内化技能的路径。资料中的测试数据和本地模拟接口，是你练习联调的最佳伙伴，不要跳过这部分直接看最终效果。当你能够不看教程，独立复现一个具备完整交互链路的移动端外卖Web App，并能清晰解释每一处代码背后的移动端特性考虑时，你就已经具备了承接类似外包项目或初级前端岗位的硬实力。这门课不是让你成为架构师，而是让你在具体的业务场景里，真正掌握移动端前端开发的那一套组合拳。

课程目录

第10章 课程总结【微信-rmshou-收集整理】/ 10-1 课程总结【微信-rmshou-收集整理】[2].mp4
 第1章 课程介绍(微信-rmshou-收集整理)/ 1-1 课程导学【微信-rmshou-收集整理】[2].mp4
 第2章 移动web硬知识点(微信-rmshou-收集整理)/ 2-1 移动web开发概述【微信-rmshou-收集整理】[2].mp4
 2-2 移动web开发调试【微信-rmshou-收集整理】[2].mp4
 2-3 移动web适配概述【微信-rmshou-收集整理】[2].mp4
 2-4 viewport视窗概念【微信-rmshou-收集整理】[2].mp4
 2-5 css3之flex布局【微信-rmshou-收集整理】[2].mp4
 2-6 响应式布局和MediaQuery【微信-rmshou-收集整理】[2].mp4
 2-7 rem,vw布局与适配【微信-rmshou-收集整理】[2].mp4
 2-8 移动端touch事件详解【微信-rmshou-收集整理】[2].mp4
 第3章 移动web软技能(微信-rmshou-收集整理)/ 3-1 代码管理工具&amp;项目构建工具简介【微信-rmshou-收集整理】[2].mp4
 3-2 webpack工具使用介绍【微信-rmshou-收集整理】[2].mp4
 3-3 Sass预处理工具使用介绍【微信-rmshou-收集整理】[2].mp4
 3-4 React组件化思想【微信-rmshou-收集整理】[2].mp4
 第4章 项目开发构建环境搭建(微信-rmshou-收集整理)/ 4-1 项目和技术栈介绍【微信-rmshou-收集整理】[2].mp4
 4-2 项目演示【微信-rmshou-收集整理】[2].mp4
 4-3 构建环境搭建（1）【微信-rmshou-收集整理】[2].mp4
 4-4 构建环境搭建（2）1【微信-rmshou-收集整理】[2].mp4
 4-5 构建环境搭建（3）【微信-rmshou-收集整理】[2].mp4
 4-6 构建环境搭建（4）【微信-rmshou-收集整理】[2].mp4
 4-7 redux-react使用介绍（1）【微信-rmshou-收集整理】[2].mp4
 4-8 redux-react使用介绍（2）【微信-rmshou-收集整理】[2].mp4
 第5章 美团APP—首页开发【微信-rmshou-收集整理】/ 5-1 底部tab按钮开发(webpack-dev-server配置)【微信-rmshou-收集整理】[2].mp4
 5-10 首页页面开发-Category模块开发（2）【微信-rmshou-收集整理】[2].mp4
 5-11 首页页面开发(ContentList模块开发)【微信-rmshou-收集整理】[2].mp4
 5-12 首页页面开发-ListItem模块UI开发【微信-rmshou-收集整理】[2].mp4
 5-13 首页页面开发-ListItem模块样式开发【微信-rmshou-收集整理】[2].mp4
 5-14 首页页面开发-ListItem模块数据渲染开发（1）【微信-rmshou-收集整理】[2].mp4
 5-

15 首页页面开发-ListItem模块数据渲染开发( 2 )【微信-rmshou-收集整理】[2].mp4
 5-16 首页页面开发(滚动加载逻辑实现)【微信-rmshou-收集整理】[2].mp4
 5-17 订单页面开发(List模块开发)【微信-rmshou-收集整理】[2].mp4
 5-18 订单页面开发(OrderItem模块开发)（1）【微信-rmshou-收集整理】[2].mp4
 5-19 订单页面开发(OrderItem模块开发)（2）【微信-rmshou-收集整理】[2].mp4
 5-2 底部tab按钮开发-UI逻辑编写（1）【微信-rmshou-收集整理】[2].mp4
 5-20 订单页面开发(公共ScrollView模块开发)【微信-rmshou-收集整理】[2].mp4
 5-21 我的页面UI开发【微信-rmshou-收集整理】[2].mp4
 5-22 我的页面样式开发【微信-rmshou-收集整理】[2].mp4
 5-23 集成react-router【微信-rmshou-收集整理】[2].mp4
 5-3 底部tab按钮开发-UI逻辑编写（2）【微信-rmshou-收集整理】[2].mp4
 5-4 底部tab按钮开发(rem配置)【微信-rmshou-收集整理】[2].mp4
 5-5 底部tab按钮开发(集成ESlint)【微信-rmshou-收集整理】[2].mp4
 5-6 底部tab按钮开发(集成HMR)【微信-rmshou-收集整理】[2].mp4
 5-7 首页页面开发Header模块开发【微信-rmshou-收集整理】[2].mp4
 5-8 首页页面开发SearchBar模块开发【微信-rmshou-收集整理】[2].mp4
 5-9 首页页面开发-Category模块开发（1）【微信-rmshou-收集整理】[2].mp4
 同类型课程.jpg 第6章 美团APP—评价和分类页开发【微信-rmshou-收集整理】/ 6-1 分类页面开发(顶部NavHeader模块开发)【微信-rmshou-收集整理】[2].mp4
 6-10 评价页面开发(样式开发)【微信-rmshou-收集整理】[2].mp4
 6-11 评价页面开发(交互逻辑开发)【微信-rmshou-收集整理】[2].mp4
 6-2 分类页面开发(顶部Header tab 模块UI开发)【微信-rmshou-收集整理】[2].mp4
 6-3 分类页面开发(顶部Header模块样式和逻辑开发)【微信-rmshou-收集整理】[2].mp4
 6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)【微信-rmshou-收集整理】[2].mp4
 6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现【微信-rmshou-收集整理】[2].mp4
 6-6 分类页面开发(Filter面板模块样式开发)【微信-rmshou-收集整理】[2].mp4
 6-7 分类页面开发(Filter面板模块item逻辑实现)【微信-rmshou-收集整理】[2].mp4
 6-8 分类页面开发(列表List模块开发)【微信-rmshou-收集整理】[2].mp4
 6-9 评价页面开发(UI开发)【微信-rmshou-收集整理】[2].mp4
 第7章 美团APP—详情页开发【微信-rmshou-收集整理】/ 7-1 详情页顶部tab开发(UI开发)【微信-rmshou-收集整理】[2].mp4
 7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）【微信-rmshou-收集整理】[2].mp4
 7-11 详情页评论页面开发(顶部Header开发)【微信-rmshou-收集整理】[2].mp4
 7-

12 详情页评论页面开发(列表List 数据绑定)【微信-rmshou-收集整理】[2].mp4
 7-

13 详情页评论页面开发(列表List UI开发)【微信-rmshou-收集整理】[2].mp4
 7-14 详情页评论页面开发(列表List样式逻辑开发)【微信-rmshou-收集整理】[2].mp4
 7-15 详情页商家页面开发(UI开发)【微信-rmshou-收集整理】[2].mp4
 7-16 详情页商家页面开发(样式开发)【微信-rmshou-收集整理】[2].mp4
 7-2 详情页顶部tab开发(样式交互逻辑开发)【微信-rmshou-收集整理】[2].mp4
 7-3 详情页点菜页面开发(LeftBarUI开发)【微信-rmshou-收集整理】[2].mp4
 7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)【微信-rmshou-收集整理】[2].mp4
 7-5 详情页点菜页面开发(RightContent UI和样式开发)【微信-rmshou-收集整理】[2].mp4
 7-6 详情页点菜页面开发(RightContent逻辑开发)【微信-rmshou-收集整理】[2].mp4
 7-7 详情页点菜页面开发(ShopBar UI和样式开发)【微信-rmshou-收集整理】[2].mp4
 7-8 详情页点菜页面开发(ShopBar 逻辑开发)【微信-rmshou-收集整理】[2].mp4
 7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）【微信-rmshou-收集整理】[2].mp4
 第8章 美团APP—回顾与性能优化【微信-rmshou-收集整理】/ 8-1 懒加载性能优化【微信-rmshou-收集整理】[2].mp4
 8-2 JS和CSS公共文件抽离优化【微信-rmshou-收集整理】[2].mp4
 8-3 编写后台server读取真实数据【微信-rmshou-收集整理】[2].mp4
 8-4 多Tab 页切换与滚动数据加载优化【微信-rmshou-收集整理】[2].mp4
 8-5 项目打包【微信-rmshou-收集整理】[2].mp4
 8-6 项目发布【微信-rmshou-收集整理】[2].mp4
 第9章 美团APP与hybrid深度结合【微信-rmshou-收集整理】/ 9-1 JS bridge 原理【微信-rmshou-收集整理】[2].mp4
 9-2 iOS webview + JS API接口+iOS APP集成【微信-rmshou-收集整理】[2].mp4
 资料/ 代码资料.zip

会员可免费下载本篇

查看价格与购买