4 w3 Z! L% y5 ~$ s0 z" J) A8 z9 ?
/ E& A( T1 }; Q6 o6 `: S
【课程简介】' P$ r) J, A X$ q r
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
d8 T1 e/ L. B
- J W F9 q# y \4 d/ s【课程目录】. L7 r n) ^7 g& N, [% d
第1章 课程介绍! z+ o% X+ p& E+ e- r/ s
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
( j- @. g" }; h' M0 C" g( e1-1 课程导学 试看
4 u# \. u9 ?& \+ @7 ]- ^* [5 O% E
* L$ I4 u# }. r9 E l) Q第2章 移动web硬知识点
3 n- Y f% I3 { I! m本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。( G, p& N; \! }4 e4 a- P
2-1 移动web开发概述# J& s( J4 N. n
2-2 移动web开发调试
2 P0 {5 x- e: c! W) Z6 {( X2-3 移动web适配概述
$ Q+ [0 O) k4 a& _6 t/ p2-4 viewport视窗概念
7 R3 L- W$ Q, J" f: C/ i2 ]2-5 css3之flex布局8 T- n1 \* A" A
2-6 响应式布局和MediaQuery
6 X! [6 m$ O0 ~1 O9 T/ B2-7 rem,vw布局与适配
O- ~ f' o% ?0 T2-8 移动端touch事件详解 g0 }9 h) c" U- @; o
% A+ t* w) }1 R+ [
第3章 移动web软技能( `- Y& }: \. {* ]* k
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
" B$ D5 L' X5 ]3 E3-1 代码管理工具&项目构建工具简介
* W; _( ~7 Z' k Z3-2 webpack工具使用介绍
2 K3 g# L4 E# e. P ~: r& B3-3 Sass预处理工具使用介绍
5 e2 m4 V' |" x0 a3-4 React组件化思想 试看& ^9 r3 u3 ^' d1 h& U
$ ]" d( |) U& S/ \# I& W
第4章 项目开发构建环境搭建
7 F5 v {! C; ?% U4 A本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。. [9 s. e* p4 S3 q$ @
4-1 项目和技术栈介绍
) l( R0 C! v! P& o7 u4-2 项目演示. y2 G: ^" A8 c8 Z* b) ~
4-3 构建环境搭建（1）
% W8 \- Z7 C- b% S& D( | @4-4 构建环境搭建（2）
! R' o1 |0 m6 X8 j; o e4-5 构建环境搭建（3）4 o) ], L6 H- [6 f- b
4-6 构建环境搭建（4）; S4 K) Y& S/ x( I; l Y
4-7 redux-react使用介绍（1）
" D& t. G. x; Q4-8 redux-react使用介绍（2）7 _( X( s3 o7 h: y0 f
) B5 D) k& n! Y% A$ G- U" J
第5章 美团APP—首页开发
* H' }& t! M: F; Z w开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
' Z" y* ^# k- z# [( |6 [8 \* b9 W5-1 底部tab按钮开发(webpack-dev-server配置)
. M4 x8 Q: {7 r& l9 `' u2 ^' ^: G% k7 o5-2 底部tab按钮开发-UI逻辑编写（1）
. J/ x" C/ {9 ]5-3 底部tab按钮开发-UI逻辑编写（2）
2 E1 B; o8 l- L6 J5-4 底部tab按钮开发(rem配置)0 i5 V9 y+ i& `! z, q. ?* D
5-5 底部tab按钮开发(集成ESlint)2 I5 M7 U2 v! `. L- H: a
5-6 底部tab按钮开发(集成HMR)8 m7 j4 S, A6 h+ z$ ~/ t
5-7 首页页面开发Header模块开发4 f& ~: j- x* k) e' | a! d
5-8 首页页面开发SearchBar模块开发
* T5 U$ M9 i" S% K5-9 首页页面开发-Category模块开发（1）
4 T1 n! k" i2 \4 j5-10 首页页面开发-Category模块开发（2）) V( E/ t& j0 L* E& U. g5 h
5-11 首页页面开发(ContentList模块开发)* M( }4 |6 ?9 x% w6 K8 L0 Y
5-12 首页页面开发-ListItem模块UI开发
) `5 T" i, H) r8 S. w- R5-13 首页页面开发-ListItem模块样式开发
6 d1 c6 q* I n( n( q1 }5-14 首页页面开发-ListItem模块数据渲染开发（1）
& t& j- M& u; b: N# g3 U$ W* w5 H! A0 f5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
2 @* G# ^: I5 X5-16 首页页面开发(滚动加载逻辑实现)
# M4 e4 V, N |' s5-17 订单页面开发(List模块开发)
) m* ]9 Z1 ~" ? l5-18 订单页面开发(OrderItem模块开发)（1）
% y! ?6 r% n, I. w c; G" E6 W5-19 订单页面开发(OrderItem模块开发)（2）
7 p, g4 I; p2 u3 P& ?( e5-20 订单页面开发(公共ScrollView模块开发)
K# Q/ S# b+ ^/ A& ~* y5-21 我的页面UI开发3 A+ `" v# l( P# N; R
5-22 我的页面样式开发: x' L/ ?$ Z1 {
5-23 集成react-router
/ j0 w7 f0 x# X
9 V# ?% N% W4 W0 ~8 X6 u第6章 美团APP—评价和分类页开发
2 ?/ o9 l) T) U/ a2 d开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。9 T4 h( o& A1 b# q2 {: X# d
6-1 分类页面开发(顶部NavHeader模块开发)% a- S3 |1 z: ]6 }" I2 ]& F* k
6-2 分类页面开发(顶部Header tab 模块UI开发)2 x, ~# E" m7 p
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
$ J( c& f+ z# ?. W) P+ W6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)6 w% {1 g) I0 @5 B. y! W4 T3 m: w
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现) ?+ z5 u9 z2 u% G
6-6 分类页面开发(Filter面板模块样式开发)
! V+ O7 I5 C. V$ {' B6 Q7 c6-7 分类页面开发(Filter面板模块item逻辑实现)
5 P" t3 }3 e) `% b6-8 分类页面开发(列表List模块开发)" Q" Q+ l" m$ T
6-9 评价页面开发(UI开发)2 w$ j2 P5 r, I4 R: F! P
6-10 评价页面开发(样式开发)
( k8 q; w% W8 ~1 G6-11 评价页面开发(交互逻辑开发)
P$ r6 |; V/ X% z, H& t- A
, f. t4 G% s8 W" ~5 T7 Z第7章 美团APP—详情页开发. O0 R. U( n3 Y, u; O
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。" ^, m0 Y1 [# M3 [% U' N X
7-1 详情页顶部tab开发(UI开发)
' u% }9 x2 w& e4 B1 H- Q4 |8 [7-2 详情页顶部tab开发(样式交互逻辑开发)
& d9 V+ |7 d) U/ H5 x7-3 详情页点菜页面开发(LeftBarUI开发)# W' z. P7 H3 k- G
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
" R- K+ q, B- B" k" u7-5 详情页点菜页面开发(RightContent UI和样式开发)( ^, y9 o- j% Z& J4 [+ l3 H u' G
7-6 详情页点菜页面开发(RightContent逻辑开发)
8 o' V4 `( F1 k! v! |. }8 e7-7 详情页点菜页面开发(ShopBar UI和样式开发)
1 B/ v; A `& r5 x' c" i o0 T7-8 详情页点菜页面开发(ShopBar 逻辑开发)" O# H4 m& c0 f; `, ?3 c5 a
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）# a/ X. m2 I3 P3 | i: W- @
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
' m1 ?. O+ q8 p/ W# j) W7-11 详情页评论页面开发(顶部Header开发)! |4 j* U; U) v; ~0 [& g
7-12 详情页评论页面开发(列表List 数据绑定)
5 R1 c( S/ }$ T7-13 详情页评论页面开发(列表List UI开发)
. p4 t8 b3 P' K. s1 w, l9 L7-14 详情页评论页面开发(列表List样式逻辑开发)' i( }3 z% a/ M$ k5 T- k$ l
7-15 详情页商家页面开发(UI开发)
" X& ?" Q* ~4 X7-16 详情页商家页面开发(样式开发)
( F4 l! z4 v# M/ p# h5 V% K+ m1 U( ]. ~1 L( @. E
第8章 美团APP—回顾与性能优化+ a$ g6 T/ a6 k1 W9 q
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...: `' z% ?" E" ^
8-1 懒加载性能优化 n* C, n: A% K
8-2 JS和CSS公共文件抽离优化! W, U9 o( x$ y7 x1 m
8-3 编写后台server读取真实数据
! {! c# z9 G \# |0 L8-4 多Tab 页切换与滚动数据加载优化
, _8 |8 b7 ]9 ~& L o( {8-5 项目打包3 w0 ^& O9 e5 b, E8 |3 G, i
8-6 项目发布# H N, L& l( X2 t. w, R
- F( |& q$ j4 ^- N1 H第9章 美团APP与hybrid深度结合: D! Z" K& v' L
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
6 s3 s0 h( K8 I+ e1 w: E1 B: s9 K9-1 JS bridge 原理 试看
W, P: F% b. ?% n! U9-2 iOS webview + JS API接口+iOS APP集成3 N8 k* J8 b$ y: l8 h
+ a) k/ [8 T; o' z: \! H+ e第10章 课程总结2 T2 [" Y7 o7 Q% @
回顾和总结课程讲解内容，能更好的回归和归纳。6 U% h$ I! D5 W) k' H, P
10-1 课程总结& V( G$ r; R% d
3 G( `2 h; l, m9 ^
【下载地址】
# N( ^" _! O( X1 B! V
& T+ y9 Z( A/ G5 R: Q
& ? U' @( R' y$ m, r. x$ L |
[复制链接]
