$ A/ a" y J5 F( i
" q0 w) y$ M3 b" A+ G4 M【课程简介】% J$ U4 e) h0 g3 [
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。; f$ V. s, G* L: j% Y
5 H; H6 l# f8 ?$ I% ~【课程目录】
6 c3 e8 b! U6 J, b6 v, P, ^第1章 课程介绍4 {) F: b4 d3 z- n' I
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
! l! ^3 u' ^: N) T; Q0 R- R d1-1 课程导学 试看 `: U. h1 L+ ]' F) y
: |& ^3 \( Q1 }2 W! b$ a
第2章 移动web硬知识点, q1 F% _7 Y# {$ s4 c
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。1 w- E( T3 E* O# r
2-1 移动web开发概述
! N4 [' e' U f' j2-2 移动web开发调试/ P. B7 E9 X9 ^: s1 d2 j: a3 c: ^
2-3 移动web适配概述
( a4 V( ]& q3 u1 X* ?6 y/ b2-4 viewport视窗概念; A% h5 A1 {, S0 Q
2-5 css3之flex布局0 N( A) F6 v* o! b
2-6 响应式布局和MediaQuery6 V' _; C- A7 u/ U$ @2 D
2-7 rem,vw布局与适配
+ r3 e5 i7 w; U- o; F2-8 移动端touch事件详解
7 B5 n! l- X) s3 V, A" a4 y: ]1 N. w& ]" w& U0 n
第3章 移动web软技能
! f4 U1 V0 L' p7 x( n$ ~( V本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...* l- `# e5 Y7 [8 `7 T7 l9 P
3-1 代码管理工具&项目构建工具简介: ^. `% {7 {' ~1 _" X. Z7 t
3-2 webpack工具使用介绍
0 o6 L H4 d) O% T: o3-3 Sass预处理工具使用介绍( J) i" T4 F- t5 G+ `
3-4 React组件化思想 试看
* C" b! Y0 B8 r$ F4 r2 d. X5 j' G2 F; }2 w
第4章 项目开发构建环境搭建7 n% \# I6 K2 _
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
& K% r: m/ c0 F0 G& g3 @4-1 项目和技术栈介绍- M% G8 P3 A/ }0 j
4-2 项目演示# T' Y( a; W! o$ p8 x" @: w9 Q T
4-3 构建环境搭建（1）
' {! r! d' G5 V3 X; |8 R4-4 构建环境搭建（2）
6 o. z' q. `3 [- O# d2 F0 O I4-5 构建环境搭建（3）
" ] ~5 h" g! y* d. P) L& `4-6 构建环境搭建（4）; |( {5 O. ]5 F7 ^4 Z7 R
4-7 redux-react使用介绍（1）+ U& D( ^$ R: V" m
4-8 redux-react使用介绍（2）
+ C3 \/ @) D, F2 }; m9 [, W- H2 n" p) I: W
第5章 美团APP—首页开发
o6 D- \- x- |开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。5 w* p1 o: V3 S0 Z
5-1 底部tab按钮开发(webpack-dev-server配置) o. W0 G: l' K; [( h
5-2 底部tab按钮开发-UI逻辑编写（1）! h; f1 [! t; `( B
5-3 底部tab按钮开发-UI逻辑编写（2）
4 I. `: B$ J; p+ {5-4 底部tab按钮开发(rem配置)
# D+ T. M+ e3 \% b+ P, z/ N/ O5 _; i) J3 b5-5 底部tab按钮开发(集成ESlint)2 J+ Z% P. k7 N( R; c3 T+ u1 j' ^
5-6 底部tab按钮开发(集成HMR)
: i3 p J9 n% A# Y" c9 B' Y5-7 首页页面开发Header模块开发, j5 ?' p8 _; w& T% S+ F
5-8 首页页面开发SearchBar模块开发5 h' q+ q* i, k2 F
5-9 首页页面开发-Category模块开发（1）
x4 q8 B* i5 ^+ e% g' N" g5-10 首页页面开发-Category模块开发（2）1 c3 Q& H: g, x
5-11 首页页面开发(ContentList模块开发)3 F* I4 C' y# X3 F0 }/ ?3 `
5-12 首页页面开发-ListItem模块UI开发% P# y* B' D/ I/ F# E; C
5-13 首页页面开发-ListItem模块样式开发% w0 b( K0 P2 k G( A- b
5-14 首页页面开发-ListItem模块数据渲染开发（1）( z, }0 w. e: ^. D A3 w
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )) }; M& k$ }4 b$ H& Y1 s/ |8 G
5-16 首页页面开发(滚动加载逻辑实现)) K6 w6 d: B( n
5-17 订单页面开发(List模块开发) b+ L* j$ M3 M) \' p
5-18 订单页面开发(OrderItem模块开发)（1）: z/ W) g) p+ C" F6 `$ Q/ X5 O
5-19 订单页面开发(OrderItem模块开发)（2）8 _: d- O7 E7 R' A
5-20 订单页面开发(公共ScrollView模块开发)* g. F- u. j2 ?, `- k* n% l
5-21 我的页面UI开发. `& |$ A9 m3 H+ p0 U
5-22 我的页面样式开发8 S! {9 k! b; T& f+ C. l n; u0 j
5-23 集成react-router' t @! q& T8 V* B) v, r0 M
2 e! r" E7 U' h4 k1 I第6章 美团APP—评价和分类页开发2 @) v$ D" B9 R! r$ s& m% Y
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。6 l6 f# C# b( n, ~& v9 h* u
6-1 分类页面开发(顶部NavHeader模块开发): ~9 M# \7 @1 f" q. \
6-2 分类页面开发(顶部Header tab 模块UI开发)
9 P: s/ L1 y! f9 ]6-3 分类页面开发(顶部Header模块样式和逻辑开发)
; C! t2 C; Q- b3 T6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发) Q( |$ D1 D2 C& j. | z+ ~
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
" Q; v4 l# I. [6-6 分类页面开发(Filter面板模块样式开发)
) f. G/ C& n! r+ @6 Y% F, d( n6-7 分类页面开发(Filter面板模块item逻辑实现): X+ z6 Z4 z# n* I. U" ?) H; S
6-8 分类页面开发(列表List模块开发)+ D6 o) c& E( K8 B& v. b
6-9 评价页面开发(UI开发)
7 q; N% x* [( \" J- ]( |6-10 评价页面开发(样式开发)
' k, h: R' t( |' P4 \6-11 评价页面开发(交互逻辑开发)3 c) z/ _7 x0 h+ Q/ ~3 Y
+ ]9 U# ?* @+ g9 [ c第7章 美团APP—详情页开发
. \" ]( `2 _, E; R3 q开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
5 s$ \/ U: h2 T1 t% V7 C/ q1 @$ O7-1 详情页顶部tab开发(UI开发)" L3 g1 P- Y3 o1 j+ r: [$ a
7-2 详情页顶部tab开发(样式交互逻辑开发)8 Z* a% J. Z- R8 h
7-3 详情页点菜页面开发(LeftBarUI开发)
% {* C) f2 z+ ?7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)- Q* K& w) P- x5 {7 ~8 l3 z
7-5 详情页点菜页面开发(RightContent UI和样式开发)" }2 X }% y/ Z1 u5 Q5 \9 n- X! l
7-6 详情页点菜页面开发(RightContent逻辑开发)$ t. E6 E% F# u4 B7 h& F7 A3 {: V2 Y
7-7 详情页点菜页面开发(ShopBar UI和样式开发)4 g7 G3 z3 }! ?( i' w( l
7-8 详情页点菜页面开发(ShopBar 逻辑开发)0 V- f; s6 u: P' s
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）' d$ W; O- d: O, R8 E% G
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
1 j) W0 ?2 q+ J# K$ I7-11 详情页评论页面开发(顶部Header开发)
% v- w2 H# q$ @7-12 详情页评论页面开发(列表List 数据绑定)3 x2 x( E/ W, n8 [! U
7-13 详情页评论页面开发(列表List UI开发)
h+ h1 w' K* W! Q% O' k; ~7-14 详情页评论页面开发(列表List样式逻辑开发)
' \& Z, T" A f, T3 H7-15 详情页商家页面开发(UI开发)" L0 \3 l% c0 U3 U
7-16 详情页商家页面开发(样式开发)6 ]. u5 x9 q" ?2 F: }3 o! ?
2 x3 Z* o# l8 @+ N* p7 o
第8章 美团APP—回顾与性能优化9 {; \) l, n5 Y6 k& U& R
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
+ n, W+ V+ p; C8-1 懒加载性能优化
/ Z, J$ K' u" X: j+ G; w( O8-2 JS和CSS公共文件抽离优化
! |% u1 W1 I. L3 n( R. h. _; Y8-3 编写后台server读取真实数据! N- t# ?! C0 V9 A
8-4 多Tab 页切换与滚动数据加载优化
5 O! \/ g- e1 |' j9 P/ ~8-5 项目打包
3 A6 x( l% \- n4 G8-6 项目发布
+ J2 ~& E$ e$ k4 {( w; `! e* j
' B+ u" s% `+ F+ c' G第9章 美团APP与hybrid深度结合+ [1 y ^* |- L1 J# f
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。+ \, G4 @7 P8 ]1 A, j5 `5 ]
9-1 JS bridge 原理 试看5 W; j1 K* I' o8 O" H9 M
9-2 iOS webview + JS API接口+iOS APP集成( w8 I+ I$ p; D% L+ Y0 z
7 {8 C1 Y4 s& h) p: H( s
第10章 课程总结6 Z8 ?( D6 e( r% x$ t+ I
回顾和总结课程讲解内容，能更好的回归和归纳。6 r B; ^/ K' _ z
10-1 课程总结. b) D& @6 y6 Y- e) f8 ]: D
8 l3 [7 f! D0 b* A9 T1 q( L4 F7 ^4 W
【下载地址】
4 ^6 v6 D: r+ M& v. O$ U% V& r. v0 ~/ R/ n8 m9 `. z+ Q1 K
% r/ N. V# F$ V9 ]4 q8 { |
[复制链接]
