1 x) ^$ z7 d" ?3 B A
8 W1 T* G5 C6 n( n( ^6 |. D
【课程简介】, G$ n5 m! F; {3 k
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
; n2 p% w j5 N1 \% ?: h, N4 j5 R: C% L) k0 p# @+ P
【课程目录】
; Z8 R' P9 O/ I1 N/ |6 e第1章 课程介绍2 V/ p; e7 f& `7 A2 l1 f
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。# u/ O- q1 [# Q: @( M
1-1 课程导学 试看+ c- Y- |, f3 h: w: |; ]; k: S( \
, w! C. \* }6 i7 @; u
第2章 移动web硬知识点/ H/ I$ {" r1 P& x% ^& j' n
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
" E& {1 o0 ~3 d# R) s! ]2-1 移动web开发概述
5 d7 e4 v' b; O) j0 A# p! l3 Y$ G+ |5 C2-2 移动web开发调试
! V; p$ T$ e0 y2-3 移动web适配概述
7 ?' T9 w+ g+ X& h% ~2 a) A2-4 viewport视窗概念3 Y3 T& Q# S2 `% t$ ] ~; G
2-5 css3之flex布局
$ X- f3 x* E9 b0 w2-6 响应式布局和MediaQuery
/ t( c6 u3 G3 x A6 `2-7 rem,vw布局与适配
* p6 D% n& u2 c7 u7 h5 C% H2-8 移动端touch事件详解
k7 k4 Y- F- }9 h
8 b9 Q+ U% a$ U- p" y+ k第3章 移动web软技能 h- `% e7 o- I3 Y, s
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
5 L# @; U& a) ]+ m- ~3-1 代码管理工具&项目构建工具简介/ y6 ~$ M: a) R6 Q0 l. }
3-2 webpack工具使用介绍
9 m( K- X/ c& b7 A& ?5 B2 y3-3 Sass预处理工具使用介绍, R* u, l, E, w4 \
3-4 React组件化思想 试看
4 z: B1 f3 G( e. L B5 G& N" S- R2 Y0 B t
第4章 项目开发构建环境搭建
3 o; u2 C& z3 ? w# [+ m4 V本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
( G5 t; w' c" |3 l# b# Q6 F4-1 项目和技术栈介绍
4 W* y. C7 Z. N! T4 l- _; g5 s4-2 项目演示
6 B- o: W' x8 q: X% m5 k0 Z- i4-3 构建环境搭建（1）
% l' v0 w. C% o% F" e# n& u/ B4-4 构建环境搭建（2）
3 G2 w! T0 a+ D- d- Z/ W4-5 构建环境搭建（3）
% e# U" `" f1 u+ X4 p! |4-6 构建环境搭建（4）- t+ B+ t5 R4 u. X6 H3 ]) S
4-7 redux-react使用介绍（1）; T* P+ m) e5 }& D" M( D
4-8 redux-react使用介绍（2）7 b, Z* m' e4 C1 c* B$ f
1 L8 {$ }3 O) K [第5章 美团APP—首页开发
7 P$ O8 z; F6 m$ T5 K开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
+ c/ u4 t9 b8 @" k# g5-1 底部tab按钮开发(webpack-dev-server配置)
. F, i+ H/ _4 J! K& _2 F5-2 底部tab按钮开发-UI逻辑编写（1）
7 ~" p0 `2 q" A5 h! C" w, _1 C5-3 底部tab按钮开发-UI逻辑编写（2）& c' ^% g8 K. H0 P8 C m
5-4 底部tab按钮开发(rem配置)
! l7 e; B! B+ E- i& ~5-5 底部tab按钮开发(集成ESlint)% e I. y9 @8 h: \8 g
5-6 底部tab按钮开发(集成HMR)
, {+ K* B' J# R+ \5-7 首页页面开发Header模块开发
1 z- k" o% P# b% k& h5-8 首页页面开发SearchBar模块开发+ I' M# t, z* L7 v0 O
5-9 首页页面开发-Category模块开发（1）
* d- \4 E1 q7 }0 p8 G/ h/ ~# m% _5-10 首页页面开发-Category模块开发（2）
6 @7 h5 n- |/ ?3 H V' {3 b" ~2 x" |5-11 首页页面开发(ContentList模块开发)' M9 e1 @# t' z
5-12 首页页面开发-ListItem模块UI开发
4 h1 D8 _0 G- z5-13 首页页面开发-ListItem模块样式开发
8 \7 a/ w$ h9 U/ z2 }5-14 首页页面开发-ListItem模块数据渲染开发（1）$ b& R) g& m% L" c
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
( p& r g+ A' |& B! A; Y5-16 首页页面开发(滚动加载逻辑实现)
4 O( c' _- Q! U* @ u2 V4 Y5 B# ?5-17 订单页面开发(List模块开发)
4 _- m: Z' |0 Q! C# b; A5-18 订单页面开发(OrderItem模块开发)（1）& R" z* q6 n! B" N- n) p
5-19 订单页面开发(OrderItem模块开发)（2）
2 T3 H1 g1 u1 V9 U/ V: g5-20 订单页面开发(公共ScrollView模块开发)
- v9 C- m$ t# V: D5-21 我的页面UI开发4 w9 G- Z* h( o: v. o
5-22 我的页面样式开发7 d. Z3 P5 Q5 n2 i0 ~2 R+ c
5-23 集成react-router/ L, K2 N3 Z+ ?! O
6 s$ J1 E8 h3 {+ y; f: a* E
第6章 美团APP—评价和分类页开发3 k0 J! G2 M7 A! u' W
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
1 G& q8 b6 Q% w6-1 分类页面开发(顶部NavHeader模块开发)
+ j, ]. @) ^9 E5 P7 d; M' f% a* p: w6-2 分类页面开发(顶部Header tab 模块UI开发)
|. S( b/ o6 |$ {( j" d6-3 分类页面开发(顶部Header模块样式和逻辑开发)
% ^5 B& C G' \: R6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)7 n1 C% @! v! a
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现" k3 m3 l3 x( e$ m+ H# _9 Q
6-6 分类页面开发(Filter面板模块样式开发)
. x4 @9 C: ]/ i. v6-7 分类页面开发(Filter面板模块item逻辑实现)+ N' D" H: L9 j2 K- e) a8 K
6-8 分类页面开发(列表List模块开发)
" h7 j- }# B4 t( \8 R, M0 j* `2 o6-9 评价页面开发(UI开发)7 q& l) Y. ~1 V$ A" J- r
6-10 评价页面开发(样式开发)4 a, d5 n3 _$ T6 y
6-11 评价页面开发(交互逻辑开发)
& R8 U0 K4 k3 _7 ?4 _ N; ]% G0 [
& ]' I, X" _. m/ J+ v- V6 S第7章 美团APP—详情页开发
* ~/ x E8 D3 g/ m$ j开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。& I2 p Y; e* U5 F! i1 t1 D
7-1 详情页顶部tab开发(UI开发)
. H% N# U. N6 S7-2 详情页顶部tab开发(样式交互逻辑开发)3 `; t& n, O; Q" b0 b% y3 X- N
7-3 详情页点菜页面开发(LeftBarUI开发): X5 d# T( x% F/ Z6 x; ?
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)* \( M1 q8 G2 h- n+ X
7-5 详情页点菜页面开发(RightContent UI和样式开发)$ E3 \1 `8 B% y3 `
7-6 详情页点菜页面开发(RightContent逻辑开发); B1 o: N5 W Z g v
7-7 详情页点菜页面开发(ShopBar UI和样式开发)
2 @" v9 K+ K' u# F8 n1 @2 \7-8 详情页点菜页面开发(ShopBar 逻辑开发)
+ Y5 P; L) j1 x, }* W- L7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）# j, m0 j- j$ K% w, {
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
. |, _) k. q; v7-11 详情页评论页面开发(顶部Header开发)
( L4 V+ K; S+ h$ C- R7-12 详情页评论页面开发(列表List 数据绑定)& ~2 O6 d7 ~3 Y/ l0 n
7-13 详情页评论页面开发(列表List UI开发)
/ }: v8 f7 a: `/ s7 D3 i8 A7-14 详情页评论页面开发(列表List样式逻辑开发)- X3 q$ ~! V1 d5 K
7-15 详情页商家页面开发(UI开发), r( x: t0 {0 U' x
7-16 详情页商家页面开发(样式开发)5 ?: r. u7 _/ P3 w
- o6 t7 ~4 K! s2 w$ T* f2 A- V
第8章 美团APP—回顾与性能优化
6 a8 I0 |( Z$ f& ~6 b- W2 m通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...# ~" g! g! c3 `# J# f0 w% A1 M
8-1 懒加载性能优化
( b. G1 f7 m) e8 L$ ?, i! G8-2 JS和CSS公共文件抽离优化% Z" v% v! F* X e- M
8-3 编写后台server读取真实数据# N2 p1 v0 b) K& C, F1 }
8-4 多Tab 页切换与滚动数据加载优化
+ [- C! r# R" i0 W9 c8-5 项目打包
9 P! z) U- @; u8-6 项目发布
( l' y) d! w) {! ]% H- u; [' v& K5 T( C7 d& o3 q1 r
第9章 美团APP与hybrid深度结合
! `/ G! y7 |3 g; a本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。: C' }/ H+ R+ b9 |
9-1 JS bridge 原理 试看
% D& ^" b% q4 K" T" F. l9-2 iOS webview + JS API接口+iOS APP集成+ E1 {8 p8 d0 J
9 [/ }4 r" E7 ~第10章 课程总结" D" }: S, d% N! a. P6 Q# x
回顾和总结课程讲解内容，能更好的回归和归纳。0 r" Z8 @1 F* i0 U1 i
10-1 课程总结
& ^/ S' C5 h' P. k/ ^, M$ [6 s4 G4 b1 Y( @3 Y. G* l
【下载地址】
! F' T% u2 @$ x8 r u# W6 J5 o+ u' o/ S1 `
- m+ K, z4 s. v. @3 j |
[复制链接]
