$ g$ m7 a0 m9 r P( g
8 r0 O8 @! X" |0 _& ~【课程简介】
: e: o% e6 S2 G+ X8 M/ N6 {- N" N本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
- H, a2 o3 h7 U( n+ p
* @9 b0 D5 l y8 q# {4 \2 }0 @【课程目录】
& g" N3 `5 E- C$ W% ` o第1章 课程介绍! A* v- R6 O! f' T8 \" e3 j4 ]
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
- ~8 s( D& k0 ]; ^. K. o% n1-1 课程导学 试看0 p8 ~3 l0 P, O# N# P5 j, }9 p# I
2 n) z9 A6 n5 p1 p3 Y
第2章 移动web硬知识点) G4 `, h, \; s- F+ ] b
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。) \3 r# I" ?, B) Q
2-1 移动web开发概述
9 k2 ?8 P8 A x3 ^ O2-2 移动web开发调试
6 d# ^% J1 s' m8 I4 c. t5 ]2-3 移动web适配概述
1 m H Q/ ^$ i# s0 P2-4 viewport视窗概念, b3 B2 F' D& z* {* [( L
2-5 css3之flex布局
. e3 \4 l; L0 y% Z" h' V2-6 响应式布局和MediaQuery- Q0 O- G# N \4 P0 ~" P
2-7 rem,vw布局与适配- l2 g0 z B4 B9 Y" z
2-8 移动端touch事件详解
+ A' K3 H4 B) K+ I4 s3 {' |
. k- V* R: f4 c; D% x# T第3章 移动web软技能' F Q4 [- r$ f) q. p* m
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
~ S4 \5 I# M+ @3-1 代码管理工具&项目构建工具简介
; A- }" h0 L0 k, z5 S+ _% F7 c3-2 webpack工具使用介绍0 W. U$ P B) y A& I: ^
3-3 Sass预处理工具使用介绍1 D# K$ w7 y5 r+ T. s c* |' h
3-4 React组件化思想 试看
5 Z7 x& ~( x. E! Y; d
+ I# N/ a5 T& G. o- w: b1 v第4章 项目开发构建环境搭建$ F) m' Z5 P+ R4 m* I
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
# p m! O- O" ^+ g4-1 项目和技术栈介绍
3 b( Q+ g0 e* V; n2 C7 n. s2 p8 i4-2 项目演示" j5 M5 R6 l# F% @9 ~& \9 z& v
4-3 构建环境搭建（1）
. b9 d! ]- H5 s3 Z) I0 c9 U# G4-4 构建环境搭建（2）
: G$ n, i$ {# J" M+ `4-5 构建环境搭建（3）0 B' Y& D0 @0 |: @+ U! O
4-6 构建环境搭建（4）- _1 @; h( x, U, h) l
4-7 redux-react使用介绍（1）
3 r6 r% o9 V5 {) j4 f4-8 redux-react使用介绍（2）
) K4 |6 O) K+ x' J; l
" a, o \' V7 u. h; {5 B$ C* V第5章 美团APP—首页开发
" n! @% i; b: F开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
1 j! l% M, t. V" P0 U( y5-1 底部tab按钮开发(webpack-dev-server配置)
7 w: ]; Z- g' j5-2 底部tab按钮开发-UI逻辑编写（1）
" b' i. I P5 `: N1 f3 ~: n& T5-3 底部tab按钮开发-UI逻辑编写（2）& v* Y* n# C4 ~' t+ }3 x
5-4 底部tab按钮开发(rem配置)
( s. _9 ~1 Y' {5-5 底部tab按钮开发(集成ESlint) y9 f! {1 B' O( a8 k, B
5-6 底部tab按钮开发(集成HMR)
0 h) V, ~4 k& o- G% c1 H3 B5-7 首页页面开发Header模块开发" x0 j$ Y8 }. a' s1 S
5-8 首页页面开发SearchBar模块开发
. A! D" Z! ?; ~9 m5-9 首页页面开发-Category模块开发（1）
5 q$ J3 V4 E) h5 S: I/ t$ q5-10 首页页面开发-Category模块开发（2）2 W& f7 m# G5 t v6 M& p
5-11 首页页面开发(ContentList模块开发), O) u( t6 o% e; M+ c' [; d% ~
5-12 首页页面开发-ListItem模块UI开发
9 P% C2 o' [& _; ~+ C+ w8 h5-13 首页页面开发-ListItem模块样式开发4 V. k! v3 g" e/ d5 W: E+ w
5-14 首页页面开发-ListItem模块数据渲染开发（1）7 S" a4 Y' t, c3 r2 w
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )0 F; K" p7 J3 R' u
5-16 首页页面开发(滚动加载逻辑实现)
3 G$ F8 l) B& @# D& A) p5-17 订单页面开发(List模块开发)
8 |2 J- k' `3 @5-18 订单页面开发(OrderItem模块开发)（1）! X! c6 ]7 S$ ~& F4 z- R
5-19 订单页面开发(OrderItem模块开发)（2）0 ]+ E0 K3 \+ N; r
5-20 订单页面开发(公共ScrollView模块开发)& Y4 Z& t+ l# H0 R+ k( ^
5-21 我的页面UI开发5 A! W x9 S" Y* V0 h
5-22 我的页面样式开发% m `. Q! k2 e" f
5-23 集成react-router* F [! m& E& A7 \
' m: E) G: \( Z* Z! U
第6章 美团APP—评价和分类页开发
9 c$ e( @, E0 i: J& s开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
: d' Z/ `) J$ j7 ?+ l8 c6-1 分类页面开发(顶部NavHeader模块开发)9 F5 l6 [# e. {/ R8 `# A; Y
6-2 分类页面开发(顶部Header tab 模块UI开发)
2 u& _4 o/ ^- {) j; p0 U- T# t: i v& p6-3 分类页面开发(顶部Header模块样式和逻辑开发)
: l3 G. d, x. Z+ ]3 c6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
& E5 }! }% f. b L. G1 J0 X2 q: `; V6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
) x/ N- t7 u2 Z6-6 分类页面开发(Filter面板模块样式开发)
* ?: E {' e8 f6-7 分类页面开发(Filter面板模块item逻辑实现)
) B% \" E" n2 Y* I/ X6-8 分类页面开发(列表List模块开发)
) U i6 c& U9 {3 m! a# E3 O6-9 评价页面开发(UI开发). t, I( {+ U% r0 E, t
6-10 评价页面开发(样式开发)
# q% R' d9 ~/ k- H- b" D3 w6-11 评价页面开发(交互逻辑开发)4 B) e$ }7 V4 G1 t8 f3 U
0 u& a2 r/ B( `
第7章 美团APP—详情页开发5 a$ V3 Y9 A6 E9 g
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
2 `, Z; Y" c: l6 S8 D* v/ ^7-1 详情页顶部tab开发(UI开发)
1 Y* O2 m, D. Y5 N8 ?7-2 详情页顶部tab开发(样式交互逻辑开发)7 u; D8 i1 o) t& A
7-3 详情页点菜页面开发(LeftBarUI开发)
4 G) K) K4 x8 {+ v+ Q" `( v7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)! V! @$ z% r- Y0 Z, a
7-5 详情页点菜页面开发(RightContent UI和样式开发)
& M( I) s! |8 i$ S1 [" q4 J7-6 详情页点菜页面开发(RightContent逻辑开发)
3 G7 s0 S2 Z h6 s" F7-7 详情页点菜页面开发(ShopBar UI和样式开发)! w I m$ M9 _
7-8 详情页点菜页面开发(ShopBar 逻辑开发): [. h+ u% d+ L( y
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）" s+ p% H6 @0 Q
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）! t& H1 V! M0 g2 q- ]) C" l7 M! X
7-11 详情页评论页面开发(顶部Header开发)# X. k2 s& i. U1 R& M2 `$ ~" V* n
7-12 详情页评论页面开发(列表List 数据绑定)
/ L( v' q. v( p3 D5 i5 Y7-13 详情页评论页面开发(列表List UI开发)+ ^. e5 E9 s: N+ a; e' U% m, q
7-14 详情页评论页面开发(列表List样式逻辑开发)
) B/ v3 r; e3 \9 ^; p7-15 详情页商家页面开发(UI开发)
& y4 v8 ?/ k- A. _- n, c) C7-16 详情页商家页面开发(样式开发)
* s* n& k' `& U) A# D/ p& d+ E# V1 n/ r+ b7 h
第8章 美团APP—回顾与性能优化
/ f4 m/ C/ Z8 V) S1 I( O通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...2 k8 @% h- H) u
8-1 懒加载性能优化2 v9 ]5 S4 y3 L. S t% [# \
8-2 JS和CSS公共文件抽离优化
# C8 [/ ^% ^# K4 d6 c! ^+ [8-3 编写后台server读取真实数据
) _& H& I9 h* [* k+ h3 E3 u8-4 多Tab 页切换与滚动数据加载优化
3 |' b1 j0 d% \/ s7 T8-5 项目打包
" t, Z; ~% I* Y) L% Q8-6 项目发布
4 i! N+ t- c! V# z. d" J; I
) j E! d! F7 ]第9章 美团APP与hybrid深度结合0 ^% E* y3 E) H5 k" b
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
T; c- Y7 y, a; f, j7 ^9-1 JS bridge 原理 试看! b. Z1 [2 w6 ?+ J6 j/ U; _
9-2 iOS webview + JS API接口+iOS APP集成% S4 m, G3 `! A: ]9 l1 A- o) k
8 `; S( {* I# e- a
第10章 课程总结
+ _& j& w, S: F5 C9 @. M& z回顾和总结课程讲解内容，能更好的回归和归纳。
' i% J/ m) J8 F10-1 课程总结6 v. |: g) o4 h) X
. P) m) p: Q; A& C, e5 s
【下载地址】# D, H I- u' a0 Q9 C, q
0 j0 X: M3 h/ J' m
& b, c. M9 L2 Y$ F% R |
[复制链接]
