; q1 F& m7 i1 B4 y; g% y Q
# ~, c4 G" \" w: m5 A【课程简介】. u3 g1 o) K4 Z* V
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。2 M9 p& _% k9 U0 O5 [2 P( W) g
3 P) Z: G* H6 ?5 {* D0 X x! B! I6 D【课程目录】
; c5 e g! B2 u; @第1章 课程介绍& d7 v) n# q E" U8 a; ^
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
6 x6 A# B( x3 y5 k, s2 U( ]! ^1-1 课程导学 试看! H f% T4 O" t. k$ }- t8 P
2 U5 n$ c; _6 v% ^$ M- q
第2章 移动web硬知识点0 q9 l9 `' K) h+ v, V. i
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。0 }" y3 D3 T* q9 J& v
2-1 移动web开发概述
. p) U3 U7 R! @ D2-2 移动web开发调试
: |1 b) l" f) S8 l2-3 移动web适配概述
1 z/ f4 O& q) f& `4 I4 ?& A2-4 viewport视窗概念 Y% ?' @ v2 ?( ~7 X: f
2-5 css3之flex布局6 J& Q+ r" f W/ z" L
2-6 响应式布局和MediaQuery
% u5 V, `' K' I6 M8 J) j2-7 rem,vw布局与适配6 C& g( x/ M# B* b3 p3 H
2-8 移动端touch事件详解
, T+ w$ A( @* x4 Z ~* r
# m; `8 U0 @( ~7 C( s第3章 移动web软技能
1 {. O; V4 I" f$ p: y- y本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...' z( p" K! h5 Q8 ~2 Z6 E7 q
3-1 代码管理工具&项目构建工具简介7 _+ f# D+ y# ?8 B0 L9 {
3-2 webpack工具使用介绍3 {: f( V* O% c; u \) K6 k0 ~
3-3 Sass预处理工具使用介绍) k" k+ b Y# [) M' @( g
3-4 React组件化思想 试看; I# Q* P8 X2 [$ _$ V5 o" Y
1 B( `& \8 ~, ]8 x8 f+ E
第4章 项目开发构建环境搭建6 H- T/ a5 I! n. h
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
O0 x: j/ s# X9 t4-1 项目和技术栈介绍
* y8 ]8 H& d; S. w4-2 项目演示7 v! k$ s* \2 S
4-3 构建环境搭建（1）/ u' s' X; R' a+ d6 l- b
4-4 构建环境搭建（2）
( ?" `# Q4 d# e4-5 构建环境搭建（3）$ F# h) c1 j" O6 V/ p1 r5 L+ e
4-6 构建环境搭建（4）' K5 t5 ^4 r6 L
4-7 redux-react使用介绍（1）
: a6 K# }# r. N* R4 q2 |4-8 redux-react使用介绍（2）& v3 G9 a) x& ]0 y
+ _! q& O! W& r" W7 S- m! L第5章 美团APP—首页开发6 j; g; h( Z& i+ t7 L4 |" T6 i
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
# k, I7 W& H9 e5-1 底部tab按钮开发(webpack-dev-server配置)
% [7 O% P0 r) r, e6 M5-2 底部tab按钮开发-UI逻辑编写（1）+ \; v+ B+ X/ Z3 k6 G
5-3 底部tab按钮开发-UI逻辑编写（2）
6 F# m8 J: {* d" {- J4 z/ t* [5-4 底部tab按钮开发(rem配置) g0 K3 \* [, d
5-5 底部tab按钮开发(集成ESlint): T, F/ F2 T# e8 B) \& o
5-6 底部tab按钮开发(集成HMR). o- T1 R* ~6 W) V" ]9 [2 ^
5-7 首页页面开发Header模块开发
( g8 y. U! O. ?" G( k, x5-8 首页页面开发SearchBar模块开发) ~5 g/ A+ v# |2 c6 K
5-9 首页页面开发-Category模块开发（1）' E. [2 g# Y E/ w! H
5-10 首页页面开发-Category模块开发（2）+ f2 B7 x& R6 [
5-11 首页页面开发(ContentList模块开发)& h. U% o3 S" p" @* `
5-12 首页页面开发-ListItem模块UI开发
; v" e+ I8 L6 \/ ?3 L3 \' @5-13 首页页面开发-ListItem模块样式开发7 a4 \5 d# S$ Z8 Q7 q
5-14 首页页面开发-ListItem模块数据渲染开发（1）
% {+ a$ ~% o- W0 |. y5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
- N/ T: H% l: j% j( t4 i5-16 首页页面开发(滚动加载逻辑实现)! @7 g. Y7 _+ ?! ]5 s5 i! F1 i
5-17 订单页面开发(List模块开发)- v* Y% ~% T( n& D: t* e; }% }
5-18 订单页面开发(OrderItem模块开发)（1）
" m0 B# e# P3 S5 [1 P# H, N5-19 订单页面开发(OrderItem模块开发)（2）; W) c: F; r! ]( y2 V
5-20 订单页面开发(公共ScrollView模块开发)
/ e0 B. K0 t, V y& o4 M2 l5-21 我的页面UI开发 C( q) m6 ^) k
5-22 我的页面样式开发
* n% a" g1 v8 M2 k0 U5-23 集成react-router
$ }# E0 Z2 ?( L0 ]
* L( Z" d0 U. Y2 i* }- V第6章 美团APP—评价和分类页开发
) h) M. X. {* `: y' R开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。1 n$ v. G' N6 [; O6 g
6-1 分类页面开发(顶部NavHeader模块开发)5 P! |! c! G7 t. e
6-2 分类页面开发(顶部Header tab 模块UI开发)
# {- |/ [* y9 l1 x# F' @# U$ |7 _6-3 分类页面开发(顶部Header模块样式和逻辑开发)8 y2 A7 h1 U( j4 b) q
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)* c4 H5 b% w3 b" B9 o
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
' P$ N3 c% ]7 z) d* C) l* R1 G9 G6-6 分类页面开发(Filter面板模块样式开发)
# L2 O3 I+ e7 T- L5 ?6-7 分类页面开发(Filter面板模块item逻辑实现)* {# ?# t7 U; f) _1 K: e6 p1 h
6-8 分类页面开发(列表List模块开发)
/ i5 \9 ?# O0 o; }; y6 @6-9 评价页面开发(UI开发): }9 D8 O) F W! W2 r
6-10 评价页面开发(样式开发). z# Q e# ~' J# w& S& c
6-11 评价页面开发(交互逻辑开发)
) U. b/ m7 A9 o% n! G. l5 }& u
4 T+ |% u% K+ j# x第7章 美团APP—详情页开发
' c' r$ Q3 y: t E. u d1 W+ A/ Z开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
; ?# U) W8 ?. S5 d' K7-1 详情页顶部tab开发(UI开发)3 l/ O% K$ c4 t6 w" `- ]7 q1 n
7-2 详情页顶部tab开发(样式交互逻辑开发)
! P n9 a% ?6 r9 t% ?% h1 t/ Q y5 ?7-3 详情页点菜页面开发(LeftBarUI开发)
% f$ |+ b* L0 b M7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)9 G9 n: h/ W9 f* a, [- I
7-5 详情页点菜页面开发(RightContent UI和样式开发)4 P( |* u) Z! x' }8 E' Y- v
7-6 详情页点菜页面开发(RightContent逻辑开发). Y: k1 N0 v7 b
7-7 详情页点菜页面开发(ShopBar UI和样式开发)0 ], l0 d0 H0 y8 Y
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
# S$ m2 @' U2 D& S7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）4 B/ }; n$ d; h, @' \( B+ D4 ~' G
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
% e0 V9 M, R6 r; `' Y0 {7-11 详情页评论页面开发(顶部Header开发)
- s' P- @ y7 y# g. ~7-12 详情页评论页面开发(列表List 数据绑定)+ @8 N/ c1 m# o1 R0 a
7-13 详情页评论页面开发(列表List UI开发)1 w: T6 {6 k. |& A/ S9 \
7-14 详情页评论页面开发(列表List样式逻辑开发)
$ ~& k; r9 { a* h% ~' B- V/ ^. [7-15 详情页商家页面开发(UI开发)' N6 O' n7 a- c
7-16 详情页商家页面开发(样式开发)
% ~: s; P1 @+ v! d6 b V5 f1 s
+ D/ Y+ g8 a E7 i( q7 D第8章 美团APP—回顾与性能优化
8 U" e. N0 }4 e. U" I3 N通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
3 g S. Q7 D7 b* T' W* v8 c8-1 懒加载性能优化8 h" {0 _( V# C/ N1 L2 W
8-2 JS和CSS公共文件抽离优化
0 D T! i7 V& Y& w0 l; e8-3 编写后台server读取真实数据7 I) n; v) g* B4 u: `. S0 N& U
8-4 多Tab 页切换与滚动数据加载优化
- k3 F8 t o% p5 K' l- D8 Z P. n8 e8-5 项目打包5 Z* w( D8 Z' h3 i
8-6 项目发布& k; q8 V8 q7 Z9 ^3 ?1 R
' X1 |1 q, C9 t G% ~) p- D第9章 美团APP与hybrid深度结合) h) f& \0 U% U4 z) i9 Q' W
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。; z+ C+ W2 o+ v2 k6 d
9-1 JS bridge 原理 试看2 B. s% K. I% C- h" H
9-2 iOS webview + JS API接口+iOS APP集成
: o) T* V# C6 _. @& P& B; t
. K" A0 n" w/ o7 w* U第10章 课程总结4 x. w7 a% }9 S% [& U
回顾和总结课程讲解内容，能更好的回归和归纳。
. i( m0 x0 ~. r, W& X. m+ D4 R10-1 课程总结
; p4 d1 \, j5 p& u; J
! o) b" c7 B7 }5 K9 [【下载地址】
" U7 }7 M2 C0 q/ T8 ~! q# P& f; L( `. A" Y9 H3 f+ ?
1 X7 x' j* Y+ {( H$ B( d
|
[复制链接]
