; G6 t7 X, b$ i1 Z3 q
% b* K% }4 W; f$ }2 V% ~! g/ u# R【课程简介】
4 n4 M7 L2 z# T) H本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。0 j: J! T& c; g
0 x' R6 K1 Z0 k4 F7 o9 L/ W
【课程目录】
3 b) v2 a, v+ |4 r2 t! m7 c* C1 m第1章 课程介绍
) f+ B! A! V! g+ b& m4 y ~通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
( ?( Z I9 @9 F# P% ]9 h1-1 课程导学 试看
8 q# e8 X) k3 u2 C5 M
1 s2 q. y: t& m& ^# j9 W' S# T W第2章 移动web硬知识点
. C8 l0 ~; c/ U' K本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。( h3 q L0 q3 B D
2-1 移动web开发概述+ j8 U& Y/ A$ R: m: l; R5 C* u5 X T
2-2 移动web开发调试% ?- U7 F+ l w* ^$ ^9 H
2-3 移动web适配概述+ i' Y( J# ?5 t$ I" ^ x! _5 r* B9 Q% c
2-4 viewport视窗概念, K( k. p$ f. R% W L
2-5 css3之flex布局( o3 [8 @9 p" ]4 N, |
2-6 响应式布局和MediaQuery
0 ^8 ~, ]6 ^' w2-7 rem,vw布局与适配# `% h* Y/ ~0 D& r- L7 M( q
2-8 移动端touch事件详解
5 o4 C$ f2 y0 {* P, X6 a
; q7 m0 o4 g9 b! @第3章 移动web软技能4 p( g( K1 d1 g* x
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...$ u' T2 n# k5 ~0 S7 ?
3-1 代码管理工具&项目构建工具简介/ r0 `: J$ a1 h0 S
3-2 webpack工具使用介绍/ O* |! F Q! h8 z4 ^
3-3 Sass预处理工具使用介绍, X; k2 x5 w6 J0 ]* {4 q/ M8 ^ U
3-4 React组件化思想 试看9 T& k! N/ c& f; \& c' V/ v& n5 d+ @
, }2 {/ o& d0 S. R+ @5 p% U* ~第4章 项目开发构建环境搭建$ p. ^2 e! d* k' C. s' ^8 P. a
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
& {; u* r/ t$ r7 ?/ ~' m4-1 项目和技术栈介绍
: t( i1 ^8 y* K4-2 项目演示
8 R+ H, Q6 C" E) g7 u$ c [4-3 构建环境搭建（1）; H8 s2 q. V: O% D, ] Q
4-4 构建环境搭建（2）
( L9 I# A# ?$ }- W+ E5 p$ Z4-5 构建环境搭建（3）1 g2 t3 B6 z5 Y; L: J
4-6 构建环境搭建（4）
; l( j# q& L. N6 P: d7 {8 f4-7 redux-react使用介绍（1）
7 H' [* G$ H. N! E" g9 A- Z4-8 redux-react使用介绍（2）
* L R- z- B7 Z2 m" J; l7 j7 s' ~8 S- J* l- q6 U% e' |
第5章 美团APP—首页开发
5 }2 l+ u- N1 }% e; s3 i开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。$ I0 c: i; @! i w7 {. R: o$ T h5 l
5-1 底部tab按钮开发(webpack-dev-server配置)
1 X, [& K+ f" ~5 N4 q+ g5-2 底部tab按钮开发-UI逻辑编写（1）; `* j* ^. v- d
5-3 底部tab按钮开发-UI逻辑编写（2）2 W x+ m) x4 Z) S# y8 R+ w& X
5-4 底部tab按钮开发(rem配置)0 r7 I6 b0 ?" d, E5 ^7 P: }/ o
5-5 底部tab按钮开发(集成ESlint)
i6 S! j, r' {' J7 V& e1 n5-6 底部tab按钮开发(集成HMR)9 `* d7 w! T3 v( i/ [
5-7 首页页面开发Header模块开发& D6 H# t$ R. Y$ T) B& g
5-8 首页页面开发SearchBar模块开发( Z* |! Q; y5 Y8 F9 m4 E5 B
5-9 首页页面开发-Category模块开发（1）+ D, p& m- ]2 r
5-10 首页页面开发-Category模块开发（2）
3 A4 m4 I# L" D7 ~0 J: S1 g, I5-11 首页页面开发(ContentList模块开发)" [& u% n }; m, V! _
5-12 首页页面开发-ListItem模块UI开发3 m7 ]! P0 g+ w {2 ~
5-13 首页页面开发-ListItem模块样式开发
) s4 B' A5 x& _3 ?- W' m4 q6 C( k W5-14 首页页面开发-ListItem模块数据渲染开发（1）0 `5 ~3 z) C! z; [7 w6 V
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
1 v9 F* X/ s( L: y( m5-16 首页页面开发(滚动加载逻辑实现)
# D" _5 @( X8 P- u, Y1 |3 w5-17 订单页面开发(List模块开发)& g: a" @2 R3 n+ l
5-18 订单页面开发(OrderItem模块开发)（1）
E3 V5 O* X, F' V3 j5-19 订单页面开发(OrderItem模块开发)（2）1 s+ ?* A/ h q7 W
5-20 订单页面开发(公共ScrollView模块开发)+ s' b& O2 C8 R+ w& \
5-21 我的页面UI开发
' [& Y0 J5 w6 j+ F0 ~9 N+ n5-22 我的页面样式开发
" i% t5 c9 `8 ]4 |! C5-23 集成react-router9 M V+ `) w# _4 }4 k
" f: o1 L8 F$ k8 D/ F" p
第6章 美团APP—评价和分类页开发
: ]) y V, Y5 v- F7 I! e开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。' J. L& m. \1 E$ H9 }% Q
6-1 分类页面开发(顶部NavHeader模块开发): Q u9 H/ P( l$ j, M' S1 J- Q
6-2 分类页面开发(顶部Header tab 模块UI开发)9 Y1 R" O: a. e' h) t
6-3 分类页面开发(顶部Header模块样式和逻辑开发); f s7 B- i N$ u; t$ J
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
* g* v( `: k" K1 X6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现2 I5 q1 k1 d; r, [
6-6 分类页面开发(Filter面板模块样式开发)
$ o9 U$ |& t: Z# k4 A6-7 分类页面开发(Filter面板模块item逻辑实现)
( J$ X7 m+ c3 W) K7 [+ B6-8 分类页面开发(列表List模块开发)6 ^. X- d* m& ]% f G* B# a
6-9 评价页面开发(UI开发)6 b, B7 J1 `+ {* T$ C6 @7 d1 L
6-10 评价页面开发(样式开发)' {5 u) K& {! w
6-11 评价页面开发(交互逻辑开发); ^2 |) E3 A/ U R. s" M
/ Q( X+ U4 N% M" i" [5 Y9 j6 Q" z$ A
第7章 美团APP—详情页开发; v2 g& E+ f6 D& e' m8 u
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。: }# l! s6 q4 o+ _9 Y! B, {+ H
7-1 详情页顶部tab开发(UI开发)5 }$ J2 p' ~, J; V. n' P" q* y
7-2 详情页顶部tab开发(样式交互逻辑开发) T) T) j! k; Z7 ?, t1 f
7-3 详情页点菜页面开发(LeftBarUI开发)
' ?8 m4 w$ @7 I0 N% K, N7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
9 u+ H6 p6 v* Q7 v; w7-5 详情页点菜页面开发(RightContent UI和样式开发)
* J2 I5 k$ ]. ^; p9 U7-6 详情页点菜页面开发(RightContent逻辑开发)/ N- Y, }; p" \! A
7-7 详情页点菜页面开发(ShopBar UI和样式开发)/ [- Z& L! C8 j" [/ ]6 j2 O$ Y
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
- W; `5 G8 Y- m7 w' E1 v! g7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
5 f% o3 g# C- p f/ Q" A% S: r7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）& M: d2 k5 B! p! O. r" B; ?! b; e5 E
7-11 详情页评论页面开发(顶部Header开发)& v/ g8 Z" U: W- ]2 [. K: ~: c) j
7-12 详情页评论页面开发(列表List 数据绑定)
/ d4 @! `) x% g# _% W" g7-13 详情页评论页面开发(列表List UI开发)
; ?) Z7 V2 j7 k! p7-14 详情页评论页面开发(列表List样式逻辑开发)
5 x% t, P8 E, z, h7-15 详情页商家页面开发(UI开发)) Z6 y6 H+ M1 z7 V, v2 l% D
7-16 详情页商家页面开发(样式开发)9 M% S2 x5 M" x& o" y
9 j- o: p" B9 R% g
第8章 美团APP—回顾与性能优化; J4 j, K7 W6 M
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...; G) r8 z1 y0 L: |
8-1 懒加载性能优化6 _, Q, _3 b& }* _3 T5 G
8-2 JS和CSS公共文件抽离优化1 H0 T4 g4 S' p9 P" j
8-3 编写后台server读取真实数据 k3 g7 `" L& E( j7 ]! C
8-4 多Tab 页切换与滚动数据加载优化
6 K0 V8 n9 e" I& s/ ]7 q% A8 ^8-5 项目打包
; c) }; J ~4 ^8 b1 C8-6 项目发布 R( i0 _5 q2 a0 @7 j# N
1 g+ J- k2 Z5 u- Z+ }" f5 Y# s# `
第9章 美团APP与hybrid深度结合% b( b5 A% Z5 ]- \
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
( b9 R0 b7 m+ g( S) r# I9-1 JS bridge 原理 试看
9 ^4 @' Z5 V/ ?7 x$ m; h9-2 iOS webview + JS API接口+iOS APP集成
! n. i3 Z# \: L- k, T8 }/ N
+ w' p+ d# G# e4 _2 c9 ^第10章 课程总结. c" _5 S& h; ]6 y7 ?: M
回顾和总结课程讲解内容，能更好的回归和归纳。! F5 Y$ |, i) r+ d! ^! v1 r1 D7 v% Y
10-1 课程总结
6 B$ E* P, B( q/ p' o
6 r% ~, U0 b: D$ J【下载地址】: @# M: g5 ]& ~2 }" B! }. Q' D
. T0 n* A) [0 i" C1 Y& N
" B/ ]. F, \5 U+ j/ N$ @5 G
|
[复制链接]
