7 ]* z8 z: l' U0 x z
8 A0 n" W3 ~+ P4 G3 D7 O【课程简介】) l3 y" }9 \5 C5 [3 K% F9 L+ |. r
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
( g; m9 w0 E( j$ w. D2 M) |+ y, L; G$ \7 T3 S( O4 P" B
【课程目录】" B- a2 |1 Y f0 f! q( _/ G
第1章 课程介绍. o$ d2 }) X# ^ L- N
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。2 e: L+ F& \" W2 W" {& P$ `
1-1 课程导学 试看
% t- @- r5 J$ q# j5 l0 m
5 y" V7 M" P' p3 h3 e& y4 k第2章 移动web硬知识点, L0 l" f" ?! s0 W: N
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。5 e% N1 ~7 {. ~( Z# F; N" q0 ?
2-1 移动web开发概述
4 D/ | ~& g5 T; @9 U2-2 移动web开发调试0 ]3 w; Y) C2 v: G4 F
2-3 移动web适配概述
7 ]7 ?" m3 G/ M; j* [- U2-4 viewport视窗概念
9 _# N9 ~! t# t$ A2-5 css3之flex布局
j* q2 q( s" W2-6 响应式布局和MediaQuery
# v0 }1 Q' k' k* j' x2-7 rem,vw布局与适配
, u8 ]- k* M+ I; R4 [2-8 移动端touch事件详解
2 u5 \: {4 b% z% \8 r1 ~4 W" {: j
第3章 移动web软技能
]) T! i4 U' e; x" i+ H本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。..." _2 N& Q( }0 B
3-1 代码管理工具&项目构建工具简介 x5 i+ Q/ P2 P& n" p# P" n
3-2 webpack工具使用介绍
. q$ J+ o4 ]; b& ^3-3 Sass预处理工具使用介绍& @3 s" X3 Q) \% P& L) V# u S
3-4 React组件化思想 试看
' S- I n/ a9 m+ c }$ h/ _3 c% {" s0 l! q6 {6 Z9 x$ c# q K' {
第4章 项目开发构建环境搭建
. F3 J4 o1 Z4 ~% U/ }; x$ }本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
0 u8 B5 V+ A3 O* L4-1 项目和技术栈介绍
/ S" L3 T( r; P9 B+ ?0 s. M* a; p4-2 项目演示
( }6 P9 a. b9 P1 i' Q; w4-3 构建环境搭建（1）+ ` b9 N7 K, X% g; y# I9 l
4-4 构建环境搭建（2）
( n' r1 M5 h& t. w3 `4-5 构建环境搭建（3）1 p5 h* s% C5 r- g! p( a3 y# q: b
4-6 构建环境搭建（4）9 j$ h/ M& t% X
4-7 redux-react使用介绍（1）
@! E C9 U2 k2 [: `, {# F4-8 redux-react使用介绍（2）# j" \1 f/ p4 `' d8 A
: z, D& ?; u2 l0 Q' u7 b第5章 美团APP—首页开发. M/ K* P7 |/ C; G0 ~
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
1 [/ r, m7 b5 a1 q H: [+ a5 G7 g: A5-1 底部tab按钮开发(webpack-dev-server配置)
, Z! j7 L8 I8 X6 w6 w, l5-2 底部tab按钮开发-UI逻辑编写（1）; h- i E! V# B8 ]
5-3 底部tab按钮开发-UI逻辑编写（2）
, ]. |( n4 V! |5-4 底部tab按钮开发(rem配置)
* O( E R3 M0 [0 @) m5-5 底部tab按钮开发(集成ESlint)( }0 {4 v$ Z$ F
5-6 底部tab按钮开发(集成HMR)4 G9 b3 E( q3 Y. q9 Q0 _
5-7 首页页面开发Header模块开发* ?, w% h r% Q- i' J+ c
5-8 首页页面开发SearchBar模块开发
) y- b* p# I3 f' j! B3 l5 k5-9 首页页面开发-Category模块开发（1）
/ U) m, z4 R0 L0 U5-10 首页页面开发-Category模块开发（2）4 E' c/ V& M" l+ ~1 m! G; b7 p
5-11 首页页面开发(ContentList模块开发)
5 ^+ G. l5 W4 `9 \5-12 首页页面开发-ListItem模块UI开发
5 M8 U7 N# m2 o, }6 s5-13 首页页面开发-ListItem模块样式开发
+ I: w$ a" i9 r% S5-14 首页页面开发-ListItem模块数据渲染开发（1）
- N4 }6 a+ ]0 P4 U( V5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
4 b$ A* Y- j+ J- c5-16 首页页面开发(滚动加载逻辑实现)
( ^, d) w6 }/ I7 y9 c. R+ F5-17 订单页面开发(List模块开发)
% O u9 p, Y6 H( q( c& Z5-18 订单页面开发(OrderItem模块开发)（1）
6 p& f; M% m# F- B$ I5 y) n+ J) R5-19 订单页面开发(OrderItem模块开发)（2）2 O; `, v' G6 e! u
5-20 订单页面开发(公共ScrollView模块开发) i: x1 o# @: D9 [0 |$ e0 Q% U
5-21 我的页面UI开发
4 C2 a5 K6 C5 v" D; W* D7 S" E5-22 我的页面样式开发
* n9 A) i" n8 s4 p) ]0 j5-23 集成react-router
) I( o/ \5 M a7 W E+ K; h5 e0 p5 Z. j \( P
第6章 美团APP—评价和分类页开发1 g2 O) m' w1 `7 d. W7 w$ _7 ?
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。; h7 E- R; U3 a6 T+ v
6-1 分类页面开发(顶部NavHeader模块开发)
' c' U8 t/ l. |$ ]# n6-2 分类页面开发(顶部Header tab 模块UI开发)9 M4 l: z5 Z) t, t6 t3 R& g) W
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
! X, r! |! W2 i6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)" `: e8 {) Z, `" c+ e V3 S( q$ V
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
X, X: i5 {) Z* [" J- A! [6-6 分类页面开发(Filter面板模块样式开发). D) |3 I; N" w6 ^5 o, o
6-7 分类页面开发(Filter面板模块item逻辑实现), l P* q/ n5 J# V* X
6-8 分类页面开发(列表List模块开发)/ a, w! e9 l- E2 D3 E) k
6-9 评价页面开发(UI开发)
8 v7 c1 P9 U+ M- W6-10 评价页面开发(样式开发)+ \ e( [& \: j+ q2 |7 c; D
6-11 评价页面开发(交互逻辑开发)
* N1 E/ c# c; |. y. |- u b* Z: Z0 X! B$ m# v0 C8 q7 f% \ c5 m
第7章 美团APP—详情页开发
* P3 e; K+ i6 _9 G8 ?4 K开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。/ M+ \, }( T) d1 y. Q: C% M
7-1 详情页顶部tab开发(UI开发)
6 `% j* ?8 g+ Q7 x7-2 详情页顶部tab开发(样式交互逻辑开发)5 | r" y/ d( R+ k1 n
7-3 详情页点菜页面开发(LeftBarUI开发)
0 y" r' M) W* M7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)! F- H9 P$ j* Y& H1 [3 t2 E
7-5 详情页点菜页面开发(RightContent UI和样式开发)
9 w/ c7 x- Q Q1 k$ ^7-6 详情页点菜页面开发(RightContent逻辑开发)
$ ^3 \6 s0 H; e+ V/ d7-7 详情页点菜页面开发(ShopBar UI和样式开发)9 H z, _: R- w' p' R: ^" D
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
7 {9 i9 w: R3 H7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
2 \, s- ]+ U8 D, Z4 H1 H4 r* H: i6 a6 Y' g& j7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
; p. C8 B1 Y0 i; g( }4 L7-11 详情页评论页面开发(顶部Header开发)+ X" N0 G1 q/ r' n- ?
7-12 详情页评论页面开发(列表List 数据绑定)
; P% z1 m, g% Z9 J7-13 详情页评论页面开发(列表List UI开发)
1 G: X# u l( H' o! T; P7-14 详情页评论页面开发(列表List样式逻辑开发)
% h* `0 O$ h4 U, J0 O7 m7-15 详情页商家页面开发(UI开发)# I1 d# P; O3 l' e/ g; x3 c
7-16 详情页商家页面开发(样式开发) R @1 m7 t% A( u" T
3 {- X3 g( g$ l) ?5 Q4 n! z
第8章 美团APP—回顾与性能优化+ e2 m2 k: w7 x- |( m
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...0 O$ o" X* Q, s
8-1 懒加载性能优化
7 y4 b; |# x; Q/ N% V8-2 JS和CSS公共文件抽离优化
, O. ?4 I% `# e# w6 f8-3 编写后台server读取真实数据/ S1 Q8 F# S |% T) L. Q
8-4 多Tab 页切换与滚动数据加载优化4 v u+ E2 _5 C4 r1 ]; s( g7 H( R
8-5 项目打包
: e/ w9 {/ q. p/ D7 p6 Y- \* s8-6 项目发布- `! o z9 D# C8 z
: v6 ]7 s- j* n9 I) g; p
第9章 美团APP与hybrid深度结合) D3 G: t" S# }
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
* R j! a7 x: |1 s9-1 JS bridge 原理 试看
2 l# u. Q$ J f( @% @9-2 iOS webview + JS API接口+iOS APP集成" {% c; A% O& ^/ ~
8 s& J: W5 x5 R' D# s i; X
第10章 课程总结/ M- W& X% } b' o' q2 T, c
回顾和总结课程讲解内容，能更好的回归和归纳。
" U4 i8 c ~( B4 _0 g2 _3 T$ k h! g10-1 课程总结. p& X' {# n4 ?* \% s% q* _% H
' ^! w6 d8 O: {2 v2 F
【下载地址】
9 g0 s# Q( m' |! W# V
, d% H A8 s; q+ y9 e' k7 o! q v1 |0 A4 I
|
[复制链接]
