& O- o- S+ k4 M! l/ ~- e; D3 Y8 ]
- L% ~! G. P/ ~4 V【课程简介】
9 i! M# g) F) I# V本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
0 `6 L" S3 R) W& [* a# v& T6 V7 m
【课程目录】 _9 K- [4 g2 V, J9 M) b
第1章 课程介绍
. N6 l2 D8 w r! w6 k通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
- I3 _( w5 c& w* b1-1 课程导学 试看
3 \( G7 w, w6 l+ C
$ \& ?) I: ~/ X1 X8 M# |6 \: ?第2章 移动web硬知识点
1 g* P% f: Y; B, a% G' G" C `本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。0 X F8 A6 O% V
2-1 移动web开发概述
" }3 H3 m! V4 K! k/ e2-2 移动web开发调试
1 x& x% i* m+ ]# j- ~5 Z2-3 移动web适配概述 |6 l- a3 [0 S T$ w
2-4 viewport视窗概念
3 d7 }4 O- I8 L6 I$ a* v2-5 css3之flex布局
( C0 e7 \, l2 R( _/ f7 G9 C2-6 响应式布局和MediaQuery
& A6 a% ^* Y3 |6 u% b2-7 rem,vw布局与适配
' X/ b+ z" X- [" k9 L# e% D2-8 移动端touch事件详解
7 A4 O# o9 N7 n3 M! u) O' z d9 ^4 C8 C4 E8 h- t8 J& a
第3章 移动web软技能
0 C @1 ]: Q4 X. G- W. `本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...: i& I5 }+ M6 r2 e. q, ]
3-1 代码管理工具&项目构建工具简介9 c( s! Z+ P9 m4 G& p4 w
3-2 webpack工具使用介绍0 I+ c7 ?+ @. e0 F
3-3 Sass预处理工具使用介绍: M0 X/ e/ |2 J; p r: M: K8 q
3-4 React组件化思想 试看
& ]" C" K8 U X4 j
1 R. ^0 f2 E2 i% }6 K9 m: i第4章 项目开发构建环境搭建
+ w8 J7 o; R$ |+ ?# g本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。5 C( N& k" F$ E# W9 _2 R3 H6 y
4-1 项目和技术栈介绍( K* ~1 V+ s: v( {9 N+ r
4-2 项目演示/ n% A/ P1 M: D t: L: [
4-3 构建环境搭建（1）+ s( v" m, J) P) }4 l; _' T! K. g
4-4 构建环境搭建（2）
7 b$ w& R/ L: {) A% E/ H4-5 构建环境搭建（3）
- E; E( K$ G7 o6 U2 ?4-6 构建环境搭建（4）
9 E% i! l( U) V( O" Q* p7 f, V, R4-7 redux-react使用介绍（1）, m1 |' t3 c6 y4 N+ ~# S6 p
4-8 redux-react使用介绍（2）. v' N. R# u: d
/ G+ t5 s5 A1 j+ ^% b2 X* L3 }- Z( k) A
第5章 美团APP—首页开发
- z U5 Z2 t9 ^& Z开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。: I6 L3 J9 H, u" H4 t
5-1 底部tab按钮开发(webpack-dev-server配置)# Y9 o7 g( @/ U2 y7 E3 K, t
5-2 底部tab按钮开发-UI逻辑编写（1）
, F) a& L9 A o) p+ Y. K5-3 底部tab按钮开发-UI逻辑编写（2）
# Y5 C4 d! H) r! r5-4 底部tab按钮开发(rem配置)
: G1 ?; s' |" p0 F5-5 底部tab按钮开发(集成ESlint)& B- g5 }$ ~/ l( ?5 y Y
5-6 底部tab按钮开发(集成HMR)
2 u! Q' Q" K. i0 p5-7 首页页面开发Header模块开发8 \$ ?4 v, W3 D# w2 @
5-8 首页页面开发SearchBar模块开发5 _5 U) C* c( p7 Y" a T
5-9 首页页面开发-Category模块开发（1）1 [1 p$ ?7 R* {% s8 ^5 n! ^
5-10 首页页面开发-Category模块开发（2）, u: w# I$ |! g4 n
5-11 首页页面开发(ContentList模块开发)
/ u- B: [& K* z" m! z' h$ L5-12 首页页面开发-ListItem模块UI开发! k& z4 }, \( B/ l' o2 F1 O
5-13 首页页面开发-ListItem模块样式开发6 d, o; E) p e1 K! e8 A
5-14 首页页面开发-ListItem模块数据渲染开发（1）
5 V4 j# G$ ~2 y& X) p) T5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
0 m" c9 u+ a4 N8 S" f5-16 首页页面开发(滚动加载逻辑实现)
3 F/ c1 S8 A& I! D5-17 订单页面开发(List模块开发)0 S( @2 z4 ?6 ]1 P
5-18 订单页面开发(OrderItem模块开发)（1）
, j, U, s1 Q. A; Q8 e( i5-19 订单页面开发(OrderItem模块开发)（2）
& |; f/ u& O8 l& b5-20 订单页面开发(公共ScrollView模块开发)
- y% r7 T6 O$ t- k' M& [7 m+ ] b( U# P5-21 我的页面UI开发
; y0 f' {8 G$ p) c. e$ O; D, ?5-22 我的页面样式开发
" j( ]" B. t1 p5-23 集成react-router
3 z0 g" t& N0 ]0 B1 Z
+ i6 W; a; ?& O; i1 Q) A. U _' r第6章 美团APP—评价和分类页开发6 o6 Z- }9 ^2 @$ T+ n; n' _
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。9 ^! A& J. A1 U# g! V( j
6-1 分类页面开发(顶部NavHeader模块开发)- f9 N8 Y4 { I5 J L4 C" X# m
6-2 分类页面开发(顶部Header tab 模块UI开发)
1 M. S3 C. k8 A% X6-3 分类页面开发(顶部Header模块样式和逻辑开发)
' _6 h) A; C& p0 ^6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
" y8 n2 G' Q* J# v/ i6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
* e2 }4 M3 L" u& v3 \6-6 分类页面开发(Filter面板模块样式开发)
7 g1 B- A4 f" d6 o* Q0 U1 Y1 o6-7 分类页面开发(Filter面板模块item逻辑实现)
1 D7 r3 c$ C3 d0 O3 `6 g( F6-8 分类页面开发(列表List模块开发)
. R! @) D; L: Z. U# u. `: ?4 i6-9 评价页面开发(UI开发)1 i* Y3 ^ N0 b8 p7 J% w
6-10 评价页面开发(样式开发)
, o& M; j4 R: U6-11 评价页面开发(交互逻辑开发)
# F, m9 U8 Z2 g9 w% O! T) T- V0 J/ P* f. W# H- Z7 {3 h
第7章 美团APP—详情页开发" B1 a& H6 y& r- y; G: B
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
$ H A" [6 \) W8 s: y- {& `$ `3 O7-1 详情页顶部tab开发(UI开发)
! B' p9 Q1 w& H/ v9 n7-2 详情页顶部tab开发(样式交互逻辑开发)4 h7 y5 g) r8 \" x }
7-3 详情页点菜页面开发(LeftBarUI开发)
8 H& k& A6 V; M" L' C5 N7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
! \: C& W' F, u4 r0 \7-5 详情页点菜页面开发(RightContent UI和样式开发)( |& T/ A) D( t L! V T/ C9 {
7-6 详情页点菜页面开发(RightContent逻辑开发)
, U2 ?; k/ p/ c/ V3 y7-7 详情页点菜页面开发(ShopBar UI和样式开发) w; d! s s% ^" P' E# W3 m
7-8 详情页点菜页面开发(ShopBar 逻辑开发)# G! N* F% x9 r. x6 N( P* z* Q% b
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）: h! o" ]# B! W7 N4 M
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）) v/ J& \* I% q! C
7-11 详情页评论页面开发(顶部Header开发)9 B- y6 I; o& [
7-12 详情页评论页面开发(列表List 数据绑定)1 n) I/ D9 s# Q6 s! g; Y& e# i
7-13 详情页评论页面开发(列表List UI开发); c: W* B! s# K& a( K1 P
7-14 详情页评论页面开发(列表List样式逻辑开发)3 J# K) \: y8 x5 ]. V
7-15 详情页商家页面开发(UI开发)8 g0 q! x4 ^" K# _0 M' @
7-16 详情页商家页面开发(样式开发)+ c; b/ X7 T( v1 }3 X" k* K
B# H0 B6 C% h( n2 J2 A
第8章 美团APP—回顾与性能优化
5 y3 n/ P5 I* J0 X; M通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...- Y& ?8 _ K% ^! H2 d& I
8-1 懒加载性能优化
& l8 v# Q( U; M3 j0 H; g& i$ k0 e8-2 JS和CSS公共文件抽离优化
+ j# R; i" ?3 u! r6 R3 K- q8-3 编写后台server读取真实数据, D2 T6 n- W9 A. ~% q+ T$ Q9 Q
8-4 多Tab 页切换与滚动数据加载优化+ i5 O9 S" s0 k7 U8 I5 P Q g" j
8-5 项目打包
- ^# J* ]" f* p% o; X1 _8-6 项目发布) O, q% R+ w5 t/ K) d; \
7 {5 d& t" S- U4 L- P9 h- f: w
第9章 美团APP与hybrid深度结合
/ l0 C! N7 x e: N. ], O7 a本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。! A! }4 O( v1 ] J1 ^
9-1 JS bridge 原理 试看
( B3 d, o: U" E1 P* T' }9-2 iOS webview + JS API接口+iOS APP集成
% l# A! Z \9 d6 E0 m9 C# c% o. L
9 p: m% p, r. s; T8 i. B: l第10章 课程总结& K5 v: ~6 L4 C L# t3 m+ [
回顾和总结课程讲解内容，能更好的回归和归纳。# P( ^$ F# _6 {
10-1 课程总结- D) M) ]; Q" m, P; b% L3 r ~
) u8 x4 O' C' w* b4 {
【下载地址】
7 ~7 C& L$ ?+ m! S8 A# s/ Q6 E' i
( _9 d# l) m0 I8 x
8 G8 F' G2 e6 \. {' k |
[复制链接]
