) U1 Q$ U* }& D$ r, w" P$ r
9 B& R" u4 J2 |' e
【课程简介】6 P& q, h! l: o
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
: F, E2 A9 E$ v9 E2 V1 Y/ V6 X7 m" U1 r, ]: X3 ~8 _1 S
【课程目录】
( u1 v, P. j H3 U; d4 k第1章 课程介绍
; |0 h8 g7 _7 b& G通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
6 ?. p- a. V$ g' `; z# _% r3 D9 n1-1 课程导学 试看7 d* S# O0 H7 ?. @& x
m4 r: h, _. w" ~! ?
第2章 移动web硬知识点
$ N5 M Y/ v; [* M0 W6 Q2 i本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
1 m& N1 f: C) Q" w* E" H X! a2-1 移动web开发概述
: `; ?9 T# k V: p# k- u2-2 移动web开发调试
c& k, I2 ~$ i$ S4 R9 [% |2-3 移动web适配概述
5 @- e8 w- W) S( ^2-4 viewport视窗概念
6 C) U7 y f- n6 O, G0 M2-5 css3之flex布局! j E( x ]7 M
2-6 响应式布局和MediaQuery# B$ M8 b( v9 J0 d& j* D9 G
2-7 rem,vw布局与适配
8 r3 d; |, y! @( F3 Q2-8 移动端touch事件详解
0 H9 d7 _, o5 _8 Y1 P8 E/ h8 x* L) V/ r; g
第3章 移动web软技能1 c9 y2 ^6 ]0 x8 g3 q' g
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。.... Y) s$ f- ~9 n
3-1 代码管理工具&项目构建工具简介
1 ?! I' V; h9 Z: d4 Z. ~3-2 webpack工具使用介绍
: h2 C( Z, Z3 M' X0 m2 L2 n3-3 Sass预处理工具使用介绍
: |1 w s% Z; t/ E# ^4 A) c8 f; P7 Z3-4 React组件化思想 试看& g" Q5 Y+ Q! e
1 Z; H! K, g8 V4 m6 t3 ~2 Y第4章 项目开发构建环境搭建
# s6 d- V/ D8 M; u/ q- I本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
* N5 ^5 b9 F* P" ^4-1 项目和技术栈介绍
4 S' |6 P& P- `7 v4-2 项目演示
/ U t( f% P6 D9 h4 w4 a$ j5 B0 [4-3 构建环境搭建（1）
7 S& Y; ~$ N I4-4 构建环境搭建（2）
- r2 L$ o$ x# S3 i3 h" G4-5 构建环境搭建（3）. C+ C) l$ \4 R
4-6 构建环境搭建（4）
8 H) Q( |! Y9 A4-7 redux-react使用介绍（1）: e2 M7 k w# ? x$ r$ a' V
4-8 redux-react使用介绍（2）
3 B, ~' N w( d8 X- k
/ F |( }- k1 H5 i; N第5章 美团APP—首页开发. }, o" I! {1 Q4 e; T; s/ W
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
2 K' r; p) y* `6 \3 O; ]5-1 底部tab按钮开发(webpack-dev-server配置): [. q/ q2 l- s# d- K
5-2 底部tab按钮开发-UI逻辑编写（1）
% Z4 W2 M7 [* c8 o I5-3 底部tab按钮开发-UI逻辑编写（2）
2 J, u/ A/ }. z- a9 W5-4 底部tab按钮开发(rem配置)& z) s% O+ w7 y7 e
5-5 底部tab按钮开发(集成ESlint)/ J1 c0 E2 i! T- L4 o* f( _4 @
5-6 底部tab按钮开发(集成HMR)
5 w* s3 f( x" f+ T7 h, F4 Q& R5-7 首页页面开发Header模块开发
3 K' `* ^+ C( U8 b* g3 i" U; o l5-8 首页页面开发SearchBar模块开发
/ A7 O" Y |$ o9 c6 J0 |5-9 首页页面开发-Category模块开发（1）, ]8 k! z# Z9 ^
5-10 首页页面开发-Category模块开发（2）( f, ]0 w& Q( D! N3 c8 b# x
5-11 首页页面开发(ContentList模块开发)
: ?2 |4 R# K \& _$ k) ^5 x0 y5-12 首页页面开发-ListItem模块UI开发
& t: G5 D6 n, | K5-13 首页页面开发-ListItem模块样式开发
* K) Q2 c. e- ^5 v5-14 首页页面开发-ListItem模块数据渲染开发（1）
& f3 \9 z |0 t2 o$ }9 m5-15 首页页面开发-ListItem模块数据渲染开发( 2 ): P& f; v" f# G1 p) H
5-16 首页页面开发(滚动加载逻辑实现): _8 Z S& ?$ m, g2 r) |
5-17 订单页面开发(List模块开发)
! i" G* z. P- w+ K+ T5-18 订单页面开发(OrderItem模块开发)（1）0 L9 E, o, P( ~0 V. J( c+ }# _
5-19 订单页面开发(OrderItem模块开发)（2）8 `! j$ l+ t2 V6 k
5-20 订单页面开发(公共ScrollView模块开发)6 I% @& o: [/ f- c
5-21 我的页面UI开发
4 B& r$ n5 x# E5-22 我的页面样式开发
, j7 u9 r2 E& v4 p5-23 集成react-router
- x1 `3 ~+ c& a2 N3 N7 y5 F' f6 f( o! u* I6 q/ ?
第6章 美团APP—评价和分类页开发% N1 w/ _6 |9 S* E+ u3 ?
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。+ e0 C, _& r2 f% c3 D. ^
6-1 分类页面开发(顶部NavHeader模块开发)
: t6 ]% ]+ [# @6-2 分类页面开发(顶部Header tab 模块UI开发)3 x; v2 e8 g* s- v
6-3 分类页面开发(顶部Header模块样式和逻辑开发)4 Y* A% x6 {9 _- C# W
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
2 N: Q/ Y8 U5 e( q9 Q6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
+ A$ _; |( w! H7 D0 ?6-6 分类页面开发(Filter面板模块样式开发)" ?2 B: o. J! O# C) F
6-7 分类页面开发(Filter面板模块item逻辑实现)
! G& o" B7 O+ T6-8 分类页面开发(列表List模块开发)
# n- O8 E y. b6-9 评价页面开发(UI开发)3 y1 O$ s G9 d' {) y# j
6-10 评价页面开发(样式开发)
% b0 q, B& P% W: I3 E' \. w6-11 评价页面开发(交互逻辑开发)0 B H) e% ~0 i- ]* [2 G- \) O
$ R m2 A- x$ b* @# T8 P8 b* w
第7章 美团APP—详情页开发
& R2 M; G# _; {+ b" _# `" \/ M开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
7 \/ ?8 ^" b2 Z- q6 ?* O7-1 详情页顶部tab开发(UI开发)
- g- W+ l- ?: J# i% n7 A7-2 详情页顶部tab开发(样式交互逻辑开发)! f! ~6 b* D1 @0 @3 w6 V( Q, m3 B
7-3 详情页点菜页面开发(LeftBarUI开发)
1 |4 g& \+ [) s" C$ U5 ~$ t, Q/ g8 S0 I4 F7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
0 Y# r2 s4 Q& q/ U7-5 详情页点菜页面开发(RightContent UI和样式开发)
K3 ]8 P. j* ? T5 J7-6 详情页点菜页面开发(RightContent逻辑开发)
9 O) }$ z5 K8 F% t7-7 详情页点菜页面开发(ShopBar UI和样式开发)
% o: Y1 ?$ q9 V1 ~4 r) S7-8 详情页点菜页面开发(ShopBar 逻辑开发)( q: b7 t, x3 x
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）( a+ e' a2 e( o8 V
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）, R6 ]* D2 U$ p/ H/ m2 G
7-11 详情页评论页面开发(顶部Header开发)* y+ E/ E; q+ s4 |' x1 R% T; p
7-12 详情页评论页面开发(列表List 数据绑定)1 {5 G! R3 r. U5 c
7-13 详情页评论页面开发(列表List UI开发)
; U/ {* v! |$ H0 _) v `7-14 详情页评论页面开发(列表List样式逻辑开发)
. i2 A7 Y7 ~6 _- V6 s( I7-15 详情页商家页面开发(UI开发)
& }; t6 w! L! z7 I F# O! O7-16 详情页商家页面开发(样式开发). [! |/ A5 _# O1 q
! X3 `) n0 ^, _; U! j7 ?, E
第8章 美团APP—回顾与性能优化
7 ], ], l; W" e/ B. [/ c通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...8 M2 J3 h* F/ H ]/ @/ n/ Z
8-1 懒加载性能优化* b6 p# I4 i& d- T% f+ u! [
8-2 JS和CSS公共文件抽离优化
5 q) L, f2 H! H2 Y: f8-3 编写后台server读取真实数据1 g" o. z8 p9 ]3 C- D, L& F
8-4 多Tab 页切换与滚动数据加载优化2 N9 ^. }7 {5 \0 u
8-5 项目打包
0 X7 k/ H- g K, J8-6 项目发布
/ w8 t; \; N% T# E$ k. u& s
1 e5 i5 U7 d* X- n; @第9章 美团APP与hybrid深度结合
/ B" C- x. e6 {, w; H$ }, _本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。' P4 x& ?2 i( E: s
9-1 JS bridge 原理 试看( h1 K( Q7 [% b
9-2 iOS webview + JS API接口+iOS APP集成
2 a/ n& E. {8 v F! E2 Z0 E- ^
- F* l7 M% c" N! g1 K. o/ v第10章 课程总结
- A+ W; O4 w2 m. U回顾和总结课程讲解内容，能更好的回归和归纳。
& {& u6 r" A' e# E10-1 课程总结
2 c) |% ?1 G: a1 X; C! Z2 K: q
* W$ R! q7 ?* w- i3 a( u【下载地址】! X0 J2 {# O! ]2 S
; z: W0 i5 r; ^* k
. `) C/ Y/ T l( l! c/ D. O0 m |
[复制链接]
