" B# z% N# J' M, r8 ?
' @6 P* O3 ?2 b2 q. ]+ `
【课程简介】
+ u% z' x' V* V$ C本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。" W3 ^& h9 Q& h+ {. U' W
w4 c; i$ J" Z! ?4 E' c【课程目录】; ^, @0 A# b9 v R) Z
第1章 课程介绍8 {. I: U# O0 }. o
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
& ^, [% h* e. e- Y$ R$ f$ k6 I! H; ?/ Y1-1 课程导学 试看
6 z# X6 T4 n7 m3 k8 i
' v* K+ B# I4 O& Q) F2 @* f第2章 移动web硬知识点
3 j3 `8 H, e1 V) M8 V$ N. {+ y: h本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
! o3 o) k/ Z7 n9 r' f" c2-1 移动web开发概述) R' W! K: z8 Y5 V5 `
2-2 移动web开发调试
) G( x1 ~6 {9 u$ n! U* @2-3 移动web适配概述' B9 @: E/ w- f" [
2-4 viewport视窗概念
7 }: }! d5 a7 u. U, H2-5 css3之flex布局4 `: ^! y5 c- Y2 c/ ?
2-6 响应式布局和MediaQuery
: J: E+ w& C8 z2-7 rem,vw布局与适配- u! [" T' F- S) ~
2-8 移动端touch事件详解
. e* l1 c) C7 W" }6 ~6 w, K, p2 C: `" {/ M
第3章 移动web软技能
; B q" [7 H* _" I- R本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
0 f' ]1 [3 I5 b. T) v3 F) N7 x; B9 J3-1 代码管理工具&项目构建工具简介9 f6 |* E5 C& y8 `/ r2 n
3-2 webpack工具使用介绍
. G# s; b' p0 p0 B# E3-3 Sass预处理工具使用介绍+ Y2 c; m/ ~( {
3-4 React组件化思想 试看
. F. o6 v* E6 Q" x$ H1 e. X5 M0 j' e3 Z9 G% \4 T$ ^7 ^! z
第4章 项目开发构建环境搭建8 w1 g$ o; m' l
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。* @3 b# f" O0 z" f
4-1 项目和技术栈介绍
. s% M0 B4 z' j9 a6 @' n3 T4-2 项目演示, S+ `) X. C9 O6 f- A" P, R: ^4 |
4-3 构建环境搭建（1）& \7 c0 m9 u e% s
4-4 构建环境搭建（2）6 U5 ~6 T4 [; m2 d) f
4-5 构建环境搭建（3）
/ R: z) q7 R9 t/ J5 Q* }4-6 构建环境搭建（4）
- ]6 S4 C9 a' o" S* c" D4-7 redux-react使用介绍（1）
3 Q5 X* a# P1 N4-8 redux-react使用介绍（2）
" x. D" Y; |6 ^* t" t! ?( x. [2 A- U a
0 ~' V/ I* F/ i; T8 O1 J2 p6 F; |第5章 美团APP—首页开发2 [4 K# s0 M$ \% R, w2 ~
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。& ?! x7 `0 e" w& ]3 \* D& I' C
5-1 底部tab按钮开发(webpack-dev-server配置)
8 @4 E: h M" W5-2 底部tab按钮开发-UI逻辑编写（1）
& b% J2 h7 j+ i* K; C$ U& H5-3 底部tab按钮开发-UI逻辑编写（2）/ ^1 N! _1 R; d8 f# c) O% R; S" y
5-4 底部tab按钮开发(rem配置)( T5 L) Z' {, C; \0 O
5-5 底部tab按钮开发(集成ESlint)
! F/ |0 ?1 D4 E* `5-6 底部tab按钮开发(集成HMR)6 c+ ^3 E% J& u$ l; _
5-7 首页页面开发Header模块开发
+ A* k5 L i: ^5-8 首页页面开发SearchBar模块开发
/ A" i' P9 F3 p" U' _$ M' w5-9 首页页面开发-Category模块开发（1）
# u' V3 |! H! O3 Y$ K5-10 首页页面开发-Category模块开发（2）
* M1 z1 b4 J6 U7 [5-11 首页页面开发(ContentList模块开发). [# l& z" e; ]8 N: z0 u
5-12 首页页面开发-ListItem模块UI开发2 i% \5 z. v B# f3 }
5-13 首页页面开发-ListItem模块样式开发
4 F1 H8 C2 j$ u* ]5-14 首页页面开发-ListItem模块数据渲染开发（1）
5 v W, x: s$ c7 g$ l! w' ?5-15 首页页面开发-ListItem模块数据渲染开发( 2 )- V+ Q7 A# f. j
5-16 首页页面开发(滚动加载逻辑实现)
/ L$ S2 b8 H. w5-17 订单页面开发(List模块开发)
0 x# q$ d* B& c# q% E6 K; @3 L" L5-18 订单页面开发(OrderItem模块开发)（1）: t* q8 @1 c2 p# Z
5-19 订单页面开发(OrderItem模块开发)（2）
7 U* v& h7 o. B& _ z w7 B. V5-20 订单页面开发(公共ScrollView模块开发)
! i9 J# ?1 L+ w( u: U5-21 我的页面UI开发
# z* T. s; v- x5-22 我的页面样式开发+ H' {$ d6 R4 ]8 f" g( G5 n
5-23 集成react-router
, C- k" O1 G9 b/ Z2 p. D7 c0 r, u: x3 p" W# J: ]9 c! K* s
第6章 美团APP—评价和分类页开发
8 A& g5 \ A% T) s( D5 w$ L开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。# D, [( j) y$ d B
6-1 分类页面开发(顶部NavHeader模块开发)7 a/ H" A x# S9 M# p+ j+ R
6-2 分类页面开发(顶部Header tab 模块UI开发)* W; T' \) | E
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
* {1 `$ e. B( ?: Q0 s& F2 ~6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
3 D- w. h5 W( K. h' R" O; Z6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现7 C9 ]. n& J5 k F- B( Q/ u# ]6 b
6-6 分类页面开发(Filter面板模块样式开发)6 V ~5 T+ K! Y/ C: A
6-7 分类页面开发(Filter面板模块item逻辑实现)% {5 u* u# h* U
6-8 分类页面开发(列表List模块开发). D3 _$ O* n, {9 [
6-9 评价页面开发(UI开发)
% I) g! y% j/ N6 D/ A6-10 评价页面开发(样式开发)- F* ~+ F" z- g; I
6-11 评价页面开发(交互逻辑开发). W' w! w) z/ X/ N6 z
9 ^$ Z6 s# M1 z9 W6 w; }. e
第7章 美团APP—详情页开发8 C/ L) W! N% m" R
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
5 }; _# E" Y& \# f7-1 详情页顶部tab开发(UI开发)
, G+ P$ y" O7 N1 W7-2 详情页顶部tab开发(样式交互逻辑开发)
5 G+ u2 q( M! S7 Y9 G7-3 详情页点菜页面开发(LeftBarUI开发)
0 `3 D* g5 _- A% X+ S! f7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)- ~; j7 P: c& n# ^5 q& A
7-5 详情页点菜页面开发(RightContent UI和样式开发)5 X- f8 j4 P: w7 g2 o0 J+ n
7-6 详情页点菜页面开发(RightContent逻辑开发)4 y) c0 z* i/ @# w' s: s
7-7 详情页点菜页面开发(ShopBar UI和样式开发)
3 }( J# T7 Q; f' q7-8 详情页点菜页面开发(ShopBar 逻辑开发)5 x3 }3 o* @$ E& [0 w v" G7 |
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
$ _4 e$ d; @0 j0 u1 u, D7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）" \6 a, P4 J) @9 X2 }
7-11 详情页评论页面开发(顶部Header开发)
; M; _; d' ^, P& y K; ]7-12 详情页评论页面开发(列表List 数据绑定)
7 R3 N# a3 w3 v: \ E7-13 详情页评论页面开发(列表List UI开发)
' b! c" S: z6 W; G& D3 b7-14 详情页评论页面开发(列表List样式逻辑开发)8 }* N, M4 G7 i6 j$ J
7-15 详情页商家页面开发(UI开发)- j, E9 I1 }3 g% G9 m$ L
7-16 详情页商家页面开发(样式开发)0 _6 |% r" `" {" s4 v5 B" o
' G. o: g4 j3 I8 b, u ~3 f第8章 美团APP—回顾与性能优化0 F7 v9 y3 N4 H. s) G! u7 |+ @; j
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...$ }& e0 s; ?! R4 F. E- r3 [
8-1 懒加载性能优化5 h8 p) _/ r9 D, B1 c
8-2 JS和CSS公共文件抽离优化
" u2 p1 y1 k# d; l9 r0 o8-3 编写后台server读取真实数据9 h) ^8 k. a# n8 \# h' i: N5 s
8-4 多Tab 页切换与滚动数据加载优化
0 o7 R) ^3 N, ^$ D" H, p8-5 项目打包
) y( o4 ^$ k, i8 c, m8-6 项目发布' b9 W8 ~2 W( b; `% t
2 T" ?* ~& P8 V第9章 美团APP与hybrid深度结合6 S, X" Y# s5 L& q- r1 ]
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
1 d) I* j0 W9 m) V+ w, W9-1 JS bridge 原理 试看; Q; l. w1 Y% k7 T }3 `% t+ \
9-2 iOS webview + JS API接口+iOS APP集成2 i+ Q; d9 _. C
; r: q& H8 o# r; I第10章 课程总结
: H, I# ]& O+ p" ^$ X回顾和总结课程讲解内容，能更好的回归和归纳。
! d- K6 d: w8 S3 m7 {2 |1 O& [, u10-1 课程总结
9 ?( h& g" @( ^; z4 Z1 ]' ?
S5 Z, N2 S% r) R0 Q# D9 i【下载地址】. E3 E' Z f4 u$ |) C
8 b, M5 O8 C6 D: z. d( V! P8 k9 B
|
[复制链接]
