, A9 Z r7 j, a! M F" D; K! X- |
) |+ X% E% Y/ t$ e9 e6 `) l【课程简介】8 X8 P6 F" v4 ?
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
- x1 Q% k) S. T5 B0 D
7 l- q$ M2 c/ x+ X9 B" [/ C【课程目录】
9 _9 H2 t Q4 U1 o第1章 课程介绍; s3 C% T$ [2 u2 A5 ^% s
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。8 b3 W7 U5 t2 U* ?
1-1 课程导学 试看
' t+ H; c+ u& H2 e7 D9 z0 m" h0 H! f s% ?) G
第2章 移动web硬知识点# n$ ]9 @9 ^( V& v* V! r
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
, B/ K0 [; x% B7 ~' b2-1 移动web开发概述/ W4 c* D0 P. H- }6 j% g
2-2 移动web开发调试8 f: Y$ h" q- Z2 Y4 ]
2-3 移动web适配概述8 a2 s+ B, T6 d" B' e& Y7 _
2-4 viewport视窗概念+ Q# z; L8 |6 }/ w
2-5 css3之flex布局, z) x8 }& O4 Q, T
2-6 响应式布局和MediaQuery
M0 @2 U" y; j# M+ F2-7 rem,vw布局与适配
% H4 b# U& u! S" S( L2-8 移动端touch事件详解0 p% v* c/ h% M; n" a/ o* @" @
! k4 x8 U/ Q; i5 L3 ^7 m3 N第3章 移动web软技能8 w: \. [4 u8 B3 u
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
' y2 m% P: D+ P. D' F* ?' `3-1 代码管理工具&项目构建工具简介
) z7 B( u' D7 V1 {2 Q& T3-2 webpack工具使用介绍
+ y2 G! a6 }" K- ^7 w3 n9 |. ? Y. B3-3 Sass预处理工具使用介绍0 T5 {2 U% X: q* E6 {' w: I& O" `
3-4 React组件化思想 试看
) i. d7 ^6 Y& x: n6 y; M& V, ?( z% c3 g( o% a' o* ]. [: r. N
第4章 项目开发构建环境搭建
: D) D- D2 c* p本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
0 b4 P) Y, I; n4-1 项目和技术栈介绍3 R. y2 |3 R3 l3 l2 s$ ?; D
4-2 项目演示 g! Z& w" }" u: b# n p# T& M
4-3 构建环境搭建（1）
3 \. ] s! q& U4 W& n4-4 构建环境搭建（2）
! K2 Z+ q, `6 L* A# P( I: y4-5 构建环境搭建（3）
1 L4 w% g: H w; `* S4-6 构建环境搭建（4）
: _# K1 q% O7 @/ W( g2 A4-7 redux-react使用介绍（1）7 v3 `( d. Z+ g. r
4-8 redux-react使用介绍（2）
" U6 Y. G$ Q! n! q9 a0 U+ d1 [7 G1 t5 `) B8 H
第5章 美团APP—首页开发/ t X3 z! l6 {! _
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。* i1 A# z+ W. g7 L. g
5-1 底部tab按钮开发(webpack-dev-server配置)& r$ Q8 b9 G& T, I+ G
5-2 底部tab按钮开发-UI逻辑编写（1）" E! [* g. g) c; V" c% {
5-3 底部tab按钮开发-UI逻辑编写（2）
8 k; B$ V$ d2 j m' \5-4 底部tab按钮开发(rem配置)
* h2 ~, p' M& F( j5-5 底部tab按钮开发(集成ESlint)/ m; u* s) y- X' j
5-6 底部tab按钮开发(集成HMR)4 `1 J. n) v% }- i9 P" a& P9 B
5-7 首页页面开发Header模块开发
Z* Z1 }* ?# S7 X5-8 首页页面开发SearchBar模块开发" A/ N+ G7 [, W9 @5 E. ^/ C; Y. }
5-9 首页页面开发-Category模块开发（1）2 j% ^% k" q, c) n
5-10 首页页面开发-Category模块开发（2）2 b& b- o7 k9 ]# r
5-11 首页页面开发(ContentList模块开发)
7 g: [6 N+ o |5 V+ [5 d3 [" ^5-12 首页页面开发-ListItem模块UI开发
. L# ~1 g3 A2 `9 J! U5 x1 N a5-13 首页页面开发-ListItem模块样式开发
& L# C; P+ A8 v* v7 D" L5-14 首页页面开发-ListItem模块数据渲染开发（1）6 e% a* H/ G5 F; C0 o. t
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )5 J. h/ s2 g4 |7 i! ~3 \
5-16 首页页面开发(滚动加载逻辑实现)9 g$ \, o w' Q% a: A& g7 g9 ~
5-17 订单页面开发(List模块开发)
/ M% s9 \6 u' v" s' ]5-18 订单页面开发(OrderItem模块开发)（1）
8 ]5 I8 @, y- ~* Z; y5-19 订单页面开发(OrderItem模块开发)（2）
, ?& q2 [/ t$ P3 I- O! q5-20 订单页面开发(公共ScrollView模块开发)
1 m9 H% x* a) t1 o* |2 r1 y- b5-21 我的页面UI开发5 n0 w% \# T2 L0 r6 A) Z7 z4 V
5-22 我的页面样式开发% I; i- f1 q; T3 v+ v( \8 R4 v
5-23 集成react-router2 c. V0 y" e5 j/ U% w
+ A+ ^: M# F# m* `
第6章 美团APP—评价和分类页开发4 l3 f. G: f" H0 |) P
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。3 _% ~' O3 `$ r2 z- Z) A6 g1 \
6-1 分类页面开发(顶部NavHeader模块开发)5 H+ j5 I, _+ B5 B8 ^/ }
6-2 分类页面开发(顶部Header tab 模块UI开发)
3 k' Q# M' w3 c$ F0 X5 V6-3 分类页面开发(顶部Header模块样式和逻辑开发)( ]2 w T' [: A) V3 S& x: m0 f
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
, e6 y+ V. l+ `1 g" V+ j8 Z* L& D6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现7 K5 k: D- p3 F* S7 q
6-6 分类页面开发(Filter面板模块样式开发)4 I5 ~6 a5 E, P) M
6-7 分类页面开发(Filter面板模块item逻辑实现)
# k# o" x* ^3 v T$ s+ B6-8 分类页面开发(列表List模块开发)
: O3 q5 m( _2 e& r' e6-9 评价页面开发(UI开发)
: X. H( T. h5 n6 b, z! r: y6-10 评价页面开发(样式开发)
' p/ m( L v2 f. s* s# O: n6-11 评价页面开发(交互逻辑开发)
3 V& {' f8 F7 V0 g; z
' X5 f9 K9 }" R第7章 美团APP—详情页开发% ?% |) f/ l$ `+ ?( Q
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。' z& Z8 G5 b3 @6 e1 i3 `' i, _
7-1 详情页顶部tab开发(UI开发)
: ~' y& G3 n. C7 k5 q7 I7-2 详情页顶部tab开发(样式交互逻辑开发)# O/ S. x; U* s, T; Y2 b) e; \
7-3 详情页点菜页面开发(LeftBarUI开发)6 ]2 L# L5 ]( ~3 N# y
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
# A: A" D/ P) T8 P7-5 详情页点菜页面开发(RightContent UI和样式开发)/ Q% I7 Y# f; d5 \
7-6 详情页点菜页面开发(RightContent逻辑开发)4 F" F+ b5 z9 _1 L5 ^( z" ^% T
7-7 详情页点菜页面开发(ShopBar UI和样式开发)2 h; F2 f% t7 R9 L y) f) o; H9 l
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
+ ^6 ?& y b1 h( g! b7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）8 a! `! K# w2 E" I# I" u O
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
+ d Y! ?" a* L- j& Q2 a7-11 详情页评论页面开发(顶部Header开发)
% o3 i9 Z: |$ U" j7-12 详情页评论页面开发(列表List 数据绑定)
$ V' e+ C4 H2 ?" \7 F# ]7-13 详情页评论页面开发(列表List UI开发), g1 F# M! K0 w+ w+ a
7-14 详情页评论页面开发(列表List样式逻辑开发)/ V# u. s3 y8 N# ~
7-15 详情页商家页面开发(UI开发)
9 i2 ~' p0 {2 t6 G. [1 X! R5 Q. a7-16 详情页商家页面开发(样式开发)8 D d3 Y2 |: h; P. R) I
7 ~+ Y2 F: t [
第8章 美团APP—回顾与性能优化
& n: M) Q3 a: }0 }通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...) u7 F8 Z1 Y) [; s" A
8-1 懒加载性能优化" C9 q* u" N4 E! }9 H& w
8-2 JS和CSS公共文件抽离优化
9 H' f6 W9 k( N5 A* o6 j8-3 编写后台server读取真实数据5 J8 r8 O' X: _) {1 ~4 D/ Q$ D
8-4 多Tab 页切换与滚动数据加载优化
4 @- M# ^% R0 w2 M5 G8-5 项目打包& g/ }# x+ S9 B1 m& j8 q
8-6 项目发布
7 E3 M6 ]$ o) Q" @) r6 Z
4 Q7 f) B1 P* |; h3 C1 v第9章 美团APP与hybrid深度结合
) Z) _5 w( }! F本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。- B4 _: M a; m
9-1 JS bridge 原理 试看
L) `9 I" c& r' u9-2 iOS webview + JS API接口+iOS APP集成
1 z+ z2 S8 W" J0 c8 B* `$ m g+ E8 [0 B
第10章 课程总结2 L$ w5 Q3 E) t, Y9 b5 \
回顾和总结课程讲解内容，能更好的回归和归纳。% V# Y: [1 _8 Z) R
10-1 课程总结
( H- F7 E5 G i& C6 r& a! ?' T3 ^* B; g$ P5 A {0 ^
【下载地址】+ Z4 Y+ f' f( n
1 m7 I; p/ U. o& h% L+ j2 w5 T& k6 p- \# t9 J$ J, n$ P. T
|
[复制链接]
