# b! k4 M. O$ ?1 P( D n1 u8 L
* ~7 r' D5 J4 H8 n1 h5 S
【课程简介】
. c6 w8 R. X3 H% m5 G. I( J0 G本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。; Q4 x" R+ @' S4 K( ]% G" c* Z1 x
7 O/ |5 d1 X# B% H7 S6 M【课程目录】& j! B& H& I# G% p x, L
第1章 课程介绍
: j& C2 U+ t+ t. s) @% Q. f通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。3 r4 h+ G9 S7 s2 `' q+ j" f$ |
1-1 课程导学 试看# C1 ?8 v! e+ d% w2 K; E4 c
9 \8 p) X( B% ~第2章 移动web硬知识点
q) \5 t) s. u/ _本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。( J$ X$ J7 {- ~, G
2-1 移动web开发概述) g9 v9 a, m( g/ L. x1 J
2-2 移动web开发调试
+ j* M3 Y5 q2 ]1 V5 X5 i' |$ H2-3 移动web适配概述
, x2 v5 T# E/ O2-4 viewport视窗概念
, U7 Z5 e, {& c9 I) b. h+ b5 v2-5 css3之flex布局: T! P2 l( u$ y
2-6 响应式布局和MediaQuery
7 w4 ?1 o3 ~8 }2-7 rem,vw布局与适配4 V. ]& H) i# \. z: ~% r
2-8 移动端touch事件详解! C6 A+ @ j1 G6 c1 S( I& p
. ~; ]" G& y' R- ]& k( B第3章 移动web软技能
' ]' P L, e+ [( p本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
5 L& B' L' c* `6 n, s) t3-1 代码管理工具&项目构建工具简介. `7 i O4 E7 t/ M8 J* n* z2 t
3-2 webpack工具使用介绍
7 y) h- ?+ B: I8 D* g& v/ M! f6 e3-3 Sass预处理工具使用介绍) q: M" F/ c. d4 m& j
3-4 React组件化思想 试看
/ r q% D7 e4 L" `' M
& C1 }3 u' X9 p- F7 T* Q第4章 项目开发构建环境搭建 _. u6 Y+ J) }! x% G; N5 ^ @
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
' W% ?; ?( N! _4-1 项目和技术栈介绍
( A3 E2 E9 E6 j; E1 I+ j) K4-2 项目演示
- [0 z+ Z8 m' ^. Z5 k4-3 构建环境搭建（1）
4 c0 T" F9 {- k4 \; G- ~4-4 构建环境搭建（2）
2 ~ f8 N8 h. K+ y& j- K% p4-5 构建环境搭建（3）
$ t3 k9 s$ E3 f% W- [/ y9 m1 k4-6 构建环境搭建（4）
5 x0 c2 }% q2 S) h8 n4 i4-7 redux-react使用介绍（1）0 R2 X& n: k, O3 _6 o9 N8 [
4-8 redux-react使用介绍（2）
2 Y! s+ Z8 Y4 `) Z! T0 I
% s7 C+ W7 }$ n第5章 美团APP—首页开发
# K4 \- F! j3 {/ [' W. I开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。3 w; f- U( w' g9 b$ P( w8 f
5-1 底部tab按钮开发(webpack-dev-server配置)1 y: c% t5 E: ], N: ~
5-2 底部tab按钮开发-UI逻辑编写（1）
# `1 G: l+ ]/ _- x% H$ R5-3 底部tab按钮开发-UI逻辑编写（2） T3 }. m: L6 t" q1 Y
5-4 底部tab按钮开发(rem配置)
( F4 U6 }7 U& e5-5 底部tab按钮开发(集成ESlint)
! d$ r2 U+ @1 g: Y1 A9 Z2 N" J3 b5-6 底部tab按钮开发(集成HMR)
$ g# b" j: o8 U: m$ v4 f3 x3 `& C5-7 首页页面开发Header模块开发
: ^3 L p N( t3 V2 T7 e' Y5-8 首页页面开发SearchBar模块开发1 [8 s; h3 y5 _- M0 A( Z* F
5-9 首页页面开发-Category模块开发（1）& D c O7 y, ~0 |$ t) Z: b# }! _
5-10 首页页面开发-Category模块开发（2）
( G/ a' x) Q/ @* r6 X$ B5-11 首页页面开发(ContentList模块开发)
9 D& z. Z1 v- r* ~ s5-12 首页页面开发-ListItem模块UI开发/ ^9 m7 p1 e) p6 n1 B: R0 b& k
5-13 首页页面开发-ListItem模块样式开发
7 {4 X o" L3 d0 p9 J5-14 首页页面开发-ListItem模块数据渲染开发（1）( d' y! p/ S+ a5 K- A9 G: h# V
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )8 n* G( `8 ?' M' h5 B' S
5-16 首页页面开发(滚动加载逻辑实现)
. b# T! O+ @) W' h1 T% k5-17 订单页面开发(List模块开发)
0 g/ i- Q [) a) K5-18 订单页面开发(OrderItem模块开发)（1）! g/ z* @$ g7 v: L0 y
5-19 订单页面开发(OrderItem模块开发)（2）
; A! Z- s- B( d% Y) A, @5-20 订单页面开发(公共ScrollView模块开发)
( z- _9 x X: ?3 ~+ g% Q0 m5-21 我的页面UI开发
& ~9 o. f* I6 S( U$ e( L5-22 我的页面样式开发/ @5 Z3 D+ i5 c4 b! i( M( J( N
5-23 集成react-router: U% I Z8 m& u6 o7 X
2 l. M/ g8 Q0 W8 f1 L第6章 美团APP—评价和分类页开发
: X2 ?/ {) ?& C1 R& D- J( E开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。1 T9 ~+ z4 U+ R. w8 ~4 N. q7 {
6-1 分类页面开发(顶部NavHeader模块开发)5 ^4 }( e# M1 x( A6 d
6-2 分类页面开发(顶部Header tab 模块UI开发), B7 E' B5 @% |; D' x3 u9 D
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
3 g( v7 p7 U; t' y: \9 j5 X/ N6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)8 {. o) D8 S8 T) x: ]2 J
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
2 h: M2 `/ z$ F. d2 J/ T; e6-6 分类页面开发(Filter面板模块样式开发)
! A$ Z p. C, A: l2 W# T. V; Y4 ]6-7 分类页面开发(Filter面板模块item逻辑实现)
0 ?1 d7 \" P' h6-8 分类页面开发(列表List模块开发)
& ~& |" j, X R$ n8 `; Z6-9 评价页面开发(UI开发)" I8 y' K" C8 |; T7 N3 Y) y! |/ c9 Q, p7 N
6-10 评价页面开发(样式开发)
- o8 V5 A) N/ L! T/ V. i# M* H6-11 评价页面开发(交互逻辑开发)
: Y3 U7 b9 y8 r5 ]- l/ l/ O) _) a
: e$ H* y1 `& a" f k第7章 美团APP—详情页开发
. q" F5 Z8 {; d2 K开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
8 p5 W8 [5 c) U7-1 详情页顶部tab开发(UI开发)8 p' k5 V+ U8 [! A
7-2 详情页顶部tab开发(样式交互逻辑开发)
S; V+ i. ^0 `( }7-3 详情页点菜页面开发(LeftBarUI开发)
4 M8 X# @1 \% w! Z u! C7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)2 p8 V$ ]% L0 A$ b* L! W' d# k
7-5 详情页点菜页面开发(RightContent UI和样式开发): t6 j: p7 G$ e
7-6 详情页点菜页面开发(RightContent逻辑开发)
& b4 \* A9 X/ A% f3 ?7-7 详情页点菜页面开发(ShopBar UI和样式开发)) `5 f3 @4 u& t4 B3 k
7-8 详情页点菜页面开发(ShopBar 逻辑开发)" u! f% w% }- A. [% E
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
$ L$ q* u5 i+ ~( p* n0 E7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）) A% U( D5 H3 @& K" ?
7-11 详情页评论页面开发(顶部Header开发)
* b; k" p4 q6 L/ }7-12 详情页评论页面开发(列表List 数据绑定)
1 T7 r! |: s6 k9 l7-13 详情页评论页面开发(列表List UI开发)
+ ]& j- Q/ |) p! R1 K' V9 N4 r7-14 详情页评论页面开发(列表List样式逻辑开发)
$ L. a8 {4 G3 D" a7-15 详情页商家页面开发(UI开发)
4 Q) {4 R7 ^2 v8 B4 M$ l1 s; p' X7-16 详情页商家页面开发(样式开发) L: H/ j0 [: T: f% V2 ?( c7 n" a4 L- T
K: u0 u1 Q/ {$ M* m7 m第8章 美团APP—回顾与性能优化% Q F0 z% g* c5 ~5 q& V
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...1 U: f+ N7 t& P% f' i9 }9 Q" _
8-1 懒加载性能优化2 I- r$ {2 ~5 r$ q9 u
8-2 JS和CSS公共文件抽离优化
# O, T) ^" r0 G- Y) S6 y8-3 编写后台server读取真实数据+ G9 q& o. ^% n; o2 n- V
8-4 多Tab 页切换与滚动数据加载优化
0 k) {+ j4 v8 Y# J% z8-5 项目打包4 K. C4 j4 @7 X$ L$ W6 n/ g1 _$ u
8-6 项目发布' Y. }! C% u9 S0 Z& Z$ h
: l$ b) o' k! q) }3 n
第9章 美团APP与hybrid深度结合3 _' d X0 Z$ g
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
7 i Q3 z- `" l- N9-1 JS bridge 原理 试看( |% Z7 v) ~. Z/ g* G) L" v4 t
9-2 iOS webview + JS API接口+iOS APP集成: J8 g! ^/ k C. ? r$ b& I; o
: a2 u w$ }9 e* v' o5 }3 K& B+ P第10章 课程总结& g! Z+ n ?& R
回顾和总结课程讲解内容，能更好的回归和归纳。
1 Q$ {$ b( M7 {' r! O: e10-1 课程总结
3 @5 W9 @7 P K: |
8 U% {: I1 x# N7 r$ D/ H5 i: C【下载地址】
9 R1 ]/ Y# g" ^$ W1 f+ A+ Y7 x$ ~! s; t+ }% \* }, u
[$ ?2 ]0 s; P" h" f ]- T
|
[复制链接]
