5 g/ l! d1 N i0 t9 m+ Z' f3 X9 p
: t& V! V2 R9 y5 K" B$ Q【课程简介】
& E9 ` d( i1 R# T' m本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。( F- ]% P" F$ H" T
# k9 O9 [8 W/ {- s0 Z$ ~, h' r
【课程目录】
$ Z7 p( C4 R) q, k5 d第1章 课程介绍
3 h% L$ y& j- ~3 k9 p' v' P* {% J通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。- }0 w: k4 e9 `1 Q8 E9 M% `
1-1 课程导学 试看* C; w! Z. m7 `# g! K
% O: I5 o7 d8 N: _5 p: D, @
第2章 移动web硬知识点( |* u% O- {4 k: z( {& s/ K! H5 A& r A
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。: ]$ Z) g: C% A8 |
2-1 移动web开发概述
& \2 k. I4 q+ ?( e2-2 移动web开发调试
9 }3 C( a2 b& v0 d2-3 移动web适配概述
0 y' U" ^# D+ Q6 H2 @/ J9 b2-4 viewport视窗概念! ]. ]7 u" c% ~7 d3 F4 P
2-5 css3之flex布局
( X( x! O2 t9 V y: M* l b% D2-6 响应式布局和MediaQuery
; G1 g! V) D/ W0 n6 M2-7 rem,vw布局与适配
9 x( X3 k j1 M+ m/ K. ]: ?8 w2-8 移动端touch事件详解: H8 ] p5 y+ T
3 y ]& z" M: B7 U7 d! C: c9 Z
第3章 移动web软技能
6 j$ a! b0 ^4 J) C. N) _9 j本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
1 ^2 b U x. s' H3-1 代码管理工具&项目构建工具简介
) G+ w4 E. a+ l0 {4 [5 {3-2 webpack工具使用介绍
3 r4 d8 x' s) E; m% z$ z0 e0 s3-3 Sass预处理工具使用介绍
: Y, T" @7 ~- ]+ N3-4 React组件化思想 试看
9 _5 {6 |# r2 \1 D V5 }( t
+ n; @, v6 @6 w7 y第4章 项目开发构建环境搭建
; `$ \; O7 Z* h% ^, D8 Q本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
: ]6 V k. T w7 u" f/ y9 o1 j4-1 项目和技术栈介绍" c8 V) R% T h- w
4-2 项目演示* H% e0 F( o {+ A
4-3 构建环境搭建（1）0 r0 o' C; [ g8 }1 q
4-4 构建环境搭建（2）; v$ K& K I$ h! F: D5 b
4-5 构建环境搭建（3）
. _- C) b2 \& E- y- F4-6 构建环境搭建（4）* U( E# G) I5 x
4-7 redux-react使用介绍（1）- Y r& i: j9 G: a i
4-8 redux-react使用介绍（2）
; D8 F( M' n( J, y6 q4 C" @' x; M" J ], b) c" K. w
第5章 美团APP—首页开发' e# i' V i- Z7 z: ]' J1 ?: E
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。* Q- h3 r" g" n
5-1 底部tab按钮开发(webpack-dev-server配置)9 X7 g( N$ O( r( u# k3 U
5-2 底部tab按钮开发-UI逻辑编写（1）
/ G# ?* |5 ]% [6 I% A( s5-3 底部tab按钮开发-UI逻辑编写（2）, N% t; f, u' z) m4 `
5-4 底部tab按钮开发(rem配置): O$ R( n# t. o5 b- ?5 c0 J
5-5 底部tab按钮开发(集成ESlint)
* J. Y) {: @9 N5-6 底部tab按钮开发(集成HMR)
1 b1 }, o# i d6 u5-7 首页页面开发Header模块开发9 y6 C" S5 Z6 S9 K/ D0 `9 q: b9 `
5-8 首页页面开发SearchBar模块开发
6 D1 Y! t3 k8 e q3 I; w5-9 首页页面开发-Category模块开发（1）+ _; D% T) g2 F* V
5-10 首页页面开发-Category模块开发（2）% ^' m# o) S! s3 s2 `# A
5-11 首页页面开发(ContentList模块开发)" |& Z$ v3 {8 o( B' X* F( k
5-12 首页页面开发-ListItem模块UI开发" ~* h- _* [6 r
5-13 首页页面开发-ListItem模块样式开发
+ T: [; ^) _) M- C+ l* P) z6 a5-14 首页页面开发-ListItem模块数据渲染开发（1）
- j+ ~- G- j! T! G5-15 首页页面开发-ListItem模块数据渲染开发( 2 )0 f2 d+ M# l$ q' v2 M- O# w
5-16 首页页面开发(滚动加载逻辑实现)9 [! n/ e ]) d4 s) \+ S$ e
5-17 订单页面开发(List模块开发)
. w* X3 A) i/ v4 C5-18 订单页面开发(OrderItem模块开发)（1）- d6 C6 u( |; n# Y1 n# k0 u
5-19 订单页面开发(OrderItem模块开发)（2）
. i: @1 |: k Y7 J- r J5-20 订单页面开发(公共ScrollView模块开发)) v6 [2 l5 v y1 f N) |
5-21 我的页面UI开发& E g( F- @: f: ~3 p1 Y
5-22 我的页面样式开发
! K* _4 u& A1 d a5-23 集成react-router" ^! R3 t5 u0 q- |- M
' S9 h* K( }' } k第6章 美团APP—评价和分类页开发
5 ], \% O+ Y+ C1 o开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
! g3 D- x2 |7 l6-1 分类页面开发(顶部NavHeader模块开发)
; f, z0 f" [' @/ ]6-2 分类页面开发(顶部Header tab 模块UI开发)( v: g* j& e- ~1 v/ S z6 X. V
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
! e# P$ l% p6 \2 L# \- i) F, U6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
7 `1 g0 a, c& x) B6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
# m6 x9 k; B3 `2 W/ D4 X# {5 i6-6 分类页面开发(Filter面板模块样式开发)) }6 @& f( \1 u
6-7 分类页面开发(Filter面板模块item逻辑实现)9 e* c1 y$ J* W* N! y. b7 ]+ a
6-8 分类页面开发(列表List模块开发)
/ F% l2 F7 {# a* |4 e* L8 P6-9 评价页面开发(UI开发)
) {; v; [- {- i1 s& M" t4 S: H6-10 评价页面开发(样式开发)
0 J# d% ?7 g5 }4 f6-11 评价页面开发(交互逻辑开发): \: k7 S" L' P; X; J) `
- ^& T# n" P9 J第7章 美团APP—详情页开发. t6 u. Y- @/ f5 w }
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
( |1 }" ]9 G0 p- n7-1 详情页顶部tab开发(UI开发)6 }" e4 r8 ^& _- e, N O
7-2 详情页顶部tab开发(样式交互逻辑开发)
% i0 N I4 M. v% [! s7 y7-3 详情页点菜页面开发(LeftBarUI开发)+ p/ W" ], g) q5 X1 X# x
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
) g) T8 m6 A+ I, T6 T' u% }- N7-5 详情页点菜页面开发(RightContent UI和样式开发)
) N' _8 p+ U) R& m. A. K7-6 详情页点菜页面开发(RightContent逻辑开发)( @' e' _ r s6 V4 x" f- u5 Z
7-7 详情页点菜页面开发(ShopBar UI和样式开发)+ u( j5 y& X4 ]- {
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
) I3 e9 x7 i2 m4 ^$ r9 ]7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
( d- ~ s( w6 m; H) ?5 d. I% H C, O) k7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
3 b* _+ ~$ q* |. H( u- h+ b7-11 详情页评论页面开发(顶部Header开发)
6 l7 O7 u% v0 E( n. S2 Z7-12 详情页评论页面开发(列表List 数据绑定)
& {+ H+ ~. X# h; x: l% I; j7-13 详情页评论页面开发(列表List UI开发)
1 E; ]+ M( e3 B+ V7 Q6 t# s7-14 详情页评论页面开发(列表List样式逻辑开发)
* t; L n0 p) h* @0 L/ A: X7-15 详情页商家页面开发(UI开发)
2 z7 i# `' ?0 d4 y( X- U# O7 A7-16 详情页商家页面开发(样式开发)' h0 M! |$ W5 N n5 U/ F
' V* J6 n" W3 I第8章 美团APP—回顾与性能优化" L4 C: k* \$ i6 Q
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...! F% N( w' L7 I, C+ x5 ]+ U
8-1 懒加载性能优化; ^; x" d( `" \1 o$ w& ?, e2 ]
8-2 JS和CSS公共文件抽离优化+ P1 |6 R" ~* X6 q9 T! @8 j7 R
8-3 编写后台server读取真实数据
6 p' V6 V X4 V# a2 c# t- `$ ~8-4 多Tab 页切换与滚动数据加载优化
8 O5 R' g4 n; }4 c7 W1 R3 g1 H8-5 项目打包
7 A9 `9 d7 f; h1 h* H! b4 h8-6 项目发布
; g l9 l- W* c3 _. P# c; T- L+ W9 A3 [( I' v) H
第9章 美团APP与hybrid深度结合
% Z! _6 d2 h( C( E4 @本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
, T4 m6 b) G' D2 n$ {/ H% n" N9-1 JS bridge 原理 试看
]2 i% i2 [; E/ e3 f3 G" P9-2 iOS webview + JS API接口+iOS APP集成
/ E! I" b2 `( Y/ P/ I& U7 |
8 P2 w0 W9 U' g1 x' ]第10章 课程总结
! e6 }/ V" l( N% {# m回顾和总结课程讲解内容，能更好的回归和归纳。
* G. K7 b4 ], [9 l, V5 ~& G, f4 m4 [10-1 课程总结
8 {* x& P/ G, `, l9 L% v- i! c2 z+ o% [" c2 K4 ^/ T' r
【下载地址】
6 C0 h5 N9 y, d' _5 u; d' @" }) ]8 D4 |$ y
) b0 _! Q) \+ r3 k& c |
[复制链接]
