收藏

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

React全家桶,移动Web开发技术全解析,理解 Hybrid 混合模式开发

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

难度 中级 时长 16小时 学习人数 389 综合评分 10.00

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

  • 第1章 课程介绍 试看 1 节 | 12分钟

    通过课程介绍,了解学习课程的必要性,所包含的知识点,课程安排,学习前提,课程收获,快速全面了解课程。

    收起列表

    • 视频: 1-1 课程导学 (11:12) 试看
  • 第2章 移动web硬知识点 8 节 | 69分钟

    本章主要讲解移动web开发中必要掌握的基本知识,是进行后续学习的前提。从概述到开发调试方法,以及viewport视窗概念和原理的讲解,在到移动web开发关键布局技能和适配方案,最后讲解移动web中常用的touch事件。

    收起列表

    • 视频: 2-1 移动web开发概述 (04:14)
    • 视频: 2-2 移动web开发调试 (08:36)
    • 视频: 2-3 移动web适配概述 (02:27)
    • 视频: 2-4 viewport视窗概念 (07:36)
    • 视频: 2-5 css3之flex布局 (20:33)
    • 视频: 2-6 响应式布局和MediaQuery (08:39)
    • 视频: 2-7 rem,vw布局与适配 (02:08)
    • 视频: 2-8 移动端touch事件详解 (14:37)
  • 第3章 移动web软技能 试看 4 节 | 38分钟

    本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念,同时预先给大家介绍webpack和Sass的基本使用方法,帮助基础弱的同学以便于进行后续的学习,最后教大家如何使用React组件化思想开发页面。...

    收起列表

    • 视频: 3-1 代码管理工具&项目构建工具简介 (05:18)
    • 视频: 3-2 webpack工具使用介绍 (04:35)
    • 视频: 3-3 Sass预处理工具使用介绍 (08:56)
    • 视频: 3-4 React组件化思想 (18:29) 试看
  • 第4章 项目开发构建环境搭建 8 节 | 90分钟

    本章主要讲解的内容都是为下章实战项目做准备工作的开发,包括项目的最终结果演示,同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法,以便于对Redux不熟悉的同学巩固一下相关知识。

    收起列表

    • 视频: 4-1 项目和技术栈介绍 (05:44)
    • 视频: 4-2 项目演示 (03:03)
    • 视频: 4-3 构建环境搭建(1) (12:40)
    • 视频: 4-4 构建环境搭建(2) (15:57)
    • 视频: 4-5 构建环境搭建(3) (17:46)
    • 视频: 4-6 构建环境搭建(4) (12:06)
    • 视频: 4-7 redux-react使用介绍(1) (15:26)
    • 视频: 4-8 redux-react使用介绍(2) (07:13)
  • 第5章 美团APP—首页开发 23 节 | 314分钟

    开发首页,讲解通过React+Redux实现页面基本逻辑,使用flex进行页面布局,引入rem进行页面适配,实现tab切换,滚动加载逻辑,以及事件绑定逻辑。

    收起列表

    • 视频: 5-1 底部tab按钮开发(webpack-dev-server配置) (13:22)
    • 视频: 5-2 底部tab按钮开发-UI逻辑编写(1) (15:42)
    • 视频: 5-3 底部tab按钮开发-UI逻辑编写(2) (13:09)
    • 视频: 5-4 底部tab按钮开发(rem配置) (14:05)
    • 视频: 5-5 底部tab按钮开发(集成ESlint) (09:05)
    • 视频: 5-6 底部tab按钮开发(集成HMR) (08:43)
    • 视频: 5-7 首页页面开发Header模块开发 (08:21)
    • 视频: 5-8 首页页面开发SearchBar模块开发 (20:03)
    • 视频: 5-9 首页页面开发-Category模块开发(1) (15:04)
    • 视频: 5-10 首页页面开发-Category模块开发(2) (11:38)
    • 视频: 5-11 首页页面开发(ContentList模块开发) (12:22)
    • 视频: 5-12 首页页面开发-ListItem模块UI开发 (10:24)
    • 视频: 5-13 首页页面开发-ListItem模块样式开发 (11:06)
    • 视频: 5-14 首页页面开发-ListItem模块数据渲染开发(1) (15:02)
    • 视频: 5-15 首页页面开发-ListItem模块数据渲染开发( 2 ) (12:40)
    • 视频: 5-16 首页页面开发(滚动加载逻辑实现) (20:09)
    • 视频: 5-17 订单页面开发(List模块开发) (17:10)
    • 视频: 5-18 订单页面开发(OrderItem模块开发)(1) (12:13)
    • 视频: 5-19 订单页面开发(OrderItem模块开发)(2) (15:46)
    • 视频: 5-20 订单页面开发(公共ScrollView模块开发) (11:04)
    • 视频: 5-21 我的页面UI开发 (06:45)
    • 视频: 5-22 我的页面样式开发 (17:14)
    • 视频: 5-23 集成react-router (22:13)
  • 第6章 美团APP—评价和分类页开发 11 节 | 150分钟

    开发评价页和分类页,讲解使用div+overflow实现局部滚动,移动端输入框相关使用技巧以及css伪类实现星型icon。

    收起列表

    • 视频: 6-1 分类页面开发(顶部NavHeader模块开发) (14:13)
    • 视频: 6-2 分类页面开发(顶部Header tab 模块UI开发) (12:00)
    • 视频: 6-3 分类页面开发(顶部Header模块样式和逻辑开发) (18:09)
    • 视频: 6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发) (17:48)
    • 视频: 6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现 (09:06)
    • 视频: 6-6 分类页面开发(Filter面板模块样式开发) (18:36)
    • 视频: 6-7 分类页面开发(Filter面板模块item逻辑实现) (15:13)
    • 视频: 6-8 分类页面开发(列表List模块开发) (16:41)
    • 视频: 6-9 评价页面开发(UI开发) (08:30)
    • 视频: 6-10 评价页面开发(样式开发) (10:56)
    • 视频: 6-11 评价页面开发(交互逻辑开发) (07:48)
  • 第7章 美团APP—详情页开发 16 节 | 230分钟

    开发详情页,讲解点菜选择器相关逻辑,通过React组件化对之前页面的公共组件进行抽离,通过封装scrollview实现评价tab的数据加载,以及使用css伪类实现1px边框。

    收起列表

    • 视频: 7-1 详情页顶部tab开发(UI开发) (10:57)
    • 视频: 7-2 详情页顶部tab开发(样式交互逻辑开发) (12:52)
    • 视频: 7-3 详情页点菜页面开发(LeftBarUI开发) (11:20)
    • 视频: 7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发) (14:52)
    • 视频: 7-5 详情页点菜页面开发(RightContent UI和样式开发) (18:59)
    • 视频: 7-6 详情页点菜页面开发(RightContent逻辑开发) (15:53)
    • 视频: 7-7 详情页点菜页面开发(ShopBar UI和样式开发) (15:34)
    • 视频: 7-8 详情页点菜页面开发(ShopBar 逻辑开发) (19:19)
    • 视频: 7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)(1) (09:32)
    • 视频: 7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)(2) (12:30)
    • 视频: 7-11 详情页评论页面开发(顶部Header开发) (18:56)
    • 视频: 7-12 详情页评论页面开发(列表List 数据绑定) (09:14)
    • 视频: 7-13 详情页评论页面开发(列表List UI开发) (14:00)
    • 视频: 7-14 详情页评论页面开发(列表List样式逻辑开发) (16:05)
    • 视频: 7-15 详情页商家页面开发(UI开发) (17:47)
    • 视频: 7-16 详情页商家页面开发(样式开发) (11:43)
  • 第8章 美团APP—回顾与性能优化 6 节 | 92分钟

    通过nodejs和express实现后端数据的代理,通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化,同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...

    收起列表

    • 视频: 8-1 懒加载性能优化 (15:50)
    • 视频: 8-2 JS和CSS公共文件抽离优化 (10:50)
    • 视频: 8-3 编写后台server读取真实数据 (18:04)
    • 视频: 8-4 多Tab 页切换与滚动数据加载优化 (17:36)
    • 视频: 8-5 项目打包 (21:26)
    • 视频: 8-6 项目发布 (07:20)
  • 第9章 美团APP与hybrid深度结合 试看 2 节 | 24分钟

    本章主要围绕Hybrid进行讲解,使用OC代码带领大家开发一个简单的webview组件,同时讲解web和native之间的通信机制,并开发jsbridge接口完善美团外卖项目,让项目看起来更像是一个真正的APP。

    收起列表

    • 视频: 9-1 JS bridge 原理 (06:15) 试看
    • 视频: 9-2 iOS webview + JS API接口+iOS APP集成 (17:37)
  • 第10章 课程总结 1 节 | 7分钟

    回顾和总结课程讲解内容,能更好的回归和归纳。

    收起列表

    • 视频: 10-1 课程总结 (06:08)
本课程已完结


讲师

吕小鸣 Web前端工程师

腾讯高级web前端工程师,从事web开发6年,对iOS开发,PHP开发以及web前端相关领域都有涉猎,手机QQHybrid页面主力开发,尤其专注于移动web开发,对相关实际项目和调优工作有深厚的经验,热爱分享,喜爱钻研技术,同时对代码严谨性有一定的要求,授课风格幽默诙谐,声音富有磁性。慕课网出品课程《移动web适配利器rem》

课程预览

检测到您还没有关注慕课网服务号,无法接收课程更新通知。请扫描二维码即可绑定
重新观看
意见反馈 帮助中心 APP下载
官方微信

学习咨询

选课、学习遇到问题?

扫码添加指导老师 1V1 帮助你!

添加后老师会第一时间解决你的问题