- p0 a8 @* \( E( d
# v5 ?+ W+ ^0 d$ n$ }( f% d1 m【课程简介】
0 ?' v4 S: v; w' q. z本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
- ~& A) V3 d2 N6 }$ @7 Q p7 M0 G( o: q
【课程目录】
3 e* ~. |' C0 Q8 g# Y p5 H第1章 课程介绍6 @0 z, ^0 s; V! C, n L) r; i/ K$ `
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。+ k! n* K+ `* o5 v7 s8 l' M1 W h$ p
1-1 课程导学 试看& v( Z1 g o7 _ B9 t
5 e& V) _2 U$ j+ L# d5 P7 ~& Z第2章 移动web硬知识点) g8 D7 ?3 A. L8 U8 b' D& `
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
+ q; O: W0 X* z' }9 v2-1 移动web开发概述
, W8 r: @! J- Q8 `2-2 移动web开发调试
1 j( B) |; [* u* g7 {* l5 q2-3 移动web适配概述
6 ^7 F+ u1 U( h* w$ P) G+ {" M2-4 viewport视窗概念
: k) Z% ~) q5 y1 F+ A2-5 css3之flex布局7 Z$ l$ j% B5 c/ ?
2-6 响应式布局和MediaQuery
- b X! A# F' m9 l ~; I" n2-7 rem,vw布局与适配
% J( L# f* N/ P* _2-8 移动端touch事件详解, p( w# |& ?. L; c g3 @& k' F5 n
& l3 u( L3 l- l, D; I# [
第3章 移动web软技能
) q/ ^6 b8 H! s8 N. @本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
k8 R( E7 i! \ y0 E- W3-1 代码管理工具&项目构建工具简介
/ a. l5 A3 e3 o) d3-2 webpack工具使用介绍7 W) h# Q+ ~8 O7 H' N. A1 N2 d
3-3 Sass预处理工具使用介绍8 @9 A" B. x- y0 n
3-4 React组件化思想 试看
# M, n: U2 g0 W/ ~* u- p. j2 `% f
第4章 项目开发构建环境搭建
0 g5 C2 f3 [. Z本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
- l, I" x6 ?% R+ s2 l4-1 项目和技术栈介绍* P, w4 ~) f1 }7 D$ W8 N. E
4-2 项目演示3 E9 N; ^- m1 f, l
4-3 构建环境搭建（1）
& U( }. T7 j' j# G% w" R, O4-4 构建环境搭建（2）# ]: g! l, ]# e* _, H8 a! ^
4-5 构建环境搭建（3）
1 X2 J2 t1 {; t4-6 构建环境搭建（4）) w, x) t9 K0 S; u0 b! P3 {/ }
4-7 redux-react使用介绍（1）6 n3 t! a2 w" ]1 w: F
4-8 redux-react使用介绍（2）
+ p! ?, U9 P9 W1 j+ n, w2 g$ U4 U4 W8 a2 G" H4 g1 B5 y% K! u
第5章 美团APP—首页开发
/ f8 L+ f l! C9 E) _2 S开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。- n! Y |1 u" @( F3 z4 r% H
5-1 底部tab按钮开发(webpack-dev-server配置)$ w1 W- q, k: r, S' v
5-2 底部tab按钮开发-UI逻辑编写（1）
- R4 u- k( G( s3 }) u5-3 底部tab按钮开发-UI逻辑编写（2）
W. i! | ^ x1 u! a# z5-4 底部tab按钮开发(rem配置)
0 L% t! r# Q8 w+ m% v. G6 ~6 l5-5 底部tab按钮开发(集成ESlint)6 l. ?0 ]- Z% z. ~
5-6 底部tab按钮开发(集成HMR)
% {* F- k2 O$ J' k6 R5-7 首页页面开发Header模块开发9 w: K& e4 h c9 W6 b) r T
5-8 首页页面开发SearchBar模块开发, y8 R+ u6 L! j$ U3 p
5-9 首页页面开发-Category模块开发（1）6 m' _, ^5 p4 U" U- f8 W; W
5-10 首页页面开发-Category模块开发（2）9 T8 Y2 ^/ v$ E) [0 v& d/ j. q
5-11 首页页面开发(ContentList模块开发)
1 g3 @& q9 _7 a" |5-12 首页页面开发-ListItem模块UI开发
4 c; T1 d$ s* `6 }8 L% F S5-13 首页页面开发-ListItem模块样式开发
+ E1 F. _5 x5 S% ?0 }, e; c- l5-14 首页页面开发-ListItem模块数据渲染开发（1）8 \- M9 N6 | [2 `- e- ?
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
2 m, Z! N+ D7 i& v& m' t q5-16 首页页面开发(滚动加载逻辑实现)9 G+ K) q9 n. f8 n9 l3 L. Y
5-17 订单页面开发(List模块开发)- z: y1 P9 y8 m. B3 Z0 u$ W& u
5-18 订单页面开发(OrderItem模块开发)（1）
9 X+ m4 U9 H3 G) }& ?# Z5-19 订单页面开发(OrderItem模块开发)（2）
9 m" C, K, i3 n6 }* R5-20 订单页面开发(公共ScrollView模块开发)0 q1 W4 F) e: C. B
5-21 我的页面UI开发
# I9 x) ]6 H1 e0 I5-22 我的页面样式开发 k" N% l% ?' L+ m8 w
5-23 集成react-router
" ?- _: M U Q2 Y" v% _0 h! `, k2 Q0 d, I
第6章 美团APP—评价和分类页开发# _# W7 P+ J7 {6 ]- E
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。, s6 D: c! U9 T' e% w. O4 }5 W
6-1 分类页面开发(顶部NavHeader模块开发)( ?0 f# A+ Z) o, v+ N, W
6-2 分类页面开发(顶部Header tab 模块UI开发): q: e( }( m* `6 w& ?
6-3 分类页面开发(顶部Header模块样式和逻辑开发)# o) _8 f4 T. }/ h' [# C; G0 l
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)3 X$ _5 P+ T3 {+ d+ y7 z
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
- g- q6 X- D- ], \6-6 分类页面开发(Filter面板模块样式开发)
2 i: L2 a1 E0 e5 y- P8 }* k' W6-7 分类页面开发(Filter面板模块item逻辑实现)2 N9 E2 m. T3 f% y+ h
6-8 分类页面开发(列表List模块开发)8 a+ X- m8 K/ M! h/ o4 V. z
6-9 评价页面开发(UI开发)
3 e P# i& p6 M* i% A3 f+ X6-10 评价页面开发(样式开发)* k9 q: v( g( W1 d) u, Q
6-11 评价页面开发(交互逻辑开发)
' q5 C4 T' Z/ ]
$ U% Z* `3 p* X8 I1 ~% C第7章 美团APP—详情页开发
# ^" F; N6 k2 Z# y' n d开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。: @/ i3 w" z5 e2 ~. @; T; R: l: E' h
7-1 详情页顶部tab开发(UI开发)
6 \9 U6 K( F: z/ F k7-2 详情页顶部tab开发(样式交互逻辑开发)3 T. H# I' M5 Y# y
7-3 详情页点菜页面开发(LeftBarUI开发)
' G- m V% Q3 N' k7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
9 j0 l6 p: r0 a9 O: K7-5 详情页点菜页面开发(RightContent UI和样式开发)
4 o: j/ K. `( r+ Q$ C8 H7-6 详情页点菜页面开发(RightContent逻辑开发)- E6 `0 t3 [" C/ ~
7-7 详情页点菜页面开发(ShopBar UI和样式开发)3 r* F# l9 Z# q$ h
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
1 o/ g. I" E3 p7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
( d; G, q8 G6 _( w& X$ f, ^; A" }7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
- t d& q* E3 _9 P+ g F" ~+ L9 x7-11 详情页评论页面开发(顶部Header开发)
% E( k' U6 A6 R3 {+ s8 Y; f/ w7-12 详情页评论页面开发(列表List 数据绑定)
8 k4 @% s8 K/ T3 \% r# ?7 J% A7-13 详情页评论页面开发(列表List UI开发)5 ] b7 r/ M8 H1 u3 t: f$ O5 a: p
7-14 详情页评论页面开发(列表List样式逻辑开发)
3 ]7 \4 z! y9 P# a7-15 详情页商家页面开发(UI开发)
- B+ G; i/ i( r2 K7-16 详情页商家页面开发(样式开发)
9 K' H' o) D' b, Y8 ~7 f+ l. ~* T9 q/ I. i% m* ^: m1 F
第8章 美团APP—回顾与性能优化
" y" m$ M7 Q: _; E2 Y通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...4 t6 H" Y; P4 r u9 l6 W" ]% V
8-1 懒加载性能优化+ y3 y8 y+ h, S0 s+ s' d: ~
8-2 JS和CSS公共文件抽离优化
3 x8 ]5 F9 J7 ]; h5 q8-3 编写后台server读取真实数据
$ T. m+ E; T" I. N8 ^9 m8-4 多Tab 页切换与滚动数据加载优化
6 r" w4 r. V1 F. n$ y8-5 项目打包
- {6 E5 U, ?0 p9 o' X6 T# t8 G, ^8-6 项目发布: X$ {* Y4 l6 P! v) ~! x1 W3 P
8 p e9 b1 h s5 g1 q' K0 ~! U3 A第9章 美团APP与hybrid深度结合
3 a+ e) b* t' g% H# M本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。& L3 `! \. ?2 R5 h
9-1 JS bridge 原理 试看+ ~: n7 P2 D8 `8 x
9-2 iOS webview + JS API接口+iOS APP集成- r. ] N, l9 Z0 u' J3 d c
6 O) o7 O9 O8 Q7 j# S1 c第10章 课程总结
+ q0 m o1 M! d, Q1 _回顾和总结课程讲解内容，能更好的回归和归纳。
5 C+ x' i4 M3 c! S$ L8 X10-1 课程总结# G2 A% d) c; I6 a+ X. b5 F
3 D V% I, e% Q# k( B【下载地址】3 a5 L3 d9 A+ Z. M3 _/ }# p' M
`" k" Y; P6 i
' X% R* c% V0 E0 c' b/ e l |
[复制链接]
