% I5 j6 V1 @2 J' Q0 z ?. E
3 C( j7 B( v1 y+ z【课程简介】
9 [% g, H) ?# O' g2 c0 W& |本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。* w. Z6 E$ G) [6 W
5 }" w& i& c& d$ I5 h- O【课程目录】# r, T i! F: y. ?* z7 B
第1章 课程介绍1 x' s0 f$ [- T, O
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。+ m( Z# ?: u' B' b. R! K( u
1-1 课程导学 试看, J4 u, I- x9 \+ t( i, G, c: X1 y
+ r. B+ d' u( f: M! C第2章 移动web硬知识点' o8 ~5 m, V$ n3 U7 D7 k! L
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。% O& U# \# f! o# y
2-1 移动web开发概述$ [% P6 K5 j: P4 |0 v/ P; c1 Z; l
2-2 移动web开发调试6 G* G$ d1 W0 Z; {+ ~ R6 p
2-3 移动web适配概述
/ A a# ^5 v. T2-4 viewport视窗概念
" S" R/ K K# T d2-5 css3之flex布局
: y% @6 s/ o: G* }2-6 响应式布局和MediaQuery
, E7 y) r9 h! E( R4 N5 k y \$ l2-7 rem,vw布局与适配
: n ]+ m+ c5 x& m4 h; Y. S9 S* o# @2-8 移动端touch事件详解) B3 p5 n( m: K$ i# Q
# _: I5 A" l5 I# @7 P第3章 移动web软技能* O$ j( l0 w% G- j* K% i0 `
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
: v# L' Y2 P; }2 H3-1 代码管理工具&项目构建工具简介
: B( F" P( `! t3 ]9 B( |/ N& L' E3-2 webpack工具使用介绍" l( C4 T/ r5 Y* f* K) a& e
3-3 Sass预处理工具使用介绍
& ~( W+ J2 m% ~3-4 React组件化思想 试看
5 E) @. N+ P0 Y2 L( `; R) w4 B% D# m" @6 c, M7 v; f' W3 R
第4章 项目开发构建环境搭建& D3 T4 b. J, W$ X2 @1 v7 ?
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。4 F2 u" b9 p& ^
4-1 项目和技术栈介绍
& S0 g* U& r2 K/ [' P4-2 项目演示
! Q; I7 K5 R: W$ W2 T9 N4-3 构建环境搭建（1）4 b4 c7 Z' k, B) ?' c; k; k) X
4-4 构建环境搭建（2）! Z# P4 d7 Q- m: y; }& I2 H/ X/ e' n
4-5 构建环境搭建（3）- W5 m$ D ?- `, o. P$ D* R) x1 d( @
4-6 构建环境搭建（4）
0 g& X6 w% y4 Z4-7 redux-react使用介绍（1）
' }1 g& z4 r3 v& k/ {( O, O6 o4-8 redux-react使用介绍（2）
7 P; x/ P) Q* P! V, a2 n& e- H
' ^% m: |3 B N第5章 美团APP—首页开发1 o. A& K$ G7 a
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。7 _; }9 E3 M9 k3 @8 K" w
5-1 底部tab按钮开发(webpack-dev-server配置)
* A$ h. x# \; }* M) f/ J4 z5-2 底部tab按钮开发-UI逻辑编写（1）
w$ Y8 ~- p! `" L5-3 底部tab按钮开发-UI逻辑编写（2）3 V+ H1 J+ }) Y! Y" v8 V9 _
5-4 底部tab按钮开发(rem配置)
6 A" B) m$ f1 w- e5-5 底部tab按钮开发(集成ESlint)8 F$ B. m7 U; N$ D! z0 G
5-6 底部tab按钮开发(集成HMR) U }# M; h% Z# h8 G
5-7 首页页面开发Header模块开发1 ~0 Y9 C' Z) N) f; ~8 B$ u# ?4 Z! @
5-8 首页页面开发SearchBar模块开发
6 Y& |& U6 Q" \/ A& d5-9 首页页面开发-Category模块开发（1）
9 a) L; c8 }4 P" a0 [5-10 首页页面开发-Category模块开发（2）
/ O8 v: f9 _. z8 v- U* q3 {5-11 首页页面开发(ContentList模块开发)7 f9 r2 b; E8 ?! M) t
5-12 首页页面开发-ListItem模块UI开发3 \5 X" E V& d, N$ f
5-13 首页页面开发-ListItem模块样式开发
% Z- k2 h! V( A* H5-14 首页页面开发-ListItem模块数据渲染开发（1）
' g8 ]' P. V' ~/ o" e8 m( X5-15 首页页面开发-ListItem模块数据渲染开发( 2 )! ~ r& U# B( A/ j. p
5-16 首页页面开发(滚动加载逻辑实现)
4 M8 s' z% N/ |5-17 订单页面开发(List模块开发)# A$ w. {" H: O
5-18 订单页面开发(OrderItem模块开发)（1）
7 g8 t* |4 T" r; }5-19 订单页面开发(OrderItem模块开发)（2）# \5 z1 }* T7 e! V
5-20 订单页面开发(公共ScrollView模块开发)* T$ N: R9 `7 o/ d
5-21 我的页面UI开发
9 R' y, b0 O1 \" ?5-22 我的页面样式开发
0 T6 I8 \4 ^) n- Q( A# @0 R5-23 集成react-router9 d: I2 k, |8 ?' q6 X# {1 L$ v
3 z5 T$ g3 n9 e( T第6章 美团APP—评价和分类页开发0 r3 n; ^# q: ~3 o+ r6 y7 I7 m: O
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
. e8 l p; h5 c8 H- v6-1 分类页面开发(顶部NavHeader模块开发)
" _: n, F! a2 c. ~6-2 分类页面开发(顶部Header tab 模块UI开发)
) g# m% c5 X4 E/ ^; s8 t8 ?6-3 分类页面开发(顶部Header模块样式和逻辑开发)
4 l& ]4 g' o6 z! w' r2 t- G/ \2 G* e6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
" D8 o& H$ Y6 n9 w- P6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
( {$ `3 E: ]3 |6-6 分类页面开发(Filter面板模块样式开发)
6 b, E; P" @/ D3 \0 B/ {$ h" G6-7 分类页面开发(Filter面板模块item逻辑实现)2 D' d' s3 d* G% ^6 B' O4 T
6-8 分类页面开发(列表List模块开发)7 a2 M( i* i, R! a3 O
6-9 评价页面开发(UI开发)
5 _: V/ V4 E/ Q2 I7 p) [0 w! E3 u7 l6-10 评价页面开发(样式开发)7 x2 j& b" C- j3 ]3 @8 D3 c& F
6-11 评价页面开发(交互逻辑开发)1 n7 Z( o0 g1 m8 H/ {, R R
: T7 h2 \/ I" \第7章 美团APP—详情页开发
) d( N& Y$ D6 S开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
W+ y' v8 y5 y/ ^5 k6 l7-1 详情页顶部tab开发(UI开发)
# ~4 U0 w! M9 L4 J% ~. G7-2 详情页顶部tab开发(样式交互逻辑开发), \- Y3 n! N! o
7-3 详情页点菜页面开发(LeftBarUI开发)
+ Y+ q5 |1 b# f" |( L7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
8 H& t+ C; |( J2 P; X7-5 详情页点菜页面开发(RightContent UI和样式开发)0 y9 r5 t2 c: G; z4 h9 |9 j
7-6 详情页点菜页面开发(RightContent逻辑开发)* D/ O* d3 \8 E
7-7 详情页点菜页面开发(ShopBar UI和样式开发)1 U- _& B+ A; r( |7 }; [, Z/ x* g
7-8 详情页点菜页面开发(ShopBar 逻辑开发)$ w0 {0 ] ~7 p% f
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
% C# Z |+ I3 u5 v* p4 Y7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
) o! }! x. `, _) }7-11 详情页评论页面开发(顶部Header开发)
( U/ \8 x p0 K: l; [7-12 详情页评论页面开发(列表List 数据绑定)6 w0 F, h" F* B8 N
7-13 详情页评论页面开发(列表List UI开发)
/ S9 o& z* M: c: r7-14 详情页评论页面开发(列表List样式逻辑开发)* Z2 V. E; F' d2 [2 b
7-15 详情页商家页面开发(UI开发)1 M5 c2 ~. n' ~8 M: U
7-16 详情页商家页面开发(样式开发)* e& w- s' m) b$ K, R
2 u- T; ?, b. m第8章 美团APP—回顾与性能优化" F {. E2 p9 n7 |+ j2 V
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
8 n1 h J1 ?' W# W+ m6 @6 O( y- f8-1 懒加载性能优化. _& i Y K4 Z7 Q' Y
8-2 JS和CSS公共文件抽离优化2 U/ u7 d' P1 @7 x! }
8-3 编写后台server读取真实数据
) P$ h# R5 a! \9 z0 o$ J8-4 多Tab 页切换与滚动数据加载优化
6 x6 I' h- i! z( ?, y: c8-5 项目打包
1 C( l5 v+ A0 x* v: z) f8-6 项目发布
" c" N" E R; s
: T! y! C1 z2 m第9章 美团APP与hybrid深度结合. J' t! b; s8 E& x; e5 v) \7 E) m9 o3 J3 P
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
8 d: H: v: F/ t- E; n: w" o9-1 JS bridge 原理 试看
, y3 @) R6 l% w$ V- {4 w1 s' b$ d9-2 iOS webview + JS API接口+iOS APP集成
& w* ~& @ X! {6 e, i* Z
2 d" u, Y3 O" k' N, i: F" E第10章 课程总结
; f- j4 i3 e+ a( t+ j; T$ V回顾和总结课程讲解内容，能更好的回归和归纳。
4 u q# H! ^$ y3 M& D4 T10-1 课程总结
! s: X& m& f$ j* y; k9 {' P7 a6 I: h* K6 O
【下载地址】
5 T* |$ T* k9 K8 t9 X8 w. H
3 ?6 \, r& {8 O, X) Y% ?/ e% z: c2 T; ^0 g5 x5 f
|
[复制链接]
