: s7 V+ k5 v9 ^- B x) C' U4 X
4 b3 m. G" h7 s0 ? t; s' z) f5 R
【课程简介】# E3 E: N% U# U. B
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。! O$ g) w- ~1 Y4 V) L( Z
/ l4 u5 B! Q/ Y6 O7 x+ Y
【课程目录】
$ G* v8 W q% u6 A" r第1章 课程介绍' A& q9 A/ f9 c
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。5 p I# X: T" c- p
1-1 课程导学 试看
, H8 Y9 K' S2 E$ }6 z
5 d4 }, I5 g# _# E第2章 移动web硬知识点
- X# e" |9 t# X) G1 u( }1 Z# w; W本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
/ n+ n9 X) X2 `1 v3 P. w7 Q9 s( h2-1 移动web开发概述
* }$ w( R# v0 r( M; N" ~) S c- u. D, a9 z2-2 移动web开发调试
0 Q* K5 N) v- o4 h2-3 移动web适配概述; h0 i+ n5 E2 z* `7 i
2-4 viewport视窗概念- b; R* c) a* u2 H# I0 W) O
2-5 css3之flex布局% d9 }! a; _* ` I0 z+ A
2-6 响应式布局和MediaQuery7 \* N. X& ^$ C; ?0 X
2-7 rem,vw布局与适配
( t% r7 k8 A& _6 X8 q3 K5 B2-8 移动端touch事件详解$ h6 r5 c* p8 `; R
4 X E% @+ \# m" e! x2 v+ x
第3章 移动web软技能
/ O5 l9 F# X ], A* H( p! G本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
5 s2 Y3 z& P% ^3-1 代码管理工具&项目构建工具简介6 U( m: P5 h4 `0 B( Z
3-2 webpack工具使用介绍- {+ w: z y) _' M, {
3-3 Sass预处理工具使用介绍( T& i: t3 N3 z* m5 a
3-4 React组件化思想 试看% h; T/ r" v7 [ }# t1 Z2 e
- v6 T6 R" |1 [+ z! }. M7 ^ [8 a1 D第4章 项目开发构建环境搭建" f9 q6 Y* u6 X7 R" ]) B) w8 y/ m/ ?
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
$ b3 A. N) B; O. N$ h0 _4-1 项目和技术栈介绍
( a' R0 M* _5 q4-2 项目演示
: h6 Q6 V+ t) n$ V& W N& v- w4-3 构建环境搭建（1）. e$ D3 U$ x( }* [3 h$ N
4-4 构建环境搭建（2）' B9 I* I+ u0 z% p1 W
4-5 构建环境搭建（3）
6 z' }4 v/ F) _4 c0 @5 d4-6 构建环境搭建（4）$ R# G+ `1 f( S% p2 S3 s2 y
4-7 redux-react使用介绍（1）" Q6 L" D4 }+ R# t p J; q1 S( ?
4-8 redux-react使用介绍（2）! G3 B* v& B5 m7 M* j
& T; V3 B/ V9 V0 b! X
第5章 美团APP—首页开发5 L: W7 I! v$ ~7 c9 {5 `
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。- j1 M1 k# d) T. B4 I
5-1 底部tab按钮开发(webpack-dev-server配置)
N5 P% } F: x4 }! o5-2 底部tab按钮开发-UI逻辑编写（1）6 k+ [' Q4 b+ z1 h/ x/ }
5-3 底部tab按钮开发-UI逻辑编写（2）
* G3 W; E! [: @7 F6 r5-4 底部tab按钮开发(rem配置)
% F- _& `) N4 X9 l2 F5-5 底部tab按钮开发(集成ESlint)8 P3 R' E. K& d: a+ D
5-6 底部tab按钮开发(集成HMR)7 `- _( l" `! s& U H( k9 e
5-7 首页页面开发Header模块开发+ b, F* w( S9 ]) Y" ^" ~! @$ e
5-8 首页页面开发SearchBar模块开发
! r2 E$ e2 T% M7 ~9 [/ n9 H5-9 首页页面开发-Category模块开发（1）
$ C2 ]2 m9 L6 w1 m; e: [5-10 首页页面开发-Category模块开发（2）# P: b9 T, I$ ]: Q C
5-11 首页页面开发(ContentList模块开发)# Y( L( f6 X' O. R- s7 b' U# l
5-12 首页页面开发-ListItem模块UI开发
& G; U$ e/ y i t5-13 首页页面开发-ListItem模块样式开发% _1 v( `' U+ k- ]9 Z
5-14 首页页面开发-ListItem模块数据渲染开发（1）
2 @/ t( S+ N8 s# v8 U8 D5-15 首页页面开发-ListItem模块数据渲染开发( 2 )% r' T: ]8 S& e& `0 x. Y0 C' ]
5-16 首页页面开发(滚动加载逻辑实现)4 E/ x% I. h& k' l1 i5 q
5-17 订单页面开发(List模块开发)
: C; l) g1 j0 L' i% {) s5-18 订单页面开发(OrderItem模块开发)（1）
5 a$ k. T3 ?' }! }5-19 订单页面开发(OrderItem模块开发)（2）. W- k' z: d- G- @1 k; [( x
5-20 订单页面开发(公共ScrollView模块开发)# I: e4 c( h( l" Z3 \9 K5 |) W! ~
5-21 我的页面UI开发
" j9 U+ R ?: S! O4 \5-22 我的页面样式开发
4 ~8 Y: V9 Q/ O, G! a5 R5-23 集成react-router
1 z- W8 E6 W# K" C: P- G) z" ?5 k F5 w% }# T. R
第6章 美团APP—评价和分类页开发! F! D4 D) f3 i/ |( l
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
/ \3 @2 a. o% @: h6-1 分类页面开发(顶部NavHeader模块开发)
T' ]* U" J/ N4 S0 ~& T6-2 分类页面开发(顶部Header tab 模块UI开发): X3 e( L: d! U& W
6-3 分类页面开发(顶部Header模块样式和逻辑开发): m; k# d7 S+ C
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
d! z, C! J! }; _0 S, c! v* h; Q6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
$ \/ d4 r1 E7 j! }- N- t0 a# k6-6 分类页面开发(Filter面板模块样式开发)( U6 W4 X) n8 G& G2 c* P
6-7 分类页面开发(Filter面板模块item逻辑实现)
& v& t/ y; m# a9 r5 C6-8 分类页面开发(列表List模块开发)
& B- l0 \* X& F6-9 评价页面开发(UI开发)
# K' k7 c3 C6 A/ `. U! R6-10 评价页面开发(样式开发)
5 l4 Y* |$ q" |4 w5 F# Z& W# a' j6-11 评价页面开发(交互逻辑开发)
7 V. j8 I. ^1 a9 ^
5 V! m2 O& Y# ~, h, k+ v4 Q第7章 美团APP—详情页开发
* r$ K4 r' i: W3 w% B开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。8 v; H* ?1 ?+ B: @
7-1 详情页顶部tab开发(UI开发)
% s8 i; \* _, y+ K( n. Y7-2 详情页顶部tab开发(样式交互逻辑开发)" E/ A# R V& i' K' n1 X
7-3 详情页点菜页面开发(LeftBarUI开发)+ G/ b- i# i9 G; W
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
n3 z2 V" ?( a5 P7-5 详情页点菜页面开发(RightContent UI和样式开发)# j" b# D+ k& {4 r: H; R
7-6 详情页点菜页面开发(RightContent逻辑开发)8 c' Y4 n. [( Y
7-7 详情页点菜页面开发(ShopBar UI和样式开发)
X4 W: _. X2 [) n$ M# L$ P7-8 详情页点菜页面开发(ShopBar 逻辑开发)
: w" B- y$ @2 i$ z, S5 J7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）, U: _/ L; m: g+ `) A7 Y+ ^6 G
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
; Z+ r4 s. u! C7-11 详情页评论页面开发(顶部Header开发)
+ K& y- T+ P1 D+ Z2 ]( _2 i& b6 b6 p7-12 详情页评论页面开发(列表List 数据绑定)
8 a; y; l7 W, n& c! Q1 s. _4 b7-13 详情页评论页面开发(列表List UI开发)
6 v9 ?' m9 c" j4 ?: Q! y/ W7-14 详情页评论页面开发(列表List样式逻辑开发)/ x/ J1 U; ]+ c- \
7-15 详情页商家页面开发(UI开发)
- S) E! S6 {. m: T/ g$ |$ _7-16 详情页商家页面开发(样式开发)
* j X9 V. @ K3 K/ ^- y+ `2 E4 o0 ]: S- r2 d- @* [
第8章 美团APP—回顾与性能优化# F1 k. G7 ^9 f. ^+ M6 Z0 H- U
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...: G$ U" U% g8 o3 N9 h4 F
8-1 懒加载性能优化. x1 B5 n3 q- I, O+ `
8-2 JS和CSS公共文件抽离优化9 }2 n7 m# y# t
8-3 编写后台server读取真实数据$ M0 ~ [. |8 S2 t+ _3 ^
8-4 多Tab 页切换与滚动数据加载优化
3 ]- }' s, ]* a1 o. c6 h) e8-5 项目打包
! ]! N* {% e% P! w9 E& B+ `, e5 j4 U8-6 项目发布
+ k$ ]8 m# f6 W6 c c9 Z1 @
% r9 g6 B6 z K* P# n/ @* {7 N+ E第9章 美团APP与hybrid深度结合! E K5 l2 }. x7 x
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。4 ]- R `8 A. X3 \/ Y, y
9-1 JS bridge 原理 试看8 ]: t1 `" M# f, P- @2 A
9-2 iOS webview + JS API接口+iOS APP集成
& S. l- Z9 V- M3 ?) J. ^. @( a3 }. Y5 C- {9 S3 C) |' I
第10章 课程总结
9 J1 G: }: q Y6 T回顾和总结课程讲解内容，能更好的回归和归纳。
0 r8 S3 X+ ?* R+ s( U7 j9 _10-1 课程总结
8 `% j' ~* ~, G$ s6 Q; G" Z& F- E9 \& p+ O# H% \1 V4 H, K* T
【下载地址】% q; O7 e; i5 A7 {) }
* T% t# C; G8 f5 P u
4 {. M$ H; _# o |
[复制链接]
