, W+ T8 V9 s; M9 y2 J
& @- a# @% m. ^8 l【课程简介】9 Y: P0 I6 r* `# X1 }' O
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。$ j) v! O2 ~+ y" A( _! j
6 R9 U w% c; {2 h- [+ |4 _【课程目录】7 @9 ]2 M( _; |; \* z4 X
第1章 课程介绍
* K$ P" [2 h. {; P( `4 z8 f通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
! q" {' H, j+ T4 ^, b1-1 课程导学 试看
. X' F+ o4 x) x }$ n$ t7 {
5 g, H& A6 P5 x第2章 移动web硬知识点
$ E/ C+ Q& t9 u1 Y, n0 B* \本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
# W: w' L5 k0 F3 \4 j' f2-1 移动web开发概述
2 x. ?% I, f+ f, h2-2 移动web开发调试
1 }" m9 d. \: Z& I2-3 移动web适配概述
" y. G; \9 U/ N3 v* U0 B4 B" x2-4 viewport视窗概念
- W( N* t: H: N& t/ s2-5 css3之flex布局& L+ W7 I& d" m4 V5 ^
2-6 响应式布局和MediaQuery
5 d* z* G6 \7 k& L2-7 rem,vw布局与适配: U* _. l3 u4 t6 y7 H* h( F
2-8 移动端touch事件详解
5 ]+ @7 z) @; b! G @) s
" Z! U/ |9 Y% b" f# t5 z N/ t第3章 移动web软技能( o5 ~6 h F" I" v5 W; z# Y/ x5 b' g6 X
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
" E1 i0 |& j4 u* o3 E r2 a% E9 U9 S3-1 代码管理工具&项目构建工具简介7 h' K+ X9 ]8 Y3 j& E
3-2 webpack工具使用介绍
$ n: s0 K8 V1 l1 S" Q3-3 Sass预处理工具使用介绍! k/ i+ R5 y n# A
3-4 React组件化思想 试看
3 W& y! \9 F- B7 I! Q6 m( Z3 f A
第4章 项目开发构建环境搭建" P- k |8 ]. [5 }7 M% `
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
, ~) h+ f" v/ R4-1 项目和技术栈介绍
+ g2 E8 f! ^: X4-2 项目演示
. I! I! P2 V6 |1 C3 Q# P& b/ a4-3 构建环境搭建（1）% l* |! h3 [! |) M% S
4-4 构建环境搭建（2）6 U) B8 \" b2 a0 i4 P( r
4-5 构建环境搭建（3）: e5 r+ a u& ^) j5 P
4-6 构建环境搭建（4）
2 p( K0 C/ I1 D: }- k, R4-7 redux-react使用介绍（1）
- Q+ }& L3 \/ q: K P0 N4-8 redux-react使用介绍（2）4 e Q# D! G7 }) S1 R- |
) l+ v) |6 M" ?/ R7 o第5章 美团APP—首页开发1 f- H8 T1 p. j W: J$ s1 c
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。! ^# U5 R3 r7 r6 L& _! j
5-1 底部tab按钮开发(webpack-dev-server配置)
7 h7 r6 n" T% w+ C5 d; T+ i5-2 底部tab按钮开发-UI逻辑编写（1）! m7 O+ w- {( O) N r* ]7 I
5-3 底部tab按钮开发-UI逻辑编写（2）
, O2 _- G+ g9 R0 q( f# _5-4 底部tab按钮开发(rem配置)
/ N( \; a* _6 S5 u, U5-5 底部tab按钮开发(集成ESlint)
+ W$ s' V# G2 I) Z+ A0 I5-6 底部tab按钮开发(集成HMR)8 g8 h' K4 {' Q6 z$ A/ t0 w
5-7 首页页面开发Header模块开发2 c0 M8 ^. ?/ u7 B4 t4 V
5-8 首页页面开发SearchBar模块开发
6 t+ H3 k$ t8 b1 M* _& N7 Z5-9 首页页面开发-Category模块开发（1）
2 v0 j7 K- \; C2 e( ]( r, O5-10 首页页面开发-Category模块开发（2）
5 c3 h) b; }; s$ q! O& b5-11 首页页面开发(ContentList模块开发)
: j/ h$ C. J- \* g+ t# I& J6 e9 g5-12 首页页面开发-ListItem模块UI开发6 x- _1 a7 U0 q0 F$ F% J, B" R7 h
5-13 首页页面开发-ListItem模块样式开发 n | P0 _' u
5-14 首页页面开发-ListItem模块数据渲染开发（1）
4 B8 s+ Y- T& r6 j5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
% ?& k0 _# e8 u& `) _& h2 Y+ A8 h5-16 首页页面开发(滚动加载逻辑实现)
+ f y* H% W% z) }; L% [5 \) B5-17 订单页面开发(List模块开发)2 ]2 h( e: ]$ T8 K
5-18 订单页面开发(OrderItem模块开发)（1）
$ y" F& B. n- ]7 u# `1 H5-19 订单页面开发(OrderItem模块开发)（2）
0 X( W6 V5 Q% |& P- [9 v! d5-20 订单页面开发(公共ScrollView模块开发)
5 a+ ]2 {" \% U. q# d! N/ z! n5-21 我的页面UI开发( `8 `) w4 x, K( U: Z
5-22 我的页面样式开发% Q" U3 p$ o! N+ F1 w
5-23 集成react-router: ^% E/ U) s, G$ N9 w; x% w3 M
* L& b! s, |' b# o/ x第6章 美团APP—评价和分类页开发
$ x' ]' A( @! l2 R& I开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
% w* X% X9 y2 t% |. M' \/ C6-1 分类页面开发(顶部NavHeader模块开发)0 D& b7 i8 f7 Q. E4 V. U# Z& r; z" T
6-2 分类页面开发(顶部Header tab 模块UI开发)
& y' z# @ B( L' n" N! o6-3 分类页面开发(顶部Header模块样式和逻辑开发)
. B7 B) G0 I4 [, p6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)# i2 z- L1 x3 P1 C( D6 M) Q. Y
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现! `. ~6 C4 Y2 d8 B6 \
6-6 分类页面开发(Filter面板模块样式开发)% U Y* V1 J$ Y' }( w
6-7 分类页面开发(Filter面板模块item逻辑实现)
: K; U, C6 R4 X& q4 v6-8 分类页面开发(列表List模块开发)
4 n3 x. Q+ g2 O9 J" }5 j6-9 评价页面开发(UI开发)
% D& V4 o7 Y" S7 U6-10 评价页面开发(样式开发)/ G. o d8 Y _$ z2 O2 ~
6-11 评价页面开发(交互逻辑开发)- T" h% T9 i% U
3 ?7 X2 m% W2 L( \; S第7章 美团APP—详情页开发
* @& O; n. r% }开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
5 B5 F3 s, N$ \. _! O7-1 详情页顶部tab开发(UI开发)
; f- n. l7 G ]/ S0 [! U8 Q2 O7-2 详情页顶部tab开发(样式交互逻辑开发)8 d4 i4 s8 S# d# i2 o; q( |( f
7-3 详情页点菜页面开发(LeftBarUI开发)
1 V b; h1 F* e1 E0 b7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
% N5 r8 L" T! H7-5 详情页点菜页面开发(RightContent UI和样式开发)9 F9 l, U1 [( ]
7-6 详情页点菜页面开发(RightContent逻辑开发)2 |0 \- Z, h4 Z, V% }' b7 v" R j% n' d
7-7 详情页点菜页面开发(ShopBar UI和样式开发)
" W7 Q8 e4 x3 b$ n7-8 详情页点菜页面开发(ShopBar 逻辑开发)
4 O4 u0 j- m) y S0 Z4 p2 P" k( L7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
) E8 P X$ O0 y7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）% }8 E, M) Z1 _$ d
7-11 详情页评论页面开发(顶部Header开发)3 h* q2 Q1 |! ^- p6 g1 n% I8 d
7-12 详情页评论页面开发(列表List 数据绑定)1 F% s, |2 q. b: E
7-13 详情页评论页面开发(列表List UI开发)2 f3 C$ r* e( C+ X7 b( `2 _& v- Q
7-14 详情页评论页面开发(列表List样式逻辑开发)
3 [0 a' W R4 o. Y$ Z7-15 详情页商家页面开发(UI开发)8 |8 U$ [% x9 e' b$ ?, b
7-16 详情页商家页面开发(样式开发); P9 c) X. R3 z6 c, R# Z# r y J
2 ^+ z8 P- u2 @5 k( P& M第8章 美团APP—回顾与性能优化
0 `+ N& P) A- C' J1 B+ ?) l5 n通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...) ~8 ?$ C* ~! R9 Z. S1 K7 m
8-1 懒加载性能优化
4 Z$ p a8 `# E3 a: N; Q8-2 JS和CSS公共文件抽离优化5 s8 z8 C7 ~: z, {. ~ i
8-3 编写后台server读取真实数据2 y( f. b" ?- _' o$ A6 v
8-4 多Tab 页切换与滚动数据加载优化" q/ X/ K0 B/ v7 w
8-5 项目打包4 J \( P; k/ P$ ~- l
8-6 项目发布
; b( H/ O% Z' U6 m. z0 I& ?5 T0 A% V
第9章 美团APP与hybrid深度结合- H6 }' f* Y8 m8 P% r7 Y
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
- ?6 B7 [4 u% _7 C. t8 b9-1 JS bridge 原理 试看7 h1 b4 H% s( w$ J
9-2 iOS webview + JS API接口+iOS APP集成- ?1 n. d- b `. F$ R% j
+ \2 x9 Y( `3 B1 _2 e* @/ k+ j第10章 课程总结
/ k; R3 t: m/ s0 Q# \* R) Q- w9 G回顾和总结课程讲解内容，能更好的回归和归纳。: H& o6 M+ o6 t4 x8 |3 p2 i% a
10-1 课程总结6 m' n% x/ j' z7 @& ^
! W" Y6 p f- T: |+ I
【下载地址】
( D9 _5 ] L$ t" L6 Y2 g) L5 z/ H- v9 [. f% j4 T2 o
. ~" f2 D1 b2 I; |' I$ G7 J
|
[复制链接]
