. ?; m: [+ p% @2 C. u" h) i& Q
& X, j5 l/ t. c' n【课程简介】
. a5 @# M$ r7 U: o$ o' P5 }: M2 Q本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
2 D3 f9 z7 h* S
. e8 Y# M+ a7 _ P【课程目录】
2 M: ?2 _6 {% L4 G) k" d+ ~( n6 X第1章 课程介绍
4 x2 m0 c" }. A( c- B% l通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。$ y2 V& Q _, T; U: J4 e$ X. F
1-1 课程导学 试看 V6 }- w9 c) a/ z0 W) y
. G2 R' l# |- e. X$ _4 W第2章 移动web硬知识点
) i/ w+ W0 M q本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。 \. N- V! t/ k# w
2-1 移动web开发概述
( `2 E% ?! N$ L5 z& e" D2-2 移动web开发调试! n; P, p7 z5 g
2-3 移动web适配概述2 }, B# ~/ S0 {; k. x
2-4 viewport视窗概念" C# \/ N; `7 P! \) G# R
2-5 css3之flex布局
! R$ B7 C3 a2 h' |* K( b2-6 响应式布局和MediaQuery
2 ]# e+ x4 N U% H" a# F5 T" W( I2-7 rem,vw布局与适配( F$ w7 C4 u9 J& G" K, M5 q
2-8 移动端touch事件详解$ d/ g' N: [3 g! M, Q+ G
0 ^. B7 g2 t( P' F2 r" p第3章 移动web软技能
5 `4 N/ p( d2 ~7 d3 n, n9 r; F2 z本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
, O$ A9 g" J2 ?3-1 代码管理工具&项目构建工具简介/ s7 @) `- U* c) m3 I3 o
3-2 webpack工具使用介绍
# I! D8 X3 |& D% A3 ^3-3 Sass预处理工具使用介绍
1 S8 _. X; o7 Q% d* r3-4 React组件化思想 试看
! D" i/ \( Q4 |, A2 y3 N6 n
% _3 Y( q4 x' r, n第4章 项目开发构建环境搭建 R4 u4 x- }; A8 P5 J$ A5 L
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。2 T3 I3 @ ~" z% y4 A: ?: d; ~
4-1 项目和技术栈介绍
! U$ [; a o# h% @& k q" s4-2 项目演示
6 C3 V+ {3 c" |4-3 构建环境搭建（1）
4 t- z9 @: j3 n6 Q5 {* v s1 i4-4 构建环境搭建（2）
" |5 g% x9 C* L0 i- S4-5 构建环境搭建（3）
3 ]$ u P# N7 M/ N% c4-6 构建环境搭建（4）. b4 u+ k5 f! h' \- L
4-7 redux-react使用介绍（1）
: \$ K. F$ [+ S, o- r {, J4-8 redux-react使用介绍（2）
7 }9 [. f t# p Y8 c& b+ {, G
0 n$ n. j5 `# r; ^7 t" t" \' X1 V E. N第5章 美团APP—首页开发
8 Y: D9 O- j1 k开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
) @$ Z; f& R) ]. q l) F5-1 底部tab按钮开发(webpack-dev-server配置). W# ^ ?+ z7 s; V9 q: a
5-2 底部tab按钮开发-UI逻辑编写（1）- N5 |+ I: Y4 B _
5-3 底部tab按钮开发-UI逻辑编写（2）. a: _: Q7 d, P' f9 E( O# x2 S
5-4 底部tab按钮开发(rem配置)
; {* S, p5 N. ^5-5 底部tab按钮开发(集成ESlint)6 K+ ?- w9 H, n% |5 q
5-6 底部tab按钮开发(集成HMR)
5 j- {9 N' m0 ]5-7 首页页面开发Header模块开发
8 ^4 R, o+ H' X T4 n$ b/ d5-8 首页页面开发SearchBar模块开发( q' [% X$ N* d/ Y' t9 M
5-9 首页页面开发-Category模块开发（1）- R$ b& d2 t3 u x" [8 I
5-10 首页页面开发-Category模块开发（2）) d7 L8 R! W) X
5-11 首页页面开发(ContentList模块开发)
+ G1 Y$ D$ l9 p2 c2 C& ]4 l- @5-12 首页页面开发-ListItem模块UI开发
% M: D. L: H% N; K. X7 k. p/ z% s5-13 首页页面开发-ListItem模块样式开发2 p! a6 w) Y/ t L9 F
5-14 首页页面开发-ListItem模块数据渲染开发（1）. G" Q& I7 S/ n( E0 x& X' Y
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )) X: C8 B$ T1 F, D$ G b* O, d
5-16 首页页面开发(滚动加载逻辑实现)
# s, V; ?6 |" H& Q7 n2 w7 s0 @: B5-17 订单页面开发(List模块开发)# f2 b" T& v1 m" L! p4 I
5-18 订单页面开发(OrderItem模块开发)（1）, Q/ q" Z" A: w
5-19 订单页面开发(OrderItem模块开发)（2）5 R( @* a9 U5 }+ F1 z# X( V) M
5-20 订单页面开发(公共ScrollView模块开发)* R* p' f. P: J9 C, y; o5 o& o
5-21 我的页面UI开发
. k2 T7 Q. D q5-22 我的页面样式开发: b6 B8 C4 @! f, C. z* }2 j( w8 C) ]4 k" M
5-23 集成react-router
; j' x4 z0 e9 P$ M' ?* H, w/ Q3 i% e6 t0 u, L7 h
第6章 美团APP—评价和分类页开发
1 p$ v7 d# p$ o' H3 k% P {开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
* C" p( u6 @! u( r( B$ R- I6-1 分类页面开发(顶部NavHeader模块开发)5 z$ V: N/ E& T/ p \+ Q
6-2 分类页面开发(顶部Header tab 模块UI开发)( u: f/ |0 { ~9 ^% B
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
5 v- f" G0 J* I9 S$ x8 o2 k6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
9 l2 K7 ?% M# _ H6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
+ f5 K* S# I2 T6-6 分类页面开发(Filter面板模块样式开发)3 M* V' c. ]0 h' [( Y, R2 Q
6-7 分类页面开发(Filter面板模块item逻辑实现)
: ?0 j9 b% k- [8 I: b O6-8 分类页面开发(列表List模块开发)+ [1 x F5 | |3 ~7 c$ X5 s; u& e
6-9 评价页面开发(UI开发)
" _' h6 b+ p3 R/ H8 X, B) F5 s" i- O' N6-10 评价页面开发(样式开发)
4 [7 o; T1 {2 {6 E7 G6-11 评价页面开发(交互逻辑开发)
: t5 L) ?% @! C; B$ m
. L# \; Y, o/ U$ n4 e- b; g第7章 美团APP—详情页开发
( h7 ~, g& t$ x y5 F开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。/ Y2 Y; B! T8 q* g2 ?4 q
7-1 详情页顶部tab开发(UI开发)
. i+ q2 J1 t/ ?9 b( e! h7-2 详情页顶部tab开发(样式交互逻辑开发)
, n& M2 _9 V' o+ D6 ]) V; T# O8 f7-3 详情页点菜页面开发(LeftBarUI开发)
9 j: U- M8 ~( Z) g" G7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发), k" B: k* t' n% c* J
7-5 详情页点菜页面开发(RightContent UI和样式开发)1 I' W. Z# B2 K* E" h- z' `
7-6 详情页点菜页面开发(RightContent逻辑开发)4 h( k7 y4 @/ h- ^% E/ V5 }4 u$ u
7-7 详情页点菜页面开发(ShopBar UI和样式开发)3 a7 l9 c- z+ ~ n) B7 {% x
7-8 详情页点菜页面开发(ShopBar 逻辑开发)# i% [3 U7 m3 ~- C, \
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）9 Y1 Y$ N! J% i! G: C# _
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2） w6 U9 }. a: @; `$ F6 V
7-11 详情页评论页面开发(顶部Header开发); L1 h6 k! r! I
7-12 详情页评论页面开发(列表List 数据绑定)
4 D* w* m6 t% u& E! `* t- z7-13 详情页评论页面开发(列表List UI开发)
/ r8 X7 ]( P4 u9 ^& W0 p: p9 e- [# ~3 H7-14 详情页评论页面开发(列表List样式逻辑开发)( ^/ o+ s0 r: E) M! A1 |
7-15 详情页商家页面开发(UI开发)# S" R/ e6 a1 t2 s% [8 Z
7-16 详情页商家页面开发(样式开发) {# I, U B, T+ _0 A" S Q
8 B! \4 T7 O. p5 N+ Y0 D9 i第8章 美团APP—回顾与性能优化- W% l* R8 Q* N; d7 ^9 r
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
5 [7 T2 L! J+ [" v8-1 懒加载性能优化
+ X; Z9 B# k9 m$ U8-2 JS和CSS公共文件抽离优化% X7 {. ]6 n. S h$ N. `
8-3 编写后台server读取真实数据( N7 U- `+ h% }, J
8-4 多Tab 页切换与滚动数据加载优化2 x0 c) x7 j( G: F$ {1 n
8-5 项目打包9 M `! T2 f2 C& [( B
8-6 项目发布
3 L7 r& {1 Q% G! D0 Q: y( h: V: ~
第9章 美团APP与hybrid深度结合
1 o6 L# ^1 J/ u4 M8 Y0 O8 } W本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。2 S$ a% }/ N) Z6 \' h3 H
9-1 JS bridge 原理 试看
% M( f$ h% u) X/ G4 @' y9-2 iOS webview + JS API接口+iOS APP集成; S# _8 ]. S, Q- u' e
) g& n. ?' M3 e: ]& ~0 A
第10章 课程总结1 O1 |5 t: m2 S @
回顾和总结课程讲解内容，能更好的回归和归纳。
1 A" A: J4 ~0 v# @9 H1 g10-1 课程总结
2 ?% g' _( c7 E1 u$ p
; C. ~& o: J. n/ X% K【下载地址】2 f( r* v# f w/ O$ S: g0 u
# F0 ]0 T, P$ y* G! J8 ^* X" k: Y o0 A, r7 A4 T
|
[复制链接]
