1 C% ~( f' M. r, O0 }" T
& @/ H# p( M4 T) T% |" I
【课程简介】9 ]1 k8 n4 K( f' p6 g. x
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。7 D0 o% c6 \+ s+ U
, G: j# T+ S( N, _【课程目录】' I+ Z$ g) t( p7 z: E; T J: w
第1章 课程介绍: N2 V i! B. K/ J8 [8 x
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
1 B8 A2 W7 U, ]! w: {4 C1-1 课程导学 试看/ b5 V+ q0 z$ o. \& p+ x) l+ s m
* E9 G5 \6 n2 z& K9 l
第2章 移动web硬知识点
+ X t7 ^. }; C+ T: B, `本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。7 J, C+ I2 R( s1 U# m# M1 k
2-1 移动web开发概述
9 {& _0 X0 r) h& r$ G2-2 移动web开发调试
' t" s" `9 P! w3 k2-3 移动web适配概述1 h/ v% O3 b5 m+ ^1 u- h- `
2-4 viewport视窗概念
1 a! @5 S$ v3 Z6 U" F: e+ y* v9 [( t2-5 css3之flex布局" T0 _1 G# u4 w9 e" d7 ]9 `7 O
2-6 响应式布局和MediaQuery
& ^* o/ n% f( O. b- l9 J2-7 rem,vw布局与适配 ~# [) [2 {2 R9 r' B# j* z
2-8 移动端touch事件详解
4 Z4 }. `8 C+ P) S( C# |6 N6 F$ A' E) A; z. X/ Q
第3章 移动web软技能9 N9 B: X( U- E3 b# W+ K; g
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
/ [7 o) B7 n1 S! o: w3-1 代码管理工具&项目构建工具简介; A- ], P0 x4 ^$ J9 {
3-2 webpack工具使用介绍
: J5 W* A9 Y' i) {3-3 Sass预处理工具使用介绍
7 k$ C# x: [4 J; b2 \; b3-4 React组件化思想 试看
1 H8 @4 s- Y7 m0 S$ [4 O/ ~8 A; w" w( c( N, q5 q2 l
第4章 项目开发构建环境搭建
9 E- |" R9 w8 u- j) U本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。6 I3 I/ \, L$ }% b# a, S$ V7 F
4-1 项目和技术栈介绍
! Q+ B4 B% g5 \- A( a0 v2 Q8 c4-2 项目演示
g, N% |8 c% k( m# a& b4-3 构建环境搭建（1）. z" B5 s7 I9 V) N! U1 L
4-4 构建环境搭建（2）
/ q# Y& j2 b. E- i; P3 p4 ?4-5 构建环境搭建（3）
0 F5 B! P) |; w! b( e- G4-6 构建环境搭建（4）2 t5 p- a) t. a, r$ {6 f5 T* l
4-7 redux-react使用介绍（1）/ O; p/ L! a4 S; w+ n
4-8 redux-react使用介绍（2）. E: J4 L: ~) e( n3 @5 V- T
# m4 |+ Q! ] `' d# a& d) i" K第5章 美团APP—首页开发
: \0 B ]" {$ ^0 ^2 h开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
6 ^+ S& B- C- n( S) X D7 b7 R5-1 底部tab按钮开发(webpack-dev-server配置)( b# e" g+ w& p! ?
5-2 底部tab按钮开发-UI逻辑编写（1）
" Z" T9 b% ~: M& p5-3 底部tab按钮开发-UI逻辑编写（2）! ?9 @( j* {+ ]( P& c4 Z
5-4 底部tab按钮开发(rem配置)
4 p$ h: F4 M5 U4 Y& n5-5 底部tab按钮开发(集成ESlint)5 x, F& M) g& ?( s; Y6 h
5-6 底部tab按钮开发(集成HMR)) { ]: b( o& a- p7 H" u
5-7 首页页面开发Header模块开发
" V7 W& T' {4 I* Z5-8 首页页面开发SearchBar模块开发
/ p' e" ^, ~8 @" m0 p( Y U5-9 首页页面开发-Category模块开发（1）3 L" h R% }' | b
5-10 首页页面开发-Category模块开发（2）" H+ j4 A, a2 H2 K0 z
5-11 首页页面开发(ContentList模块开发)' y; F. N9 W ~4 p( B
5-12 首页页面开发-ListItem模块UI开发
+ R9 c- a& N* K5-13 首页页面开发-ListItem模块样式开发, m. i& G5 T& M6 e8 W6 X
5-14 首页页面开发-ListItem模块数据渲染开发（1）6 t" e: Y- h, a/ j( H
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
* w. v! @* @, t2 f5-16 首页页面开发(滚动加载逻辑实现)
& b6 ~. C$ z# {0 k5-17 订单页面开发(List模块开发)* O7 @2 T8 \/ h% V
5-18 订单页面开发(OrderItem模块开发)（1）
* P+ h3 n% u5 S" M- c" M5-19 订单页面开发(OrderItem模块开发)（2）
5 B, m3 S* P3 V+ s) _' t5-20 订单页面开发(公共ScrollView模块开发)
$ {# T* Q9 c5 |# o/ {5-21 我的页面UI开发
) i9 z1 {# N8 ^& y5-22 我的页面样式开发3 l) Q I4 N+ o2 P T$ H' W
5-23 集成react-router M; O1 k5 Q. \. }9 c
+ a5 F4 n* O6 ` V- j第6章 美团APP—评价和分类页开发3 |6 x! j' L) e' m1 b9 Y
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
$ i+ ?* F2 Q" L2 z/ n- H6-1 分类页面开发(顶部NavHeader模块开发)
3 H8 ?5 t/ U& m7 e6-2 分类页面开发(顶部Header tab 模块UI开发)$ k) u# o2 Q- M: C5 ] H! I6 Y! c
6-3 分类页面开发(顶部Header模块样式和逻辑开发)! B) g5 G* z8 I2 ]5 q) o
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)7 ?: }4 C7 Y- q$ D' |
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
8 w' r4 p/ Y6 t6-6 分类页面开发(Filter面板模块样式开发)1 ?) R7 r b& J' ^
6-7 分类页面开发(Filter面板模块item逻辑实现)
D, q; v5 W5 w, K' u2 c3 m3 f6-8 分类页面开发(列表List模块开发)
- p6 F! r# y5 |4 o) b1 X6-9 评价页面开发(UI开发)1 ]4 [: l, T6 ?0 T
6-10 评价页面开发(样式开发)) }, Y. _1 |4 \! f. ]
6-11 评价页面开发(交互逻辑开发)* r e2 O# d& ~
2 j/ U' L5 g6 [0 P- Q1 L第7章 美团APP—详情页开发
1 P. X5 w: B& M0 c+ ~3 E4 O开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
$ K# H1 J) O- Q! ^6 P9 m; @7-1 详情页顶部tab开发(UI开发)& }9 m# J& E1 J; s
7-2 详情页顶部tab开发(样式交互逻辑开发)" {, }' z. `. A. X
7-3 详情页点菜页面开发(LeftBarUI开发)
! l9 x8 ~( u6 O! V/ ?2 F9 i! x7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)& L7 i* [' L0 R/ }' |$ R6 E. x: Z
7-5 详情页点菜页面开发(RightContent UI和样式开发). |& A6 @: O2 d! l f' d
7-6 详情页点菜页面开发(RightContent逻辑开发)
; V$ Q. Z* r* @& y" c" Q2 q6 z7-7 详情页点菜页面开发(ShopBar UI和样式开发)
" a: p9 q4 i6 D9 a7-8 详情页点菜页面开发(ShopBar 逻辑开发)
. y1 v+ v7 z5 [( {5 |. {7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）6 T6 M$ u8 F$ I4 i
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）* v5 x$ V, Y5 G- d0 \- h2 v/ A+ ~6 G
7-11 详情页评论页面开发(顶部Header开发)
, f: K( H! \6 B; ^ v+ \7-12 详情页评论页面开发(列表List 数据绑定)
! q1 P" I3 F q' F+ Q; ?7-13 详情页评论页面开发(列表List UI开发)
; ?, }8 G: z1 M7-14 详情页评论页面开发(列表List样式逻辑开发)
" N8 I! C- h' k; }8 P3 ~5 K7-15 详情页商家页面开发(UI开发)
`" J n# r8 w7-16 详情页商家页面开发(样式开发)& [/ Z O# l& h1 W$ R* ?/ @
: q( r& o, u' l% \! w; Y1 @第8章 美团APP—回顾与性能优化9 q* [5 H, A4 w! O
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。..." {2 M5 h$ p! {9 d' N, E$ X
8-1 懒加载性能优化
: }( J# a1 K2 i% P4 K& s8-2 JS和CSS公共文件抽离优化
& r5 L( i" o8 F8-3 编写后台server读取真实数据
* e2 u" m* q' {- v( g$ V- E) I3 p: {+ W8-4 多Tab 页切换与滚动数据加载优化
M. a! ~0 i7 T" X8-5 项目打包$ V5 }1 X5 d, o2 t, V: H
8-6 项目发布- R) C; q+ _5 S- L* x2 p
1 B/ w! B* I" T- r- M( ]第9章 美团APP与hybrid深度结合0 |3 |. X7 ]2 o2 U, I& n0 V1 B
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
7 X8 s( k6 X* j9-1 JS bridge 原理 试看+ g8 ] ?4 a1 l6 n, K) H
9-2 iOS webview + JS API接口+iOS APP集成+ d* w: d* z& g
% o I$ b, h& `$ K
第10章 课程总结8 a6 q8 J v6 Q$ [( H6 e, Z% p
回顾和总结课程讲解内容，能更好的回归和归纳。
$ \# {6 o @3 o9 D10-1 课程总结
& x- V$ F/ \1 x5 q
: {& C3 K1 h3 q' ^: h【下载地址】
& Q) P( @3 O7 x: M" S0 x Y; @4 W6 ]6 W& p
: Y' n5 i" ]8 h; H, @0 ?, M |
[复制链接]
