$ w& @, d1 Z. l; v; Z4 n# y
- y- s: [! [3 u, \ k8 q& K【课程简介】# Z$ ]& L5 Q% A( r) C* O2 P$ H
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。3 n6 H0 r/ c$ d) p4 G0 K# E& I" _. j
9 |) V) J- q' O1 z
【课程目录】8 a! t: v2 A7 a# D* S
第1章 课程介绍
' e. ^# P6 `5 b: [+ h) Y9 {9 P通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。% C& a$ f! c: O6 t' p9 X
1-1 课程导学 试看
0 }' B& k' Z( p( v/ E1 Q& T% P8 ^+ {2 K
第2章 移动web硬知识点. Z5 j7 f0 H- x H6 O' q- f" {
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。/ t/ v( H* J5 w
2-1 移动web开发概述
7 i1 ^% x9 a* ?; D* i2-2 移动web开发调试 |. E5 C( G! D: l$ }. h+ E
2-3 移动web适配概述
+ w" _7 L# s5 R$ p2-4 viewport视窗概念' M+ }( C4 g$ x( ? x- q4 k% f! I
2-5 css3之flex布局$ `* G- @7 x6 O
2-6 响应式布局和MediaQuery
# T2 Z/ q, {0 P2-7 rem,vw布局与适配! {4 ~% n- ~$ ^( t! {$ l
2-8 移动端touch事件详解
* _) m& T0 D/ E( ^( L& q& b! n8 e
* u8 g; k9 C! {, ?第3章 移动web软技能' h' |' `+ f2 i$ q9 G% \6 Z3 g ]) e1 t
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
7 R# v% N2 K/ R! r1 R3-1 代码管理工具&项目构建工具简介
+ k9 [8 e/ E, M3-2 webpack工具使用介绍/ U* ^3 E) V F \7 ~! j0 ?4 Q
3-3 Sass预处理工具使用介绍
3 _& [9 |: M1 u3 b) Q) i3-4 React组件化思想 试看8 M2 p5 y J V% q" S+ B9 c
/ d x" a, m+ H/ v
第4章 项目开发构建环境搭建
3 T' ~* s/ C% M/ U! S1 Y本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。' e# V. `# t- n( [0 @2 N
4-1 项目和技术栈介绍
" G3 D- |: ?% O$ O% A: b. {4-2 项目演示0 A {' Q" r' X
4-3 构建环境搭建（1）' H7 P4 Z; @" J8 U Q
4-4 构建环境搭建（2）2 v* N/ a5 ]4 Z) m
4-5 构建环境搭建（3）9 I. _ u2 Z, @* G
4-6 构建环境搭建（4）. L% Q) v/ k+ d
4-7 redux-react使用介绍（1）6 S. |2 g+ q. C* F' ^) l
4-8 redux-react使用介绍（2）% t8 x0 N7 `+ O" h+ L
7 o+ c8 h4 s6 Z; p; P2 B% |第5章 美团APP—首页开发/ ` y* [- s7 Z6 Z) ?7 d+ W
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
* j9 p. ~ H" K& V6 w5-1 底部tab按钮开发(webpack-dev-server配置)! N ~" y) _9 `% l# S3 @: b
5-2 底部tab按钮开发-UI逻辑编写（1）& o `( i7 T. e' \
5-3 底部tab按钮开发-UI逻辑编写（2）; S: w0 U4 r6 v1 \1 Q
5-4 底部tab按钮开发(rem配置)
% Q3 G1 V4 \& ^ X% Y7 @5-5 底部tab按钮开发(集成ESlint)/ i( I- K) n2 a" ]" p
5-6 底部tab按钮开发(集成HMR)3 ~7 A$ y7 e# A4 }
5-7 首页页面开发Header模块开发
1 W# e; z2 A4 {+ E5-8 首页页面开发SearchBar模块开发4 ]. x; ~! V V+ U
5-9 首页页面开发-Category模块开发（1）2 u* ~5 V5 N) r }' |$ ?
5-10 首页页面开发-Category模块开发（2） V0 Y; V5 _0 {, a% A
5-11 首页页面开发(ContentList模块开发)' n& d5 c, S/ i1 \7 E/ r
5-12 首页页面开发-ListItem模块UI开发; Y* z# P. b7 V( v$ A0 h+ O; j/ a
5-13 首页页面开发-ListItem模块样式开发* _. G, j7 k, a0 m
5-14 首页页面开发-ListItem模块数据渲染开发（1）8 d% b6 b* `& H" Y$ E! P* Y6 `. h, G( W
5-15 首页页面开发-ListItem模块数据渲染开发( 2 ). `3 _/ G9 v- \ c3 [4 G' `
5-16 首页页面开发(滚动加载逻辑实现)( k2 _0 p# p2 G# M" P7 i3 I9 E- Q
5-17 订单页面开发(List模块开发)8 j4 q. x+ @# h1 Z* j# p
5-18 订单页面开发(OrderItem模块开发)（1）
3 U) c. r. F" Z+ j! f' z5-19 订单页面开发(OrderItem模块开发)（2）0 g6 z" k5 W2 r2 f! C
5-20 订单页面开发(公共ScrollView模块开发)
$ P5 V( i' ]% t* \$ r6 K$ n1 i5-21 我的页面UI开发9 U. @/ Q$ o% s7 R8 r! C
5-22 我的页面样式开发7 M% g: I) M4 p( d9 N
5-23 集成react-router! e# m8 Y8 h- C
: k# Y3 ]) i: [* G$ i G
第6章 美团APP—评价和分类页开发
, W, h6 H& z/ x. D开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
; b5 |; K5 ?! J6 m6 e6 O6-1 分类页面开发(顶部NavHeader模块开发)
7 c0 [+ d: j3 f3 z% }" s2 p0 h6-2 分类页面开发(顶部Header tab 模块UI开发)
: I- S5 e, m4 C6-3 分类页面开发(顶部Header模块样式和逻辑开发), M* ^, Q6 @( o& C$ q% [+ o2 ~
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)& u6 m7 W( K! W4 V6 x5 l$ Y1 s x. A
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
% m7 J, ~" ]/ l. Y6-6 分类页面开发(Filter面板模块样式开发)3 T5 p1 D7 }. n' D0 z' Y
6-7 分类页面开发(Filter面板模块item逻辑实现)' I6 x) H* {, S3 h1 l' I
6-8 分类页面开发(列表List模块开发)8 F! Q* [) C9 m# t3 \
6-9 评价页面开发(UI开发)' E9 i( a! p0 {6 ^
6-10 评价页面开发(样式开发)
n0 \$ K7 n. j* @, N6-11 评价页面开发(交互逻辑开发)
+ O2 X* n. o2 {1 G6 `& @) i) {, Y* P& K2 m g
第7章 美团APP—详情页开发# Z, N& r% F# M/ @) k1 v
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
6 }) E: O6 t, X8 F. H8 P1 x% v7-1 详情页顶部tab开发(UI开发)
/ {0 b0 ]1 g6 X& F7-2 详情页顶部tab开发(样式交互逻辑开发)$ a5 }% |' ?# g' t
7-3 详情页点菜页面开发(LeftBarUI开发)
9 y' S2 [# C+ X1 ~* I" a7 \! @7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
1 L) a# q+ G, [2 J. u9 l6 B# f% `9 M7-5 详情页点菜页面开发(RightContent UI和样式开发)7 s2 R# |/ D' x: u& z; R
7-6 详情页点菜页面开发(RightContent逻辑开发)
* t! K( [$ L4 s- c" A( @7-7 详情页点菜页面开发(ShopBar UI和样式开发): i7 G7 T8 k" M5 R2 x9 w
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
$ |: N: y7 O/ t, H0 ^7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）1 t/ X; Z* M' G( l6 `& V: a
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
' j% x) \3 p6 M. W$ |8 G2 D7-11 详情页评论页面开发(顶部Header开发)! h' x& [3 y: S+ J
7-12 详情页评论页面开发(列表List 数据绑定)
8 |+ y$ F: K# t5 y" P7-13 详情页评论页面开发(列表List UI开发)
1 E$ f6 ^9 R7 d. U: u5 A! v% Q5 `7-14 详情页评论页面开发(列表List样式逻辑开发)
" X5 L, a; F; Q" u1 z7-15 详情页商家页面开发(UI开发)
7 S* F6 c8 g& T. I) T: m8 f$ E7-16 详情页商家页面开发(样式开发)
7 e0 O R: k3 x+ Q3 b
$ t/ a$ Y8 D4 K: g6 e第8章 美团APP—回顾与性能优化" P8 k) K0 C H
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...* h6 |3 g ]/ K" }* l/ H
8-1 懒加载性能优化) S8 |) d5 T+ n7 J8 H& [
8-2 JS和CSS公共文件抽离优化
+ ~8 @) E7 e! M% ?' S8-3 编写后台server读取真实数据
4 f Q5 Q5 |2 L& ?3 h4 J8-4 多Tab 页切换与滚动数据加载优化; ^; R/ k K8 M" x" Z' m$ a
8-5 项目打包
# q0 ^0 D' ?0 ~1 K: z8 W+ S8-6 项目发布
6 D( [, K+ t: W, M1 C% x3 A+ k" X4 I: q
第9章 美团APP与hybrid深度结合
5 t+ w9 q0 A: h4 j. W本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。7 M6 A' b( `1 w# S7 _
9-1 JS bridge 原理 试看2 X) r) T( T9 J" \: u
9-2 iOS webview + JS API接口+iOS APP集成
* j. u, Q7 u0 M0 \/ J. Z7 ~) r8 X1 ?( B
第10章 课程总结2 L8 z9 B7 c- i2 g
回顾和总结课程讲解内容，能更好的回归和归纳。
" j: U% O, X; D& B6 s, \ H10-1 课程总结/ _3 d1 }9 m/ O$ ?. q5 z
( |0 U: L5 ?+ h, v7 z0 E
【下载地址】
$ L' C9 g$ {# B, u! @: B+ b5 H1 d! j4 Q
6 C; ?7 A* j4 e! B6 n
|
[复制链接]
