0 I- ~' v+ i u {( x
2 j/ Y& T7 d0 K2 t2 t) f! p6 E5 [【课程简介】
+ Q r: ]0 N* ^' J" r+ {本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
: R( |8 F$ p! g; @7 G. }4 F& U! q' C' R
【课程目录】* c1 L( l6 C1 z* m- G
第1章 课程介绍
6 a: w3 o4 f7 W' m9 p' H: c通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。) Q! O7 {* r; f1 A; v
1-1 课程导学 试看- i8 e4 |* g, G" A
# h1 t5 b d4 F* k4 L
第2章 移动web硬知识点0 Z$ Y# U/ I! ?
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
' O L j* C& e1 S8 W- U0 G3 H2-1 移动web开发概述
! |9 Z% W, N, O. T2-2 移动web开发调试
' Z6 R5 O- Q8 ~- W2-3 移动web适配概述
3 _+ x" Q% ^, t1 [" `2-4 viewport视窗概念
8 w8 N6 x9 y- C9 O* M. c2-5 css3之flex布局
' x T: a* v3 ^+ W4 f# f, N2 l( f2-6 响应式布局和MediaQuery/ i8 d% x2 S" e, B
2-7 rem,vw布局与适配
* L. }% Q% K) U4 t2-8 移动端touch事件详解0 c+ \, K. A, [+ v7 \$ j
! R& d4 H& W! Q" l. d+ C9 j4 r2 k第3章 移动web软技能6 W8 a! @+ Z& C& Y! t
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...1 [& v" b( I7 Q7 J+ @2 x: K O6 f
3-1 代码管理工具&项目构建工具简介( s) v8 e4 A1 g: ~+ p$ H
3-2 webpack工具使用介绍
- Y5 Q! l1 o! O& L( |; g% W- i3-3 Sass预处理工具使用介绍; ~* Y0 @( ?; `/ d0 [
3-4 React组件化思想 试看, ]/ }4 j! }. f8 R7 M9 g3 w9 Q
7 D( n1 K' M, Z2 w1 i8 U% M第4章 项目开发构建环境搭建
" F2 f% w* t! n2 ~5 Q4 e! T. ]本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
" }7 r1 B6 x6 o- j$ l4 u0 r& y4-1 项目和技术栈介绍
# n+ o; ~ q @6 T4-2 项目演示9 D8 w; @, {. ]0 [$ i
4-3 构建环境搭建（1）9 M, O% ~8 ~& n+ T1 y7 t
4-4 构建环境搭建（2）
& T7 I% y; M- p4 `4-5 构建环境搭建（3）
' l# h; `* Q; G5 D' T2 b1 P5 M4-6 构建环境搭建（4）# E( u& T. F3 z! C5 n
4-7 redux-react使用介绍（1）
* @1 \, q+ J5 ^9 c* B8 K4-8 redux-react使用介绍（2）
. }- }- _0 y( f9 F. J9 T, ]3 T: j8 k, b s' B
第5章 美团APP—首页开发
) q |7 x/ {: K开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
0 p* ]0 x" I" |5-1 底部tab按钮开发(webpack-dev-server配置)+ J" ?/ S9 g5 s- d1 A
5-2 底部tab按钮开发-UI逻辑编写（1）! J( Z- L; A( n* F) I( u
5-3 底部tab按钮开发-UI逻辑编写（2）
. M; l6 H" l: G j5-4 底部tab按钮开发(rem配置)+ ?% c3 a* t0 q5 a3 b T. `
5-5 底部tab按钮开发(集成ESlint)% |8 {& p8 F, `3 ]: V
5-6 底部tab按钮开发(集成HMR)
; R% F t+ C) i; U. E5 ~* r5-7 首页页面开发Header模块开发
3 `# A7 B2 K7 e5-8 首页页面开发SearchBar模块开发9 G$ O: w. C5 F' A& p
5-9 首页页面开发-Category模块开发（1）9 v+ ^& Q: l$ b
5-10 首页页面开发-Category模块开发（2）' P6 n5 M& E; c5 k7 g
5-11 首页页面开发(ContentList模块开发)
; C( [3 i# l- ^# o. H5-12 首页页面开发-ListItem模块UI开发% f2 X3 A" l$ v0 n' ^
5-13 首页页面开发-ListItem模块样式开发, F& P+ f5 _6 [3 P
5-14 首页页面开发-ListItem模块数据渲染开发（1）6 f/ x5 x) V i* G' s1 {( ]' a* i5 r
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )2 y {- J/ V; N4 O9 A2 ?
5-16 首页页面开发(滚动加载逻辑实现)
$ W U* O; ~7 T0 I1 S) X, o5-17 订单页面开发(List模块开发)
5 J( h+ D R( f6 C8 }, i# u7 J5-18 订单页面开发(OrderItem模块开发)（1）. Q' T6 t a7 K" u: R$ p
5-19 订单页面开发(OrderItem模块开发)（2）
, A5 t4 {- y2 i5 D$ ?( L1 R7 ~) v5-20 订单页面开发(公共ScrollView模块开发)
( B* V; V! b3 M9 ?0 p. Q! a5-21 我的页面UI开发
2 ? `4 ~$ m2 |8 S5 ~ C6 r5-22 我的页面样式开发
1 u1 ~* q) ]" S5-23 集成react-router
+ Z( f! u: y0 {$ U
+ U4 ^5 P7 w, S, V0 d2 n第6章 美团APP—评价和分类页开发# @( c; L. }/ B- l+ u# A
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
$ _0 Y+ z9 {" O+ m6-1 分类页面开发(顶部NavHeader模块开发)
r# X5 r/ J _& j; ] U2 U6-2 分类页面开发(顶部Header tab 模块UI开发)$ B9 h! E. ~% F2 J! S2 f$ i
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
0 g! M9 [: w# L0 R# r; O6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)6 S9 N8 ?- i0 n s6 G
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
2 y d, Z1 x/ {* Q6-6 分类页面开发(Filter面板模块样式开发)
& s( j9 a3 ?) Z: q3 `: ^/ D6-7 分类页面开发(Filter面板模块item逻辑实现)
" f# Y! ~: n. h: V9 N! U6-8 分类页面开发(列表List模块开发)7 H/ Z, Q! x7 v5 E8 s% n
6-9 评价页面开发(UI开发)
! Y" \2 o" Y$ o, w" g( b( k- h6-10 评价页面开发(样式开发)
2 D/ r( N* @ A0 Y7 l& j+ K! K6-11 评价页面开发(交互逻辑开发)) z$ s) _2 W5 B7 ^3 |; F- }
. m" P3 M# J. P3 R Y' D4 G
第7章 美团APP—详情页开发
) M/ p3 }* K! c6 Z1 I; S! ~; b+ j6 H开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。, Y( n* ^' P% D K4 ?
7-1 详情页顶部tab开发(UI开发)
% A0 C4 W) X0 S7-2 详情页顶部tab开发(样式交互逻辑开发) j9 L5 c& I! {0 Y3 b
7-3 详情页点菜页面开发(LeftBarUI开发)& v) E, ], ~) M# _& g
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)2 E& A M0 j+ ~( `* k( X* b% A
7-5 详情页点菜页面开发(RightContent UI和样式开发)/ Y3 k8 I' \/ k: _
7-6 详情页点菜页面开发(RightContent逻辑开发)
2 A' W# S2 }7 {' N7 E+ ~$ R3 {7-7 详情页点菜页面开发(ShopBar UI和样式开发)
$ G6 N3 b2 S |1 z! o2 ~* ]7-8 详情页点菜页面开发(ShopBar 逻辑开发)
2 ~2 l, M) N$ ]7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）& y! g2 u" o: ^6 E$ b
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
. M$ u3 |" A" d4 c8 a8 {7-11 详情页评论页面开发(顶部Header开发)
4 b* V+ ^/ k1 x) Y7 h8 A+ g; a7-12 详情页评论页面开发(列表List 数据绑定)% ]5 W0 @' L% O3 H* }: |) E
7-13 详情页评论页面开发(列表List UI开发)
9 {7 n% T Y* Y- u7 F! u N7-14 详情页评论页面开发(列表List样式逻辑开发)
0 a5 K* n2 ^# V% A' ~% B7-15 详情页商家页面开发(UI开发)
( D- w3 J/ Q* M' H$ \. O' R7-16 详情页商家页面开发(样式开发)1 c, A1 ` x$ z+ A- i: O" d, U
1 M0 J1 [0 p4 `/ h! W
第8章 美团APP—回顾与性能优化2 u3 N- z8 {) L& ~ t
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...# K( W" ?. m2 X5 |0 X( o, V
8-1 懒加载性能优化9 M2 J# B! W$ O+ P/ e& |( g- r
8-2 JS和CSS公共文件抽离优化
3 H, {% m+ B( ~" Q3 ^8-3 编写后台server读取真实数据6 ~* f1 I" \* u7 p1 a, _5 `' S
8-4 多Tab 页切换与滚动数据加载优化% ?* Z) Z. H8 w' o# `! q2 k
8-5 项目打包3 ^; E& g0 f' ]: j! F( ?& r1 x
8-6 项目发布
, b; A7 v: j# {6 E- r+ t* r; f3 j- u: H. A3 b
第9章 美团APP与hybrid深度结合
7 Y, I8 K' F- S7 M- J2 ?8 S. a本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。6 a# B. U2 W. a8 P+ j; q
9-1 JS bridge 原理 试看6 e% E5 d" x7 @8 }% \6 a. n
9-2 iOS webview + JS API接口+iOS APP集成, r1 [7 U: U2 u8 [0 J& \) s' k
* z5 z2 q1 E7 W1 L第10章 课程总结
+ B! Z8 z2 y4 h回顾和总结课程讲解内容，能更好的回归和归纳。
. V. ~6 H9 e0 F6 V7 |* T+ w" Z" @10-1 课程总结
/ k& `1 C0 u, {( F+ b9 _. I
5 b4 [4 }6 b5 P" \% M【下载地址】
7 m2 F* _3 V2 x% G+ K' j/ x& p
; g4 H/ e0 ^( O" ]- P6 Z; w. t8 }. ]6 j% k1 V+ Y( Q$ }
|
[复制链接]
