6 ?- g* i$ ], I9 K6 b y% x2 i: A
" R! G8 B X0 Q+ O, j【课程简介】' L* R* b2 e# Y! C, E, s! i
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
7 d( j4 |" ~4 ~! b" j
0 ?9 n! v5 M- H9 h1 q" a【课程目录】
, a$ U/ A' g8 E$ O0 ]第1章 课程介绍0 a% z3 J* k0 L* s6 n6 h
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。+ e! n3 b( V/ ?9 K2 R* x8 S
1-1 课程导学 试看
* I. i( a9 P# E+ i, g
* g- j2 R$ F: q" [2 L第2章 移动web硬知识点3 w) O$ I8 N( z/ T2 G! h# `5 E
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。5 B5 d/ o* D# t/ Y: Y
2-1 移动web开发概述) l# q9 _- T2 f9 y
2-2 移动web开发调试. N5 s1 S* O) A3 L/ B/ t' U/ W
2-3 移动web适配概述. X% b& e- b$ D- k
2-4 viewport视窗概念9 [+ M9 K: }/ ?1 g
2-5 css3之flex布局
9 b' w7 z" a! L% ?3 z2-6 响应式布局和MediaQuery( x y" \3 W( q
2-7 rem,vw布局与适配0 i; x; c7 F; a: D S1 G
2-8 移动端touch事件详解& x* b1 G/ x* e% G# x9 K
# R7 f0 U3 W8 h第3章 移动web软技能
- z/ @/ g2 q7 }1 V5 f' s" b P本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
! A7 I/ u @; p7 F; @3 G3-1 代码管理工具&项目构建工具简介. U, l4 a1 n5 |
3-2 webpack工具使用介绍
' J& s" m+ F2 J X% k, e3-3 Sass预处理工具使用介绍; t4 D& T, ?, C) n9 _( O( m
3-4 React组件化思想 试看, c6 i' u0 o% ?: D* G; w
4 a: X+ ]4 t. H: k9 [$ D6 w
第4章 项目开发构建环境搭建6 U9 l" Q- I* m( V; q
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
: s0 e/ B3 O" k4-1 项目和技术栈介绍
/ ~8 d2 ~0 f% ^( v/ r. G4-2 项目演示
s& c1 o/ k4 u/ r4-3 构建环境搭建（1）
) C/ e9 u1 ?0 ^5 T$ c$ g: [/ Q" p9 E1 o4-4 构建环境搭建（2）
- Y" z6 j% f$ |) F7 Y8 H4-5 构建环境搭建（3）, p5 u" o" d, x* J! }. P) r* M/ M
4-6 构建环境搭建（4）& I5 {+ d, J; ]
4-7 redux-react使用介绍（1）9 _( W( i/ [1 z% m
4-8 redux-react使用介绍（2）
. S) } k8 R, a! y' C" ^
1 Z! N" P" [% A# f第5章 美团APP—首页开发
9 y( c8 ^( ]) U# l开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
U1 y! f7 ?; B( d ~1 }5-1 底部tab按钮开发(webpack-dev-server配置)' u- v- V( t3 t4 u* [
5-2 底部tab按钮开发-UI逻辑编写（1）
; q- K1 c( `3 e( O5-3 底部tab按钮开发-UI逻辑编写（2）
& w' i3 a3 \* K r5-4 底部tab按钮开发(rem配置)
v, ^) m) P; g! ~# |- ~5-5 底部tab按钮开发(集成ESlint)
1 l1 V2 `/ u I" W; c5-6 底部tab按钮开发(集成HMR)
: ~1 o* V" v7 j7 U' ^8 ] e4 W5-7 首页页面开发Header模块开发1 }$ \+ Z- g, A4 e, }- Z
5-8 首页页面开发SearchBar模块开发' S, G' m$ h( G" F
5-9 首页页面开发-Category模块开发（1）9 m, G4 ~ v8 i+ U) S
5-10 首页页面开发-Category模块开发（2）7 c! A' F! @8 N$ J& m+ ?: A# W
5-11 首页页面开发(ContentList模块开发)+ `7 u8 w5 Y g2 h* X
5-12 首页页面开发-ListItem模块UI开发
I1 d/ T( z0 ~5-13 首页页面开发-ListItem模块样式开发
/ C, [6 h/ d- }, y$ ^% J5-14 首页页面开发-ListItem模块数据渲染开发（1）; i- q2 h' y4 L2 J( f+ N
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )! U: ]' q8 b& S' ~. {7 B4 j0 f/ ~
5-16 首页页面开发(滚动加载逻辑实现)
- r. Y Y' G3 h) C+ X# C6 D, a ^3 `1 b5-17 订单页面开发(List模块开发); J( k! @7 Q. p7 t- t
5-18 订单页面开发(OrderItem模块开发)（1）# V z6 a. `# s7 m
5-19 订单页面开发(OrderItem模块开发)（2）; x% s2 i* K/ M$ k( G) d3 G! i% p
5-20 订单页面开发(公共ScrollView模块开发)$ N! i& c1 w0 X4 l' Y
5-21 我的页面UI开发
+ T0 _1 V8 R- b& i1 {* M+ @1 ~ a& }6 Y5-22 我的页面样式开发" o8 O" Z7 ]. v( ?( T4 _ n4 R4 y
5-23 集成react-router
" \# N1 H: b8 |0 x) G, M* ? z) W$ R: C+ K) n4 O, c
第6章 美团APP—评价和分类页开发4 G- `+ K) N& _6 p
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
{( A6 Y* \! W) v7 d+ C9 _$ y6-1 分类页面开发(顶部NavHeader模块开发)! X/ @" g' a$ j3 {
6-2 分类页面开发(顶部Header tab 模块UI开发)4 _4 l7 C+ k( l q
6-3 分类页面开发(顶部Header模块样式和逻辑开发)1 z9 k9 S: r) H" t/ F C& K+ R! S
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
5 O/ T4 w4 W6 j. O6 _+ ?" J# a6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
# ^' b) \# {1 d b& N4 P4 S/ [6-6 分类页面开发(Filter面板模块样式开发)
) ?$ b' O$ p- A; a# ^# f6 w8 U6-7 分类页面开发(Filter面板模块item逻辑实现)% ~, I! A; X! I# u" r# E" Z! x
6-8 分类页面开发(列表List模块开发)5 w: A6 J# f' N- x0 R, a- {6 I
6-9 评价页面开发(UI开发)" [+ e2 l- f4 m: q* E
6-10 评价页面开发(样式开发)# S' ^: R, B8 q6 }
6-11 评价页面开发(交互逻辑开发)
8 X i! b6 o: O! {2 r7 ~% m' `: L+ U/ N+ P0 t @( d
第7章 美团APP—详情页开发
6 ^/ k) ~+ e7 ^- B5 S: b. h9 Z% y开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
: b! A* v9 J% U( v6 n4 O7-1 详情页顶部tab开发(UI开发)
- i6 C( ~3 h' q" |! P7 Y7-2 详情页顶部tab开发(样式交互逻辑开发)
* [4 N7 a) n% F" Q1 E. j. G r7-3 详情页点菜页面开发(LeftBarUI开发)# x* |/ w$ t8 S5 b6 _( T2 s
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
( ?/ ]: |8 m, ~+ i$ L5 ~7-5 详情页点菜页面开发(RightContent UI和样式开发)
" w7 @; u. F( w. Z3 p9 w: O, |, t7-6 详情页点菜页面开发(RightContent逻辑开发)
" ] M+ v5 J$ Y3 @( j7-7 详情页点菜页面开发(ShopBar UI和样式开发)- ?) s1 f) _ V/ y9 y1 t
7-8 详情页点菜页面开发(ShopBar 逻辑开发)$ A7 W8 ?% W7 U2 s
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）- i, v, a8 u8 g {9 ~0 v% |7 }
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）9 W" t4 U% ^& A& a
7-11 详情页评论页面开发(顶部Header开发)4 Q) l) u: y# m% P+ g
7-12 详情页评论页面开发(列表List 数据绑定)
) Y1 a7 W9 m4 p0 e& h+ a7-13 详情页评论页面开发(列表List UI开发)
7 U3 [" g( t6 V7-14 详情页评论页面开发(列表List样式逻辑开发)* w* T1 B4 z0 W: F$ J6 y
7-15 详情页商家页面开发(UI开发)
4 Z8 H. ?3 Y0 T1 v7 `3 k7-16 详情页商家页面开发(样式开发)# I9 n, ^' |* u, a" G" V! u( c& q
/ _7 j# n; `) ?! `, a* d- j
第8章 美团APP—回顾与性能优化
6 i: p5 Q( c* L0 n, X$ s通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
8 Y; x8 y+ o2 |& u0 W% n; y8-1 懒加载性能优化
+ [& {1 L- O8 h* z8-2 JS和CSS公共文件抽离优化
! L" n7 y- L$ z+ q9 F8-3 编写后台server读取真实数据
( n% X+ B' N9 X, i# o8 z8-4 多Tab 页切换与滚动数据加载优化5 X0 a v9 M7 P4 {) _4 G2 p
8-5 项目打包; N; G1 g# O; `9 m1 e
8-6 项目发布& J- a8 D- f$ ?6 C+ y
5 O; v. x+ I4 J$ f; h5 |) U& Q
第9章 美团APP与hybrid深度结合' p* ?" |- \8 ]3 Z! m- J
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
& h# O, o" k$ y; b) q4 [& w9-1 JS bridge 原理 试看
+ a0 G2 Q- _5 [+ a$ b t9-2 iOS webview + JS API接口+iOS APP集成9 g) C# i1 ]8 R3 Q" C
& M6 z* X f& U/ E第10章 课程总结
5 i4 a% H8 n8 y回顾和总结课程讲解内容，能更好的回归和归纳。
' ^; v1 v( P+ D, d P10-1 课程总结
/ i6 K( x0 b( b# p6 f- D- ]$ u- z% z1 t9 L8 B, l
【下载地址】& l$ i6 ]9 o& I1 w2 |
# J, M0 C7 S1 U' s R0 R+ p* w0 y3 S3 H
2 \/ M9 ?0 N$ W; d1 _5 D6 i |
[复制链接]
