# M& `8 H: n, o, w* d$ c7 a
$ H$ W8 d0 } E* S8 ^
【课程简介】5 T- C& j/ a4 x9 W
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
# E6 |) a9 m% a' ^9 O) t( F( @2 i2 }9 W* K: F" d2 ?% h8 B. y
【课程目录】
( ^4 l5 w& H% G6 Y2 f8 d) Q- A i% u$ o第1章 课程介绍! U' N4 \3 ?+ a; r
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
( y! ]% N, X6 I( d$ G1-1 课程导学 试看
$ Z* T0 _3 ^0 @. ]% \6 m/ b! T2 ^2 O
4 W2 \$ G* a5 d! H第2章 移动web硬知识点- W, `( K3 g' N6 S
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。! c9 |; t: L2 y; U
2-1 移动web开发概述0 |/ k! O2 \4 c: T$ A0 Q6 U
2-2 移动web开发调试
- C- |' }3 S$ u5 h& w& O2-3 移动web适配概述' _$ T. ~4 @$ k& q1 N
2-4 viewport视窗概念
s$ H9 O/ k3 I8 W' w! i0 L2-5 css3之flex布局
* b" w) G1 d# ?* C4 `6 e6 q- a4 \2-6 响应式布局和MediaQuery
" Q8 K) A4 e6 s+ U* q! u+ k2-7 rem,vw布局与适配/ B4 @3 W5 E% f* b9 M
2-8 移动端touch事件详解 s9 H1 X$ p: k; H* }+ D# D
. q2 l6 l) W2 k; F) @. d! l
第3章 移动web软技能
- s3 B, y0 _/ H }本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。.... n$ K: J0 J) J) X: S" q
3-1 代码管理工具&项目构建工具简介& B5 I" z4 U3 Y# g
3-2 webpack工具使用介绍( \: U3 T/ o& I! \& V- ?
3-3 Sass预处理工具使用介绍
* q/ b3 E7 {- N, J/ n- q( @2 `5 y3-4 React组件化思想 试看6 f) H; j4 D+ m% v0 y2 A- l6 `
1 i8 p" t" E2 Q" k, e第4章 项目开发构建环境搭建
+ [ b( F' F' x M4 ~8 j6 _本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。6 w7 j' ?( t. y, p
4-1 项目和技术栈介绍
/ L9 Y/ V) y* q, H* J3 B, {4-2 项目演示
6 n6 b! C0 `4 g3 ]4-3 构建环境搭建（1）/ d& X+ h0 |, h. e( m" C
4-4 构建环境搭建（2）1 o: ]- f! ^/ h5 j" v
4-5 构建环境搭建（3）
5 ~) ~% i" m* M6 I8 `, M4-6 构建环境搭建（4）' C4 L' P- F4 x0 @
4-7 redux-react使用介绍（1）
$ ]; L( L c3 u, E4-8 redux-react使用介绍（2）
6 f# G# T( c- R+ L6 o2 X3 l1 i
) m+ K' W% s# b8 P/ g第5章 美团APP—首页开发5 K7 ` S4 A; H: V3 h$ h
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。. U/ j3 h' G$ E) o- ~: o* Y
5-1 底部tab按钮开发(webpack-dev-server配置)
6 M8 L% N( |; B- H5-2 底部tab按钮开发-UI逻辑编写（1）
. C' C- z* B) g5-3 底部tab按钮开发-UI逻辑编写（2）3 O9 H0 y7 ^) T, @+ a' K) E
5-4 底部tab按钮开发(rem配置)
- B" m1 a L8 q' ?; c# }8 I5-5 底部tab按钮开发(集成ESlint)
# K1 [3 A# w9 U, t1 U5-6 底部tab按钮开发(集成HMR)
1 a% |9 _: c9 J$ ]2 s; o5-7 首页页面开发Header模块开发
: p1 M' m# k% _( ^$ Q$ k5-8 首页页面开发SearchBar模块开发: F) f* N8 e6 W( p F3 I: O
5-9 首页页面开发-Category模块开发（1）2 G$ }) E c. n/ X' S
5-10 首页页面开发-Category模块开发（2）
) F) J- ?* Z H9 d6 u5-11 首页页面开发(ContentList模块开发)
. o9 L6 S; n+ b$ f/ o6 Z5-12 首页页面开发-ListItem模块UI开发% Z9 {9 j) N/ f+ ~6 ~
5-13 首页页面开发-ListItem模块样式开发
# }( l8 v- |% R7 @* w3 e5-14 首页页面开发-ListItem模块数据渲染开发（1）$ P! I/ ^1 G, h& j% {, x2 a; ]4 Q
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )6 ]% t! }2 [- m; c
5-16 首页页面开发(滚动加载逻辑实现)
) }% {& @9 t4 ~% N5-17 订单页面开发(List模块开发)( c$ O, `( I- V6 g' k
5-18 订单页面开发(OrderItem模块开发)（1）: _" d8 p: y, R
5-19 订单页面开发(OrderItem模块开发)（2）
; X" S8 b% R; _+ H+ U4 W* @, ]0 W5-20 订单页面开发(公共ScrollView模块开发)2 A; Q g+ q' t
5-21 我的页面UI开发
- | i& E& `9 r% z5-22 我的页面样式开发
8 \, c. `! A% U; l6 [7 R7 [5-23 集成react-router$ l5 G( l% p9 ~2 V1 X! w0 A( e
1 I4 g, J. W$ i/ S+ r0 M第6章 美团APP—评价和分类页开发7 `- K: e! E8 ]6 F& ]
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。! Y' h6 Q e5 d% y/ o2 B% ^
6-1 分类页面开发(顶部NavHeader模块开发)
2 w# b, i6 `) k1 m/ v6-2 分类页面开发(顶部Header tab 模块UI开发)
! _( Z- t. v7 T9 A" M T0 E- m8 w: q8 d6-3 分类页面开发(顶部Header模块样式和逻辑开发)
# M& l3 @- _- w" E! b! d& c6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)6 N$ P: Z$ M! `( d' r, X5 B
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
3 n% K# P" ~- g* @- U6-6 分类页面开发(Filter面板模块样式开发): R8 ^5 e0 q+ |; u. |
6-7 分类页面开发(Filter面板模块item逻辑实现)
6 a* H3 j% K' e# F9 z* c8 _% s$ w6-8 分类页面开发(列表List模块开发)- O- v- U# P7 t$ k1 ], [2 A: x
6-9 评价页面开发(UI开发)
0 F" m W0 x& f# b8 X* S8 T) g6-10 评价页面开发(样式开发)
: M0 {! [( }5 J- ?6-11 评价页面开发(交互逻辑开发)/ P$ {6 a. ]3 A
; I! ^* r1 n$ S& K' T第7章 美团APP—详情页开发
! g' E! [( d0 n开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。+ t9 V5 `% ?7 m6 |3 R! K) {, [
7-1 详情页顶部tab开发(UI开发)
* e$ x6 t0 m5 O7-2 详情页顶部tab开发(样式交互逻辑开发)/ g9 ?* Q5 _& E; c: e0 f" y
7-3 详情页点菜页面开发(LeftBarUI开发). M1 |; [8 ]3 |0 D8 j3 |* \
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)5 M; c6 Q" R! N( E
7-5 详情页点菜页面开发(RightContent UI和样式开发)9 t6 P0 |1 j7 d" d8 _
7-6 详情页点菜页面开发(RightContent逻辑开发)5 H& q9 I! [% ?0 r7 Z- S4 S
7-7 详情页点菜页面开发(ShopBar UI和样式开发); N) i9 S; g, M9 @! W9 O
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
) O% d! `/ z$ H4 t0 m7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
7 N5 P9 F) H" S. q5 e7 }: v9 M7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
; o s6 T2 T; c5 \3 Q/ o+ y7-11 详情页评论页面开发(顶部Header开发)5 X% y8 J# `9 Z; Y/ l1 @9 y
7-12 详情页评论页面开发(列表List 数据绑定)
& Z8 ~5 o: x0 h7-13 详情页评论页面开发(列表List UI开发)/ e" A4 k6 X* n$ P
7-14 详情页评论页面开发(列表List样式逻辑开发)
' Q& V! L7 p. G* ]7 Z1 u6 G7-15 详情页商家页面开发(UI开发)
/ D9 Q" }/ C% C$ U6 F2 G7-16 详情页商家页面开发(样式开发)
% `1 [9 t) H1 w) m+ i3 I" u/ K+ ~4 I- w. `) e
第8章 美团APP—回顾与性能优化
2 A+ X, ~ t. H& ]通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
+ \0 S& k' N0 u8-1 懒加载性能优化! I6 [% I9 f; @( D3 V6 @
8-2 JS和CSS公共文件抽离优化" P' k0 y0 g: _
8-3 编写后台server读取真实数据3 o5 u% O) r( Q+ K1 C& P' ^3 t
8-4 多Tab 页切换与滚动数据加载优化& {+ h U/ g- g9 c$ f/ P
8-5 项目打包
' l) S& C( N2 o6 b( z0 d& _% t' d4 [8-6 项目发布
# l. N5 G# X9 }9 g% |5 \, [) E4 I+ s) }9 N& c# k9 Q
第9章 美团APP与hybrid深度结合 u7 J$ C* W* J( R9 H
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。; P9 o# d& G& y# m+ d
9-1 JS bridge 原理 试看$ P6 c* J4 s* O4 T5 C
9-2 iOS webview + JS API接口+iOS APP集成
+ d" U) \6 L5 C2 `/ q, [# E, D* [; v8 F x% x a( \
第10章 课程总结; w3 a" ]8 X: m
回顾和总结课程讲解内容，能更好的回归和归纳。7 J y# ], Z# K* a s0 S& i
10-1 课程总结5 T- u- C3 F {: Q P j
, O7 {6 I* Y* q! s6 d! m【下载地址】$ S5 m9 C+ b2 ~* E5 v- `
B$ z2 Y; L7 A c R! w/ q' [8 ~ o* Z- L
|
[复制链接]
