" U* l# c0 a# x5 z
) ^1 O) Y# S. q! U, O1 c% \& }【课程简介】1 q; ^ c6 B1 O ?2 T
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。5 |0 V; ^. C' P# c5 z
- a6 B1 i7 ]8 O2 W8 V% C7 `" [【课程目录】
4 u% `8 z- g7 z! \$ U5 _第1章 课程介绍# U8 K. h6 ~$ k) s' m( {$ m6 ]
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
. }2 \; D& `7 W% G1-1 课程导学 试看# k; |# { K% C/ T s2 Y' _ m$ t4 v% r
. ]# ~0 f: v0 b( |& F' }; H
第2章 移动web硬知识点1 K1 W; a, d3 C! S, e: h
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。" ?. W8 p8 ^& R; w5 v1 L" S
2-1 移动web开发概述0 f% Y% M8 u7 r% H& H1 e0 {/ @
2-2 移动web开发调试
2 l* O+ [+ J1 y/ X8 n2-3 移动web适配概述( g$ ^" x1 O; \. v8 X1 D* |
2-4 viewport视窗概念2 r, Y2 P' Z& O/ _8 s0 t2 f( t, p( y
2-5 css3之flex布局- L& p! d' u( K! Z1 n1 p
2-6 响应式布局和MediaQuery
3 q% |& `3 ?$ P* ]# I. M2-7 rem,vw布局与适配
5 _! H G( X( U, w2-8 移动端touch事件详解- L; @9 D! x1 N P+ t
" j/ a" V8 n- S. P3 A+ \第3章 移动web软技能
7 \9 s' q8 P& ]7 ^8 e本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...9 ~! I5 k# h" k- O
3-1 代码管理工具&项目构建工具简介
9 D+ r, m u9 k6 i3 a; h" T H3-2 webpack工具使用介绍3 O) C1 b; p2 H4 ]
3-3 Sass预处理工具使用介绍. N+ l8 B: j( O0 r) ^& G
3-4 React组件化思想 试看. V& q9 Y& X% k
' {( _8 t( I8 ^2 W1 \7 A
第4章 项目开发构建环境搭建
6 Q& s7 c0 f. ` B本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
- h& c7 r0 x) F; M4-1 项目和技术栈介绍
% B" p+ J7 q, H4-2 项目演示7 A: r6 `" n- t. _& K$ g. {- c
4-3 构建环境搭建（1）& b3 v" k+ W* G; a! K+ _3 B U- U
4-4 构建环境搭建（2）
& ^) C: J: z, @4-5 构建环境搭建（3）
' ]3 b8 R$ ?/ \% G K2 N1 J4-6 构建环境搭建（4）
- s9 b& Y% s& m0 G. n8 B4-7 redux-react使用介绍（1）
9 Y9 V! O+ Q, k" v) H1 R8 S5 |; P4-8 redux-react使用介绍（2）2 ~7 m: g' M' t0 ]4 P |! L
& F9 O4 H6 D, ~第5章 美团APP—首页开发
b @0 N0 n! N5 j J0 \/ I开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。& n; S! Z) f- T; L
5-1 底部tab按钮开发(webpack-dev-server配置)
2 I* ?. ~7 @/ ]. w* @5-2 底部tab按钮开发-UI逻辑编写（1）
: D9 U* h* f% k7 t& B5-3 底部tab按钮开发-UI逻辑编写（2）; H2 z7 d" R# c3 Z4 C) e* V
5-4 底部tab按钮开发(rem配置)0 B5 V+ r( Z) o: U" `3 s) r3 Q! [
5-5 底部tab按钮开发(集成ESlint)1 u7 Q/ t1 q% S" g: d+ O7 a
5-6 底部tab按钮开发(集成HMR)
+ y4 |; w% ]2 w5-7 首页页面开发Header模块开发
5 Q0 a$ t1 V) B1 [; y1 e+ @5-8 首页页面开发SearchBar模块开发
8 B' c; R: ]/ }1 b M2 O% J5-9 首页页面开发-Category模块开发（1）
0 Z% S2 `& e( v. D5 R% _2 x5-10 首页页面开发-Category模块开发（2）9 N; K. z5 c1 E' j0 p w2 ]
5-11 首页页面开发(ContentList模块开发)
. B3 [! |: V$ `5-12 首页页面开发-ListItem模块UI开发
- ~; _7 I+ m5 c7 E5-13 首页页面开发-ListItem模块样式开发
% X9 ^4 i8 B0 ]: S/ L; c5-14 首页页面开发-ListItem模块数据渲染开发（1）
* i; g, \4 d8 s( c3 Z/ t: @ [# s& j5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
# u/ v7 y" s2 I4 s2 t5-16 首页页面开发(滚动加载逻辑实现)8 D; o6 }3 n2 r/ B# a$ S. w+ r4 n' A
5-17 订单页面开发(List模块开发)4 _% A% `' I- S1 {- Q) A
5-18 订单页面开发(OrderItem模块开发)（1）
3 X' j3 }0 [( C( g a5-19 订单页面开发(OrderItem模块开发)（2）9 t1 f* u4 ?* q
5-20 订单页面开发(公共ScrollView模块开发)6 z' Q, | \1 h r" s) v2 c
5-21 我的页面UI开发# H# y4 B8 i* @3 C# p
5-22 我的页面样式开发
9 k, ], k$ ~& K! j- x5-23 集成react-router
/ Q8 Z. ]. M7 c' ?2 u$ X2 v t0 G# {
. u# ` V* w+ ] O& }* B: [$ [第6章 美团APP—评价和分类页开发( l" _4 B: g1 K
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
3 a7 Y) q [2 a* l6-1 分类页面开发(顶部NavHeader模块开发)
& H3 ?. s U! ?6-2 分类页面开发(顶部Header tab 模块UI开发)
. s7 f" A- k7 V: V* s6-3 分类页面开发(顶部Header模块样式和逻辑开发)4 _6 [/ c% m$ ? f) T
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
5 y) u/ L9 ?! U6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现0 K4 x4 ^" O5 [1 F6 z( }& r+ m
6-6 分类页面开发(Filter面板模块样式开发)
8 y+ K- p) k/ y6-7 分类页面开发(Filter面板模块item逻辑实现)& V; ^; H, |, L( y$ }# s) D
6-8 分类页面开发(列表List模块开发)
! Z: G1 p0 x0 z8 ]# J; N8 y. X: |2 P6-9 评价页面开发(UI开发)$ O7 X, K& [% I3 }0 M
6-10 评价页面开发(样式开发)" y8 i& O8 O/ C$ i5 ~% y5 a3 o
6-11 评价页面开发(交互逻辑开发)
1 u0 g1 x A" ^% k; h. |5 E! I0 O, }- t n, _) d; a. `; x! I
第7章 美团APP—详情页开发
8 w4 p" i' \) Y V9 R% k开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。5 ~. u& H# `/ X& j
7-1 详情页顶部tab开发(UI开发)
% F% M: N# s* a6 _" j3 N4 w" I7-2 详情页顶部tab开发(样式交互逻辑开发)
2 f* I% e) I/ H3 e# v* l" |7 ~# O/ c9 Q7-3 详情页点菜页面开发(LeftBarUI开发)3 ]+ G) G' h2 W; ?1 c/ E" _
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
1 `, c U+ |- l; C7-5 详情页点菜页面开发(RightContent UI和样式开发)
Z8 q" e) x% [1 o3 g1 Z T7-6 详情页点菜页面开发(RightContent逻辑开发)
# [, i E- j% p; {( G& J2 \8 L* u7-7 详情页点菜页面开发(ShopBar UI和样式开发)9 s! ^* @* M- i, V( c4 y/ e
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
* p, H8 J$ u. p/ f7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
2 n9 @, J: Q3 Q7 i- x# t7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）% Y0 G- I) I' i1 o" t z) N- L
7-11 详情页评论页面开发(顶部Header开发)* j6 {9 B& X% e. H, b
7-12 详情页评论页面开发(列表List 数据绑定)
' J3 ^7 y3 F; B" ^% V7-13 详情页评论页面开发(列表List UI开发)/ N* Y$ S, D' q K2 W- r! j
7-14 详情页评论页面开发(列表List样式逻辑开发)% ]/ h5 y/ H q" [
7-15 详情页商家页面开发(UI开发)
! q3 [. Z! N6 d4 C I7-16 详情页商家页面开发(样式开发)/ h# f P" x, g; j: k
/ J: A2 d% M& p! B. U" {第8章 美团APP—回顾与性能优化9 \" i+ i3 k1 m3 ]- _
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
! O# v; ?, e: T7 o) [% x8-1 懒加载性能优化- G0 t# Y# O$ K5 f6 {% W9 V# K
8-2 JS和CSS公共文件抽离优化
, H2 ]3 @0 \0 s& v9 x8-3 编写后台server读取真实数据
) {3 t$ m( }$ e1 V: W& I$ M8-4 多Tab 页切换与滚动数据加载优化; Z; p: l6 a5 ?* J! G7 t
8-5 项目打包2 y( n& O& C* q' a: `3 d" O! C+ B
8-6 项目发布
. x( E) N; |2 p' G$ z( g8 p' R! B
) Q' b5 X. @* j2 Y第9章 美团APP与hybrid深度结合
* m7 x4 x, i. ~! T4 g本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
/ n3 K- v5 w) ^. n9-1 JS bridge 原理 试看
* c; ^5 L5 O8 K/ K! \& U9-2 iOS webview + JS API接口+iOS APP集成
# U% h1 U5 }% N! Y ]
# J; U' _4 ^$ ^8 j# M% q: ]第10章 课程总结
/ M* k. M! j1 V; j+ Y& x回顾和总结课程讲解内容，能更好的回归和归纳。
0 R! P, Q; O2 J0 [5 m1 I10-1 课程总结% K @- J Q( v2 A$ \8 c6 Q
. T' P! b" A7 {5 Y3 P9 x% E9 J! I, B, b
【下载地址】
+ m% R5 |& I1 A' r6 L6 |. s- h+ e% j g4 i
4 f3 @5 Y8 \" r4 M( |$ r! d7 T |
[复制链接]
