" v/ z7 |, Z/ }
3 W n1 R4 H6 `' W6 f! ?! W【课程简介】
* E+ Q# a) t0 J2 g( m, a$ K本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
$ f6 j! Z( _/ o# V7 b% \/ X$ u+ _2 ?7 _* p' A: C7 s. }2 i2 B
【课程目录】% h1 B8 c2 Q2 F: j; G" S
第1章 课程介绍/ v# Z8 ?9 ^: C x. n' [$ m. B4 \
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
( J. N, e t, k7 V1-1 课程导学 试看/ y Q8 |' c& _0 m! f: L* C% x
' o# P4 G( ?' T! [* @5 }8 D8 X
第2章 移动web硬知识点6 O. G$ A+ z# `+ v& e
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
+ {! j( D, @" N6 H2-1 移动web开发概述
$ g7 b: q% E. ~. L9 D2-2 移动web开发调试$ Z1 t% C0 V' u2 ?) q4 K
2-3 移动web适配概述$ s' e: S- W# A7 p, ]9 y
2-4 viewport视窗概念
. p" K {: K, h! f& ]1 R2-5 css3之flex布局
9 F5 L# N1 i) L# W, j8 w2-6 响应式布局和MediaQuery
8 U& G8 J, A: H) v& M- R2-7 rem,vw布局与适配
0 ?! ?6 ]1 A- z: l2-8 移动端touch事件详解" A0 A! J0 |) k9 O/ V: T4 \
4 L j! Z* c' a6 ?8 l" D2 N
第3章 移动web软技能( Z4 w, D9 {. _6 [4 b+ u: l
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
) t$ p3 |/ a: K9 x. x- V2 L3-1 代码管理工具&项目构建工具简介" U m8 _" V- I
3-2 webpack工具使用介绍
/ o% A1 A7 D6 d2 V9 F1 j! w3-3 Sass预处理工具使用介绍! {* s2 \8 I% H
3-4 React组件化思想 试看' O8 P# P7 i' S }: `
' D4 g# Q( Q3 i% T3 q2 u0 s
第4章 项目开发构建环境搭建
6 G; {: J' T$ g7 @本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
( N8 s0 A% T( f+ P; |4-1 项目和技术栈介绍
3 F) A* g" w& F( |; D" ?% C, [4-2 项目演示
* a9 M0 } J; B4 L$ b6 d8 n4-3 构建环境搭建（1）
6 O8 O: { Z- h& F8 C0 \; l- O4-4 构建环境搭建（2）- `& v2 i) a. B; t( q
4-5 构建环境搭建（3）( c1 O. R' Q0 S
4-6 构建环境搭建（4）6 d$ n2 s" e: N
4-7 redux-react使用介绍（1）
6 h: M/ H( P& P+ _% A8 i4-8 redux-react使用介绍（2）
6 S# T8 F! P* y/ T6 k: j
" G! i, e( I; Y第5章 美团APP—首页开发( ~5 s5 {% E1 V' S' H. Y: [$ U
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。& I" C0 u# H9 x% {+ v: O
5-1 底部tab按钮开发(webpack-dev-server配置)4 l" U9 ]/ M: N; E
5-2 底部tab按钮开发-UI逻辑编写（1）
( [. y' F5 V6 e+ E" W5 k h8 C5-3 底部tab按钮开发-UI逻辑编写（2）
, d1 X8 l" t( l5-4 底部tab按钮开发(rem配置)
# f- U& ^. v7 Z+ X4 ] Y5-5 底部tab按钮开发(集成ESlint)
* v: N- g1 |! b/ y0 u' C5-6 底部tab按钮开发(集成HMR)
7 e1 S& S6 v, r$ N \2 ]5-7 首页页面开发Header模块开发
2 }2 s, M# T6 j s' h& {. Z! F9 J$ x5-8 首页页面开发SearchBar模块开发 |" y4 P: J. U: h4 O2 b
5-9 首页页面开发-Category模块开发（1）1 i& G! H/ ?* T2 D
5-10 首页页面开发-Category模块开发（2）( V) {' }% v0 O9 Z
5-11 首页页面开发(ContentList模块开发)$ F) N" ]5 C4 h3 s( p
5-12 首页页面开发-ListItem模块UI开发
' Q2 K, h* k4 o7 `/ q' O0 B5-13 首页页面开发-ListItem模块样式开发4 U" a, \6 p- D4 V7 Q9 ]+ z
5-14 首页页面开发-ListItem模块数据渲染开发（1）$ P( y! s) U0 y; B1 F: y' ]
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )/ y$ z Q% S+ V1 C
5-16 首页页面开发(滚动加载逻辑实现) U9 P4 L6 U7 I% y
5-17 订单页面开发(List模块开发)
# I/ q3 O( @+ `. D- b7 x! q- t5-18 订单页面开发(OrderItem模块开发)（1）
( b+ r$ ?/ O# ?; o% T( j4 T! \: g5-19 订单页面开发(OrderItem模块开发)（2）
3 D% V$ k. T* o: r5-20 订单页面开发(公共ScrollView模块开发)* e5 u% Y; e# i7 e
5-21 我的页面UI开发
$ W( M( _1 R/ s; w5-22 我的页面样式开发6 H |- \( s! Z" V) l
5-23 集成react-router
7 @3 v# e3 c! O2 P- ^/ S
6 F- P# j7 U5 P: T; {第6章 美团APP—评价和分类页开发& G" ]: g/ @8 _
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。7 D) n7 A. k1 b2 A7 ^; Q
6-1 分类页面开发(顶部NavHeader模块开发)
0 X( }$ ~' [& N# J5 V/ H6-2 分类页面开发(顶部Header tab 模块UI开发), |1 C7 A" j1 n" d4 X# V
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
5 A5 E1 _" P% ~& i6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
! F. d0 N8 |9 {9 \9 ^% x6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
0 P' K4 O7 G }6-6 分类页面开发(Filter面板模块样式开发)
0 t" a7 m7 m% v. L2 _3 E6-7 分类页面开发(Filter面板模块item逻辑实现) S* w$ m' [6 D' H# E% \: m5 S
6-8 分类页面开发(列表List模块开发)0 | H+ W: M ]$ t" n% ^( Q
6-9 评价页面开发(UI开发)0 U' s: H- l$ ]! J( s
6-10 评价页面开发(样式开发)
: E8 g) k9 e x' s' |6-11 评价页面开发(交互逻辑开发). S+ e2 G; L3 c2 I# d6 @% i3 n; v
, \6 n R8 u( q
第7章 美团APP—详情页开发
6 f- i$ L& J) J- p6 T开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。: m8 Z( l; F" U4 o5 _' k
7-1 详情页顶部tab开发(UI开发)
* O7 @! l/ U) a! M+ Z8 s7-2 详情页顶部tab开发(样式交互逻辑开发): ]& N9 K; l2 V( T" v
7-3 详情页点菜页面开发(LeftBarUI开发)+ K7 U2 R/ v4 s
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
# K3 m' w+ m* a2 t7 a) k7-5 详情页点菜页面开发(RightContent UI和样式开发)
% X/ J( i. l8 ~3 z3 C7-6 详情页点菜页面开发(RightContent逻辑开发)
, g$ r7 _0 S0 O7 ]/ _9 b& f. g3 @0 G7-7 详情页点菜页面开发(ShopBar UI和样式开发)
" ~+ ^; i# J/ X5 V7 v7-8 详情页点菜页面开发(ShopBar 逻辑开发)3 X* |2 }7 q" t' U% ~+ Q
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）- x* I& M% ^% z' E7 O
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
! m, Y$ Q% \4 ?% x \' W* s' q7-11 详情页评论页面开发(顶部Header开发). |5 f9 I0 i' _' V7 H- u8 P5 t1 x& d
7-12 详情页评论页面开发(列表List 数据绑定)* l, ?2 H' u5 W/ o: M2 z
7-13 详情页评论页面开发(列表List UI开发)
5 e. _) E7 g& V& T) n6 w; k7-14 详情页评论页面开发(列表List样式逻辑开发)
+ }/ @5 [4 z( M7 P' j& Z$ o7-15 详情页商家页面开发(UI开发)
: o( Y) \& \. H! S; S$ n! V3 m7-16 详情页商家页面开发(样式开发)
5 j6 a x# K& s$ \4 O6 P; q7 f* {5 ?, r6 X4 U( p h
第8章 美团APP—回顾与性能优化# ? [7 _5 Q8 Z8 `: I& O1 _( B+ d
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
; ^, J# r0 F0 n/ j) _* H. F8-1 懒加载性能优化% o$ R" f7 v. U; ?
8-2 JS和CSS公共文件抽离优化
4 X$ u8 n7 y% K) \! Y3 i% [ g8-3 编写后台server读取真实数据
! K2 p' H! D3 F* h* y! M$ X Z* [8-4 多Tab 页切换与滚动数据加载优化/ M2 g2 p0 q6 K' V. Y; x
8-5 项目打包! q* ]6 P; v* F+ T
8-6 项目发布
% K3 `0 c$ Y9 j% t1 u, y$ t! v' {( Z3 Z7 a6 F Q) L3 ^
第9章 美团APP与hybrid深度结合& \8 M; [4 e- B+ O/ Z
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。; p9 l: U; x& N
9-1 JS bridge 原理 试看
/ j5 ^1 A4 I3 z$ K' p. O9-2 iOS webview + JS API接口+iOS APP集成# w i8 z5 i' e' o
2 z+ I9 a6 k; j5 [6 ^6 v
第10章 课程总结
9 q$ t# x6 B! U5 G; U! p回顾和总结课程讲解内容，能更好的回归和归纳。
3 |$ R& X0 v- Y8 n" Z* R10-1 课程总结
- ~1 X& T: y+ ?! }6 U/ m6 T
6 D9 m2 B1 W( h: r3 T: {【下载地址】# T) ~; z' \: U+ u" P
( K% v- D$ [7 o: q4 J% u, ^- `# s( F1 n; l1 n
|
[复制链接]
