# }8 C) X4 V6 U/ m _
, J& F, t- \' @5 o* l" m2 w* Q) Y【课程简介】& |- n+ d8 ], S8 u3 [
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
+ w; R% D# c# G7 H2 n0 J7 P' r! g, Q% U+ r: v. p% B9 W
【课程目录】8 R: q3 }2 w/ S1 k- z K
第1章 课程介绍
# j6 q6 ?: F# y# u4 L通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。6 C$ f) c' c/ }- t$ z) r. y
1-1 课程导学 试看
% r# I" R$ N5 c6 Q: N" v+ l
* k, L/ a8 A3 u1 h. X第2章 移动web硬知识点! e7 a/ R. J [( g X! u
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。* r4 U6 C' h8 Z# g, n
2-1 移动web开发概述
' [8 F& k: J4 p- |1 W2-2 移动web开发调试
% g' D& G* i' O) F; @3 i M$ Z2-3 移动web适配概述4 h% c, n# f) \' o+ h4 G9 S
2-4 viewport视窗概念
6 v8 F4 c# t6 |2-5 css3之flex布局
) S; R, ]# q5 p7 ^* R7 z5 ? g' b1 j) K1 O2-6 响应式布局和MediaQuery. t4 T" Z) @4 K
2-7 rem,vw布局与适配+ q5 C# W9 ]6 k: X
2-8 移动端touch事件详解* d+ }& r8 v1 L) [1 S) v7 S3 m+ ?& ?
7 {, v4 f, f( Z/ k: X第3章 移动web软技能' v) n3 M z0 i$ k1 r
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...3 ]" v& @) _7 q. N# C* a/ h5 |
3-1 代码管理工具&项目构建工具简介! I# T+ Z+ T3 o7 \/ L8 P# p
3-2 webpack工具使用介绍2 U, i( q/ X9 C0 H5 \% o
3-3 Sass预处理工具使用介绍% ?7 O- B- Y6 c- p7 I4 [) \
3-4 React组件化思想 试看) K# b8 c9 k% y3 o1 W8 i
, |- d0 d, ?9 n$ P$ ?0 c第4章 项目开发构建环境搭建' W' o9 i/ v/ R' [
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。) k( t- g, V. M
4-1 项目和技术栈介绍
& a+ O( [5 n& _' i: X4-2 项目演示% |6 T# S# f8 t/ t4 Q! a
4-3 构建环境搭建（1）% n: T" T: f7 ?. M& u
4-4 构建环境搭建（2）
5 h- Y3 Y9 ^0 x( a) J4-5 构建环境搭建（3）. _- K. F, u% w
4-6 构建环境搭建（4）% u$ J3 i" \2 S' n @
4-7 redux-react使用介绍（1）
, ]* C. Y8 K8 u7 L4-8 redux-react使用介绍（2）
. U+ I; ~' Y% O/ Y2 g3 K5 y, }+ f$ `. x: E4 j! K
第5章 美团APP—首页开发
( C* D( {& d% P开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。2 [8 l2 K# p! T0 _ B; @
5-1 底部tab按钮开发(webpack-dev-server配置)
& _1 Q- r$ M5 U6 L% X5 P5-2 底部tab按钮开发-UI逻辑编写（1）
2 C5 O7 V2 }- ?7 l7 a5-3 底部tab按钮开发-UI逻辑编写（2）
9 U0 Q; L7 S- T2 ^5-4 底部tab按钮开发(rem配置); Z* ]( Z8 c q3 a
5-5 底部tab按钮开发(集成ESlint)
]4 s6 {9 f; W9 D2 f5-6 底部tab按钮开发(集成HMR)' C0 N; N6 D. K; O8 n' Y' ]
5-7 首页页面开发Header模块开发
+ z# g0 H) S& r; c. L5-8 首页页面开发SearchBar模块开发) U0 t% g; K4 I+ L9 z, T
5-9 首页页面开发-Category模块开发（1）
l( @4 R) e) j! g5-10 首页页面开发-Category模块开发（2）
$ ~& ^: ^2 A" B5-11 首页页面开发(ContentList模块开发): u0 Y2 j1 n- ~/ z
5-12 首页页面开发-ListItem模块UI开发
# D4 @. n# M3 M5 }& E4 |# `5-13 首页页面开发-ListItem模块样式开发7 l5 V1 i( I1 p( R4 A
5-14 首页页面开发-ListItem模块数据渲染开发（1）5 W9 A" l2 J- h7 `
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
2 _5 H! ?3 y1 z6 @7 s5-16 首页页面开发(滚动加载逻辑实现)
; ~# G: _7 _2 @ ?; X7 `; @7 ~5-17 订单页面开发(List模块开发)+ p* N1 {7 O3 I0 u1 X2 }" V
5-18 订单页面开发(OrderItem模块开发)（1）+ N6 `& ~9 ?' S* k
5-19 订单页面开发(OrderItem模块开发)（2）$ @& j$ s5 d6 H& t
5-20 订单页面开发(公共ScrollView模块开发)
; e* R% K+ X- C" h# Y5-21 我的页面UI开发) J, n# v2 ], G" T& o- _( M
5-22 我的页面样式开发- [ p5 F; Z u0 t; T
5-23 集成react-router
/ H5 L6 i% o: h9 y+ L9 W
6 P! C4 B* j/ T8 B/ @第6章 美团APP—评价和分类页开发: k8 ~/ p a9 n+ s0 A- h
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
, C- v" `8 x2 d3 c3 w3 s) A: y7 {6-1 分类页面开发(顶部NavHeader模块开发)$ J$ O+ e$ G; u# G
6-2 分类页面开发(顶部Header tab 模块UI开发)& z# ?2 Y4 F7 x3 B7 I5 g9 w6 m
6-3 分类页面开发(顶部Header模块样式和逻辑开发)1 q/ A8 d" h# i1 h% w; z
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)& P8 s( _1 R# J0 q0 k2 ~6 j
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
/ U; U. s- z4 F' E7 W6-6 分类页面开发(Filter面板模块样式开发)9 G! R) v+ y2 O& ]; @
6-7 分类页面开发(Filter面板模块item逻辑实现): A; V$ S) ]+ X: w
6-8 分类页面开发(列表List模块开发)9 V$ u/ t) s( s; C: x( l5 C4 }% t
6-9 评价页面开发(UI开发)
0 {& q. M( i- S" _: A6-10 评价页面开发(样式开发)8 K2 T* {5 Q1 ~4 w
6-11 评价页面开发(交互逻辑开发)* G# W1 T, L3 @/ E5 [8 |
) H1 G9 l! d5 R7 d9 g" K3 H
第7章 美团APP—详情页开发/ ~- [+ ]8 m% U1 w
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。7 O+ d1 Q, ]$ w ~
7-1 详情页顶部tab开发(UI开发)8 ]4 u5 M0 L& ^$ q h8 g2 `
7-2 详情页顶部tab开发(样式交互逻辑开发)5 Z2 r* D6 I2 x8 @/ w( R5 p+ \0 h
7-3 详情页点菜页面开发(LeftBarUI开发)
% f# A( Y3 f7 C' B7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)" R5 i# X0 {2 C$ l/ {2 H, [9 l: j
7-5 详情页点菜页面开发(RightContent UI和样式开发)+ e3 [7 v- k/ B
7-6 详情页点菜页面开发(RightContent逻辑开发)
- z* y/ J& L/ n+ h( s0 O7-7 详情页点菜页面开发(ShopBar UI和样式开发) b0 T8 D+ D( }( s) c4 Y
7-8 详情页点菜页面开发(ShopBar 逻辑开发)5 ?' l2 o5 K6 t, b
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）' X( Q, Y \9 A! V% L2 v% L( p6 C7 Q
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）7 Z+ v5 p" e" I; I: k; ^: w; j
7-11 详情页评论页面开发(顶部Header开发)
$ u% n! ^* a# R2 t% ~" n- S' X7-12 详情页评论页面开发(列表List 数据绑定)
2 d! W5 y" Z1 t- Y- t/ r7-13 详情页评论页面开发(列表List UI开发)
' H9 a* w# C8 r7-14 详情页评论页面开发(列表List样式逻辑开发)& M( m2 y: Q2 G; H$ l% B
7-15 详情页商家页面开发(UI开发)
$ g. Z- e* P: a1 C7 F7-16 详情页商家页面开发(样式开发)
* V$ i- B, K- J8 K
1 \% S- c" O% ~6 _) ^第8章 美团APP—回顾与性能优化
# { T- M8 e* j1 k' |5 @) J) b通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
8 `( p' P% R; H! @" h6 X/ v/ b8-1 懒加载性能优化, J' w9 n4 }4 H/ X
8-2 JS和CSS公共文件抽离优化
( H9 J+ g+ @5 |! T7 n8-3 编写后台server读取真实数据
5 q p0 Y( G) y- Z# O! V8-4 多Tab 页切换与滚动数据加载优化
) S& b; G6 T6 I8-5 项目打包
7 ]8 Y4 o$ u3 s$ s& E# l8-6 项目发布
1 z' A+ R1 F* j6 A$ z3 h [3 E) S- j
第9章 美团APP与hybrid深度结合; q6 N* Q8 v" I* Y: o8 K3 }4 r# ^
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
. a& g9 W2 O6 y$ E w8 M9-1 JS bridge 原理 试看5 Z2 @5 n! X4 a
9-2 iOS webview + JS API接口+iOS APP集成/ j/ y( c8 |9 H8 g1 ~7 O2 Z1 @, \( C
( h% I" U8 Y% A- u
第10章 课程总结9 W$ f9 q" u2 @3 t; o& G! l
回顾和总结课程讲解内容，能更好的回归和归纳。2 V: l$ q. M; ~. H, M
10-1 课程总结
- S' p$ I+ H7 w0 p: z4 w$ t7 V; w8 V; U
【下载地址】( S5 `! n$ `/ i/ y m# l
7 c/ j# s0 g+ ~! G7 G0 o8 G1 f9 i) P( t, b2 ?4 J$ d
|
[复制链接]
