) w. @9 G: A6 ]9 U) D. q
d! t, ?; p$ X7 h% ^【课程简介】0 ?! \/ Z7 S" e: j
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。) R' c1 \9 N, S/ n, D9 K1 V
4 p# v$ k3 `' t/ ?* H ~/ r
【课程目录】
. A0 F1 C1 o @; c0 [& b第1章 课程介绍
: o; ~' m" x4 I3 _通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
5 q( O, i/ Z3 S! q! D I: g( a1-1 课程导学 试看! G+ u" d& |! v% z/ J u
H, S8 `+ f' q8 f" S% V$ ^第2章 移动web硬知识点
4 t- i3 Q( K/ Y本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
2 u& q9 V1 T% \- }$ F2-1 移动web开发概述 v, m$ h# O9 I
2-2 移动web开发调试! U' i" u! x- j/ w* h* `* }$ r
2-3 移动web适配概述6 ~( ~0 w# k+ a2 A. L% h2 m
2-4 viewport视窗概念
; O" O( f" t; R( V. g& H' `2-5 css3之flex布局' S* r7 Z: \6 |, A
2-6 响应式布局和MediaQuery
# D. w8 x# L p. T. H# A: F1 B2 h2-7 rem,vw布局与适配
x/ ~# q& X0 o1 O/ z' t2-8 移动端touch事件详解
* F3 J) |; |, o. C
9 F9 Y% O) V1 n9 w/ j" F% c第3章 移动web软技能
0 t5 a+ K7 y3 ]+ E; N5 K" m* e本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
! i+ B6 y! b \3-1 代码管理工具&项目构建工具简介- X ?+ K3 F }" w% J
3-2 webpack工具使用介绍
; j' ?4 [0 J9 `/ I5 Q0 Y: q" B, Q3-3 Sass预处理工具使用介绍8 D7 }+ S& [% ^
3-4 React组件化思想 试看+ G O: n6 V O' I/ p: U- k6 v% K
/ m% t" F3 a5 Y [7 F3 _
第4章 项目开发构建环境搭建
) x7 M" }+ S4 x; m, K# \本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。+ y8 `* z3 b- i
4-1 项目和技术栈介绍
+ M& ?% [. x X" q: U- W1 P4-2 项目演示
6 A5 C3 y, W2 ~8 R4 @4-3 构建环境搭建（1）# X+ E0 a2 u% ~) G
4-4 构建环境搭建（2）
( k& d: y: y3 G& I4 G4-5 构建环境搭建（3）7 y( C J% h; _
4-6 构建环境搭建（4）
4 @- o6 d8 H6 T* ?& h4-7 redux-react使用介绍（1） t3 U/ b0 h' K- Q
4-8 redux-react使用介绍（2）7 S. ~$ K: S/ Z
) J) m$ m! l5 K9 e: J
第5章 美团APP—首页开发( ?1 ?" ^; o" Z4 ]8 b( C. n2 z
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。4 w' O& r* n- ^: P. u# a
5-1 底部tab按钮开发(webpack-dev-server配置)7 D0 e) j* j; {9 Z
5-2 底部tab按钮开发-UI逻辑编写（1）) b, j& T/ @) m
5-3 底部tab按钮开发-UI逻辑编写（2） W$ \) F8 ~8 M$ d5 p
5-4 底部tab按钮开发(rem配置)8 ~! Y9 F. m" R" y
5-5 底部tab按钮开发(集成ESlint)# {, V8 O9 p) b$ u4 ?4 e0 {
5-6 底部tab按钮开发(集成HMR)5 ^+ g( V0 s t2 g- k6 @" B; l
5-7 首页页面开发Header模块开发' [6 N0 g. [9 y9 d
5-8 首页页面开发SearchBar模块开发
6 z, Z5 i5 V# a- E5-9 首页页面开发-Category模块开发（1）- k) {/ v1 l/ u6 u
5-10 首页页面开发-Category模块开发（2）2 Y, ^4 B6 v6 @/ A3 ^# Y' D
5-11 首页页面开发(ContentList模块开发)
' ~' h- F2 f( D9 e' r5-12 首页页面开发-ListItem模块UI开发- G$ j' l4 W8 Z7 A3 |) L# k
5-13 首页页面开发-ListItem模块样式开发, }: \ D1 N# O5 ^% s
5-14 首页页面开发-ListItem模块数据渲染开发（1）; X7 ~6 q* m* X3 v
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )3 c. B& F( B4 Q" C& p+ ?; C3 p2 x+ n
5-16 首页页面开发(滚动加载逻辑实现)
( A9 z: c, P, G2 E6 n5-17 订单页面开发(List模块开发)
$ R0 C O, V0 w5-18 订单页面开发(OrderItem模块开发)（1）
7 k1 b/ n1 |0 R! @* Q5-19 订单页面开发(OrderItem模块开发)（2）
% E' t4 x0 v: o4 j0 a5-20 订单页面开发(公共ScrollView模块开发)5 x+ G1 p; C9 \
5-21 我的页面UI开发
W7 o2 r3 V* H4 O/ A5-22 我的页面样式开发3 k$ H/ E4 h( Q+ s# `& |
5-23 集成react-router { q( d8 I4 V2 ]2 B" i! s% G
0 o" e1 @4 M) Q+ Q+ j- T; l4 f第6章 美团APP—评价和分类页开发9 y0 A/ `7 X% h0 [: x
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。6 y; o# S, ?1 y3 H0 J/ j# R/ w
6-1 分类页面开发(顶部NavHeader模块开发)5 G) k* A$ {1 N2 G' c
6-2 分类页面开发(顶部Header tab 模块UI开发)
0 k( c! ?( |& c7 _" J+ q V6-3 分类页面开发(顶部Header模块样式和逻辑开发)
6 f! Z( Z3 `: E) S6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)3 A: c) X% k+ I; i, o+ i( M3 o
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现( r% Y, l: ^% }
6-6 分类页面开发(Filter面板模块样式开发)) T+ k0 D# T& ^
6-7 分类页面开发(Filter面板模块item逻辑实现)$ V5 V7 H6 X3 w) m' E# N
6-8 分类页面开发(列表List模块开发)
. U8 }+ I* X- K: o: i7 `6-9 评价页面开发(UI开发)
V9 |3 m+ r' U1 K6 p4 u5 H( a6-10 评价页面开发(样式开发)% p) Z- v1 a2 L$ o) i
6-11 评价页面开发(交互逻辑开发)
3 j$ s4 k! s9 O1 E2 l: K
~; t4 `( o8 B. T第7章 美团APP—详情页开发
7 Y/ s' ?9 n! y4 n; w5 h开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。1 x. c, y) l6 |+ B8 M3 k& e2 c
7-1 详情页顶部tab开发(UI开发)) i( A" l# l H7 ?( D
7-2 详情页顶部tab开发(样式交互逻辑开发)
2 n9 H6 Q* F& }/ ]& C7-3 详情页点菜页面开发(LeftBarUI开发)' S' e5 Z9 L4 M% R
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
& o4 I9 b: R5 E7-5 详情页点菜页面开发(RightContent UI和样式开发)
5 I5 e2 B; j$ V0 _7-6 详情页点菜页面开发(RightContent逻辑开发)
$ w# c5 Z0 z$ ?8 M) G/ @& [7-7 详情页点菜页面开发(ShopBar UI和样式开发)1 ^& t0 H: `0 B) K2 k& J/ W. T6 E
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
" z2 L7 G) `( W8 ~8 e2 w7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
) V: I! P- _+ i7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）: F( P! e& |& R5 j
7-11 详情页评论页面开发(顶部Header开发)
' F5 O) H H- a, M1 F7-12 详情页评论页面开发(列表List 数据绑定)
9 }! V: c* m& c U9 g% L: z% }7-13 详情页评论页面开发(列表List UI开发)
, y% t: s" R, p9 M% f; P7-14 详情页评论页面开发(列表List样式逻辑开发)
5 M6 F8 E' R" ~2 ~7-15 详情页商家页面开发(UI开发)6 t" Y2 |, h4 H2 Z
7-16 详情页商家页面开发(样式开发)5 _; e, o* B/ J* a8 f
) G! a& ^+ ]0 C1 ^& s
第8章 美团APP—回顾与性能优化. O0 O) a! H( E# x: b% O1 a
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
[) J; t; q; h8-1 懒加载性能优化
, E6 r4 E2 f2 \/ n* }5 j8-2 JS和CSS公共文件抽离优化: e6 C5 k6 D& k) f1 v. p
8-3 编写后台server读取真实数据# K, p) {' f9 H' c
8-4 多Tab 页切换与滚动数据加载优化' R4 {) y; i! J4 U
8-5 项目打包; h" ]# X: o- {; a' r
8-6 项目发布$ m$ c+ j( y* ~% f3 P5 O6 }* F
9 x9 y4 O% w! m. u. }6 y8 I1 ^第9章 美团APP与hybrid深度结合
. P6 i; B& M4 k ^; H# ]* Q本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。1 m. |0 | F2 ] e* c
9-1 JS bridge 原理 试看, [6 G8 ?' g3 U7 W$ D' Q
9-2 iOS webview + JS API接口+iOS APP集成1 A* s! J+ j+ E8 V
( X- s( C( N, X7 e7 b' a4 x第10章 课程总结
7 v/ U+ ]5 r/ F4 _3 k回顾和总结课程讲解内容，能更好的回归和归纳。
! ^3 R* ~6 [0 W0 H! i+ [10-1 课程总结* ?$ i) o( M. T6 Q, _
5 P N9 }2 W) t/ I
【下载地址】
; i! |+ m- [0 @8 j4 O/ c+ H" r! V! R4 s
- D- p V3 R5 z6 C; M |
[复制链接]
