4 R/ l1 W, O5 t: l& x4 T
2 Y$ _4 R. f" ?/ [ o【课程简介】
# V8 d2 @ E, d本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。) V! Z5 f1 _+ E) D
- v7 r- }: B+ m
【课程目录】; w, w }: Z$ u% }
第1章 课程介绍
' o& s" q. a% H5 h/ [通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
; V+ U/ }$ j2 Y) Q( @1 d; I; A! B1-1 课程导学 试看
: ?( B/ J2 d' ^% \# \# o {* K# H/ g: p$ b+ [
第2章 移动web硬知识点8 i8 M2 s" P( d- A! }
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
4 b( h, f: g# ~5 O2-1 移动web开发概述" `9 [) A; G4 }
2-2 移动web开发调试
) y6 T. f6 |8 ^ N: k/ H2-3 移动web适配概述1 X; N: e+ ~8 d0 |' x
2-4 viewport视窗概念
5 {2 s+ T( `; M% u, l2-5 css3之flex布局
" D0 w) |/ | A5 U+ ]. _5 ~$ g" b- y2-6 响应式布局和MediaQuery, U, S! R- O; m; |8 V4 M5 o
2-7 rem,vw布局与适配1 X$ ~& [: _- _/ T
2-8 移动端touch事件详解& e) t/ s* W6 P; k4 r7 I
% y; j/ S# @* {8 V$ d/ o9 t1 U
第3章 移动web软技能
' f4 N4 n9 l9 B本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...1 F! o+ j2 {( e# f1 Y
3-1 代码管理工具&项目构建工具简介
0 T/ I: \% W" R# {3-2 webpack工具使用介绍! n( r- `9 R/ M1 _
3-3 Sass预处理工具使用介绍9 q7 |, {$ ?1 R" Y7 ~
3-4 React组件化思想 试看5 S2 D6 C" A5 X! j- M( K- E2 C
; i3 G7 j8 V: }3 k. W; }0 {第4章 项目开发构建环境搭建4 ^. l. p' K! I6 Q5 s& l
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。6 N$ e. x3 m+ Q0 \$ [3 j
4-1 项目和技术栈介绍
; {# c0 |' I; z% K ?/ ?: S4-2 项目演示# W% z/ J" S" E# c& x0 `
4-3 构建环境搭建（1）
+ _$ o, r9 k6 B. T4 _2 Z' P4-4 构建环境搭建（2）
4 |; y, I* N, J9 t: L- c1 L- ~4-5 构建环境搭建（3）% @: C8 [: Y) l6 Q9 A3 O. b
4-6 构建环境搭建（4）
# `6 g; U0 s7 b, u& N* P o* V4-7 redux-react使用介绍（1）
: D% D q' L9 ~" s% j; y0 x4-8 redux-react使用介绍（2）
# t: t3 w' m1 _
; t. n3 `; k R: \, }- j/ k第5章 美团APP—首页开发
5 @6 M) i3 P& d- Y# t9 O* V; ~开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。+ Q1 J A- |" e" h
5-1 底部tab按钮开发(webpack-dev-server配置)
3 b( ^! [/ ?4 X. A1 x+ _& `6 _5-2 底部tab按钮开发-UI逻辑编写（1）
5 Z$ e: G! x4 X: `0 e5-3 底部tab按钮开发-UI逻辑编写（2）% Y9 m9 g i- V+ m0 Q/ ?; u
5-4 底部tab按钮开发(rem配置), h4 i9 I3 B6 X3 t/ g- K4 u
5-5 底部tab按钮开发(集成ESlint)
% b8 \0 F. E: M5-6 底部tab按钮开发(集成HMR)# i; G+ f# |( A. T! V1 Q
5-7 首页页面开发Header模块开发
5 }% L; b! S! Y+ a2 _5-8 首页页面开发SearchBar模块开发
& ?" [! [( k1 B4 T2 w8 n: |! e5-9 首页页面开发-Category模块开发（1）" L! j* |; ?' I
5-10 首页页面开发-Category模块开发（2）
: E& o9 Y' e* O* \& X9 G5-11 首页页面开发(ContentList模块开发)
- x* A- f+ ^& u7 i. `& S2 s5-12 首页页面开发-ListItem模块UI开发+ I. s! Z* j% `5 k' a# L v
5-13 首页页面开发-ListItem模块样式开发, T% K) r% V+ f; \+ i
5-14 首页页面开发-ListItem模块数据渲染开发（1）
) G, |! t' @0 e% R5-15 首页页面开发-ListItem模块数据渲染开发( 2 )4 u2 ]1 r" H5 O' ~. g _, v
5-16 首页页面开发(滚动加载逻辑实现)
6 ]" Q! g* Q3 {7 H* w, z% d# ~5-17 订单页面开发(List模块开发)5 R" r; c: i1 N% r! N* {
5-18 订单页面开发(OrderItem模块开发)（1）
. E" D# F1 M0 C/ t7 n5-19 订单页面开发(OrderItem模块开发)（2）( K$ Y4 I, M3 [( _4 e) m1 Q u& k8 P
5-20 订单页面开发(公共ScrollView模块开发)6 H2 I# t' H: X
5-21 我的页面UI开发
! K5 T/ Q4 ?( L+ t1 }6 N5-22 我的页面样式开发
0 e, R ]" d/ u( C5 t5-23 集成react-router! D& O" s. {+ M3 B7 G- j
2 Y X$ G) w( F4 r" D+ b% T第6章 美团APP—评价和分类页开发; t @8 K. h5 D* ^
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
/ v$ c ~/ G. V- c4 i, ~6-1 分类页面开发(顶部NavHeader模块开发). ^/ L; p7 ~$ c" ^8 G
6-2 分类页面开发(顶部Header tab 模块UI开发); L8 o7 o u0 c9 t; ]4 L
6-3 分类页面开发(顶部Header模块样式和逻辑开发)- A; | t" t2 u+ P# q, K+ H$ C
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发): O2 r, {9 c' q! w% a9 V. ]( W
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
/ y$ T4 A& v7 l4 h" _% g6-6 分类页面开发(Filter面板模块样式开发)
% Q1 g( j& _2 E X$ i$ [3 y& {6-7 分类页面开发(Filter面板模块item逻辑实现)
% t$ Z4 {" C( Q6-8 分类页面开发(列表List模块开发); m( S3 m( A! ?# Z- K
6-9 评价页面开发(UI开发) A" g8 ^/ W; w z
6-10 评价页面开发(样式开发)
; a9 h$ [, g# s' B4 A6 Z5 o6-11 评价页面开发(交互逻辑开发)
: i/ O) h0 c; a, p* d7 Y$ F2 g
, G, {3 `8 P- }$ E8 W第7章 美团APP—详情页开发
; t) p, e7 W4 B% k开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。$ E% c6 S/ u f) h
7-1 详情页顶部tab开发(UI开发)
6 [! d1 {5 u5 V$ L i7-2 详情页顶部tab开发(样式交互逻辑开发)- R% j! ]/ _0 N `2 x+ f2 v) k1 P
7-3 详情页点菜页面开发(LeftBarUI开发)$ q$ Z" V+ e, r( {2 d
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)# a' k7 Y, Y1 m
7-5 详情页点菜页面开发(RightContent UI和样式开发)
& H- r5 [0 W, i* o5 V7-6 详情页点菜页面开发(RightContent逻辑开发)
# [. K# A: r5 M/ ~8 B7-7 详情页点菜页面开发(ShopBar UI和样式开发)0 l, } i' \ t
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
: T( U+ k1 ?' I: ^7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
7 M# y5 D5 A6 E& i9 }, V" s; z! F7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）3 h$ h" N4 p5 c7 K
7-11 详情页评论页面开发(顶部Header开发); _, W4 n9 M/ |2 m/ `$ v
7-12 详情页评论页面开发(列表List 数据绑定)' A! U4 w9 v% a
7-13 详情页评论页面开发(列表List UI开发)
8 p2 |. p7 b) S7-14 详情页评论页面开发(列表List样式逻辑开发)
+ o2 V% G( ] l( C& T7-15 详情页商家页面开发(UI开发)
, D" S6 U6 O2 R( z, Y1 G% ~7-16 详情页商家页面开发(样式开发)5 J/ V. ~1 _2 G: p* [' e
P; G' d$ ~& J* \3 m: V8 i5 V第8章 美团APP—回顾与性能优化
5 b e1 T% D4 ]/ b9 F通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
7 A9 R. K3 v% }0 e3 q7 ?8-1 懒加载性能优化
' K0 [! H! Y8 n+ V% r8-2 JS和CSS公共文件抽离优化( k2 n$ l4 {8 f! V8 t
8-3 编写后台server读取真实数据& J7 {- p) {# {
8-4 多Tab 页切换与滚动数据加载优化1 u/ H" i3 G9 m, f4 _4 F$ Z
8-5 项目打包; |0 e) P; s& K9 p2 o
8-6 项目发布* U& ~/ s1 J; p! x5 h
5 m6 _3 R! }) ^2 Y& g
第9章 美团APP与hybrid深度结合# X+ I/ r5 _- ?4 O% [3 S" A8 ?+ ]
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。8 }+ U8 t/ l' `, o8 S7 X/ D
9-1 JS bridge 原理 试看7 a& Z9 n, D/ ^! L0 i' p: T9 ~$ ]
9-2 iOS webview + JS API接口+iOS APP集成8 o+ K g6 _, n4 t4 Z( }6 M$ s
' v( V3 ^% N* D8 A6 p第10章 课程总结
, ~4 r" s( F* T- \8 K* f回顾和总结课程讲解内容，能更好的回归和归纳。5 G6 o& }; Q! l9 G
10-1 课程总结
. D; _( O; _% `1 x4 l8 Z8 l F3 j6 H6 p+ C/ z6 t5 W) L2 h! j& R6 D
【下载地址】5 }! E. b& i4 @% x% N4 m
6 ~/ K& n" O' m/ z- ~+ t/ x) U5 f3 v" B) m
|
[复制链接]
