2 l! R/ V; } C6 A; |0 u1 Q
" n4 W* p% ?1 l) \7 N【课程简介】- B5 ~0 w J* Y3 i
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
7 t3 d& G; c! y6 C3 _
" q* l& T0 e/ d( w. P! M& G【课程目录】
( `2 u4 a3 L0 `9 @, p第1章 课程介绍: \5 Z% W: M* h* Y8 ^5 G
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。0 a" C5 r* e+ e" q/ X( H* i5 u, N% W
1-1 课程导学 试看: Y. M4 x. K c) e
+ n5 \" m1 F8 O8 C/ v; [
第2章 移动web硬知识点+ ]& c$ p: e3 I1 ~/ T' e5 u. T
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
. F8 B0 W* ~4 h% f' `2-1 移动web开发概述# r- `& B ]6 F2 K+ y; [: S, [
2-2 移动web开发调试
7 _3 P9 ?$ Y( D2-3 移动web适配概述
9 x" C& Z9 W; t5 p# y; H2-4 viewport视窗概念
: T, M q$ Q9 k2-5 css3之flex布局7 }. G6 B# n; C. O5 M$ E6 k
2-6 响应式布局和MediaQuery; } E+ f; c. L; B1 s9 t
2-7 rem,vw布局与适配1 t0 J, r5 J0 f( ]9 d3 I
2-8 移动端touch事件详解
/ ]" y3 s: c) c" w8 `+ ]1 ^
# n- x4 Y# O, V! `3 z- r第3章 移动web软技能2 P: o% z, p/ R. [: {% x2 C4 y4 y
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
6 S5 U7 |5 y. S3-1 代码管理工具&项目构建工具简介! U) G( i: l! ]% s( z
3-2 webpack工具使用介绍
^7 ^, c9 E& a3-3 Sass预处理工具使用介绍
; K) M* f5 Z* e. T3-4 React组件化思想 试看
3 a4 V0 m9 D3 T. ?7 N: E* E
. I9 J1 L3 ]! \" X! a第4章 项目开发构建环境搭建
1 d* X$ N3 q% U5 [2 s本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。" t' q1 g" E( w; J5 q
4-1 项目和技术栈介绍" g1 u7 D) K$ T( _; X
4-2 项目演示
& V: }, R& |: Y/ p4-3 构建环境搭建（1）
8 r& c3 a/ [- V0 i4-4 构建环境搭建（2）: D% `" `& K, Q# B
4-5 构建环境搭建（3）
/ l3 k: X- [, b) d$ ]- e4-6 构建环境搭建（4）
K' J: d; E# }: B4-7 redux-react使用介绍（1）
3 K4 p9 @) I7 W4-8 redux-react使用介绍（2）
0 q) I U0 Y2 J% Q8 A! C) m2 k# Z8 z( J: f# w) G/ Q
第5章 美团APP—首页开发
. O+ o3 i. r% E开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
! l+ P" W$ p1 H; {, c5-1 底部tab按钮开发(webpack-dev-server配置)
9 l+ R6 j- u+ w! ?. A5-2 底部tab按钮开发-UI逻辑编写（1）
! S7 V; R: x, ^2 V- E+ u2 ?5-3 底部tab按钮开发-UI逻辑编写（2）
7 L& { n0 {4 \! b$ A8 M5-4 底部tab按钮开发(rem配置)
' Y. X7 i# w* V5 p. H: j; |5-5 底部tab按钮开发(集成ESlint)1 }0 ?$ ^& }& i, p2 f) B
5-6 底部tab按钮开发(集成HMR)
& {+ h* [: Y; F6 K! _$ y" }5-7 首页页面开发Header模块开发
* U/ V1 ~' j; ]7 W$ v2 ^: ^' Z5-8 首页页面开发SearchBar模块开发+ B0 w: k/ s$ w* v
5-9 首页页面开发-Category模块开发（1）
" P/ S, w7 t9 W; }: `5-10 首页页面开发-Category模块开发（2）
5 a0 j6 a) N- a: z0 ?5-11 首页页面开发(ContentList模块开发)
+ I; q9 j3 B/ e5-12 首页页面开发-ListItem模块UI开发
7 H( K* L5 @8 z; b' a* T- n. ` s# J5-13 首页页面开发-ListItem模块样式开发' o/ P; W' m" u+ T& ?9 m
5-14 首页页面开发-ListItem模块数据渲染开发（1）
& p6 [1 h1 i0 E+ I( a5-15 首页页面开发-ListItem模块数据渲染开发( 2 )- Q( e& e. m+ p1 u% y8 q: {
5-16 首页页面开发(滚动加载逻辑实现)
" G% K" z% Q ]8 j5-17 订单页面开发(List模块开发) t! y* C0 l4 f$ Y# R# i
5-18 订单页面开发(OrderItem模块开发)（1）
7 {( P2 x4 ^( V C& T" B+ |5-19 订单页面开发(OrderItem模块开发)（2）- C- G& S. e/ o+ u
5-20 订单页面开发(公共ScrollView模块开发)
4 r0 E# f4 E1 W" ~* n: Y, b6 W5-21 我的页面UI开发
8 m7 C) W/ o$ @0 I/ O. X5-22 我的页面样式开发
7 d4 f. |: Q5 j U5-23 集成react-router
: J& ~1 ?* W+ X$ G9 ]
4 f$ U" D* r, R$ k4 Y第6章 美团APP—评价和分类页开发
9 g1 i9 O/ D. o7 x开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。5 h: Z3 x* e; \% s' f6 W
6-1 分类页面开发(顶部NavHeader模块开发)
$ x* w0 ^% s; Q. i* v; p6-2 分类页面开发(顶部Header tab 模块UI开发)
7 S9 H' u# R7 y4 [3 z9 i6-3 分类页面开发(顶部Header模块样式和逻辑开发)9 l/ |, s; t- z ]
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)# K$ F5 q& _ b4 {# I# ~% {
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现* Q/ S2 D2 B7 P2 [- W, ]
6-6 分类页面开发(Filter面板模块样式开发)) L( U7 ]) K! K5 U; l8 v& X: ~
6-7 分类页面开发(Filter面板模块item逻辑实现)
. u0 h5 K/ ^5 I4 s* g+ A+ l/ O6-8 分类页面开发(列表List模块开发); I% y2 E! A* r* Q5 C* k8 w
6-9 评价页面开发(UI开发)( \* B- X+ o6 m3 T) N ]/ G
6-10 评价页面开发(样式开发)1 x+ y+ E* ]) N5 u8 T
6-11 评价页面开发(交互逻辑开发)- j$ I2 a9 p2 | T6 q
6 u8 m) s8 M4 r4 I4 N% W v9 a4 I第7章 美团APP—详情页开发9 D" x; g3 }" Z! o9 z$ o
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
, x) W1 C) Z# L/ M* m& O7-1 详情页顶部tab开发(UI开发)+ x5 y, F5 q1 o7 ~* g
7-2 详情页顶部tab开发(样式交互逻辑开发)3 j% U) T4 O! b. ]5 x$ F+ K- t
7-3 详情页点菜页面开发(LeftBarUI开发)
9 K4 \" Y5 e! B7 E7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
2 x5 `$ B. S2 V* }7-5 详情页点菜页面开发(RightContent UI和样式开发)# _8 k5 \) J$ Q, \. v
7-6 详情页点菜页面开发(RightContent逻辑开发)7 r; v% O9 g* I& e
7-7 详情页点菜页面开发(ShopBar UI和样式开发)
. L# q: Q5 j1 i9 y1 H6 e3 A; c: A7-8 详情页点菜页面开发(ShopBar 逻辑开发)
2 A Y4 X& X" D# p& f2 l7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）# Y3 h3 F& |& w. r
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）& c) ^, A: ^4 V7 p! Q9 v# m
7-11 详情页评论页面开发(顶部Header开发)
5 Y' ]8 a" a! h; r% H7-12 详情页评论页面开发(列表List 数据绑定)
, O, t: a6 P, l$ g8 g3 e7-13 详情页评论页面开发(列表List UI开发)
( [+ a5 t0 |% ^1 v$ |; V. B7-14 详情页评论页面开发(列表List样式逻辑开发) l0 |7 P/ `9 N( a9 U) }
7-15 详情页商家页面开发(UI开发)
2 n5 v, ]2 t% z) T' f7-16 详情页商家页面开发(样式开发)4 t' X0 x R9 O3 u7 }# W. T0 n
# R$ k! K/ A$ U% L; Z第8章 美团APP—回顾与性能优化
2 n* {6 W$ `/ t4 B通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
8 g) a& V) V+ r8-1 懒加载性能优化- g/ r6 G {# s) Y
8-2 JS和CSS公共文件抽离优化
4 @" n; P' t% N! j2 F( C- I! B8-3 编写后台server读取真实数据/ X1 m( `$ Z, a4 \. v
8-4 多Tab 页切换与滚动数据加载优化/ g) [9 M, R/ _& A- ~% T
8-5 项目打包- }& i% m A$ h+ b; t# s p. k$ |+ m
8-6 项目发布: E4 x# H5 R# B: _; t
& A! v e7 b& T W& y$ O* W第9章 美团APP与hybrid深度结合
, D! a+ M* f* T4 `0 w' r本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。 ?( S4 `+ g$ x3 z+ G* A, R2 Y
9-1 JS bridge 原理 试看
: H) o# W; @! V; J9 U9 V9-2 iOS webview + JS API接口+iOS APP集成
: q# Q. Z, A: W5 C
6 f x; L6 @& _, q第10章 课程总结1 P/ Q- a( L* H9 g0 t) ^& U4 M
回顾和总结课程讲解内容，能更好的回归和归纳。
1 ^/ P# |3 G! c ]. T10-1 课程总结" @4 W+ V0 o, U8 j9 j- a
, ^5 E1 W6 C) b7 Z- G: |; @【下载地址】( c$ [ N# B# O6 F* Q0 i
& F y# l0 W1 Z0 w+ G
) f/ X9 V f0 s S+ _, a) H/ V |
[复制链接]
