2 E& ^* I3 w+ S# _6 J
9 L0 Y4 a/ E, H* D# z+ T+ F
【课程简介】* s7 v6 c: U5 u& F
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
: P& ^" U X% ^; A! Q s" X4 b2 G5 O$ P: H3 S; X1 }6 _; b
【课程目录】3 e9 ~! Z: B3 X, {* ?7 G0 b
第1章 课程介绍
1 @2 J. ] a* E通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
" Y; B8 u4 ?+ G1-1 课程导学 试看
0 i9 Z0 W" W9 U: Z @0 R$ D8 Y, s. b$ j, c5 b2 Q" S* G
第2章 移动web硬知识点
5 g2 K: U- D: n2 B& S: A' B& h本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。; N6 U2 d$ o, V
2-1 移动web开发概述
* [5 O0 u! x3 g4 A9 ]) t; C( t" N2-2 移动web开发调试* E7 @0 F# J1 o$ q) `
2-3 移动web适配概述
$ G+ O8 X( Z$ h& M9 X2-4 viewport视窗概念
8 ]3 U$ Y. T2 m$ O8 l' T/ o8 e2-5 css3之flex布局- [$ ~$ G+ ^/ p/ o
2-6 响应式布局和MediaQuery
( V1 M0 b7 o4 A1 E7 q, H- M$ ~2-7 rem,vw布局与适配$ d2 g4 {; k2 I- x$ {/ W1 a3 ~
2-8 移动端touch事件详解
8 s2 P0 x# k2 F( `: J$ t6 g8 a# D1 j$ C: l2 Q' @
第3章 移动web软技能: d# f4 \; U8 J' ]: k7 E& k `
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...3 c/ }. x" `9 i' }) o. ^
3-1 代码管理工具&项目构建工具简介
# s4 z! o4 e r. }- T1 a3-2 webpack工具使用介绍$ S4 E, A6 T' ^* e9 o' c1 Y
3-3 Sass预处理工具使用介绍1 e$ Z* T' Z: |% W! O4 V
3-4 React组件化思想 试看6 b1 j* R3 ^8 R/ k8 |- }; f
8 m/ _8 P3 K" m" f第4章 项目开发构建环境搭建
# s8 s4 X, {3 w本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。( \" h- _6 F2 ]7 z `9 U* |
4-1 项目和技术栈介绍+ j W$ M# X2 i& f, {) U
4-2 项目演示" M- A) @8 k6 V/ y0 i& R
4-3 构建环境搭建（1）
" m( [5 B* P; T9 b; y9 e4-4 构建环境搭建（2）* J' t* k4 ~' E8 z3 z4 D
4-5 构建环境搭建（3）% L; ^$ D: s' [9 M" V' _ P' L# M7 v
4-6 构建环境搭建（4）
% x& B8 W) E8 i1 O$ |" k; u4-7 redux-react使用介绍（1）1 w& G" _. F, m. M- R' s4 j/ t
4-8 redux-react使用介绍（2）
% z( a. m3 y4 z2 f6 g3 B6 D' F3 M3 _1 q. r
第5章 美团APP—首页开发0 p: F, l8 u& ^: ?6 H
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
3 }; F/ S G# |9 _2 t6 `6 c+ k) s5-1 底部tab按钮开发(webpack-dev-server配置)
3 Y* ]* A' Y6 K, Z% m* U3 _! u5-2 底部tab按钮开发-UI逻辑编写（1）
+ }! m3 N3 D& G' h5-3 底部tab按钮开发-UI逻辑编写（2）, }" e: e6 S: m2 K. N
5-4 底部tab按钮开发(rem配置)
+ Z7 b( c! O9 @) y5-5 底部tab按钮开发(集成ESlint)$ U7 i3 n6 d( t( p2 {
5-6 底部tab按钮开发(集成HMR)
# X6 v7 W7 p2 [, h" v2 l1 U5-7 首页页面开发Header模块开发
* ^. u8 j4 ?* v z. G5-8 首页页面开发SearchBar模块开发
4 X2 l* G* A# o5 ]5-9 首页页面开发-Category模块开发（1）9 K+ Y' P/ e& v3 p- }) B3 [( _8 e
5-10 首页页面开发-Category模块开发（2）
/ {, `) U: Z3 O5-11 首页页面开发(ContentList模块开发)6 t7 Y) R, b5 \/ E' C K
5-12 首页页面开发-ListItem模块UI开发
/ X) b& O! v. `2 M5-13 首页页面开发-ListItem模块样式开发6 e8 `0 l9 L# C( ^
5-14 首页页面开发-ListItem模块数据渲染开发（1）
( I+ i' K3 Y9 m6 p9 E: h5-15 首页页面开发-ListItem模块数据渲染开发( 2 )7 R& ~# j( K( f& M
5-16 首页页面开发(滚动加载逻辑实现)
; `& h$ \6 p8 x% M4 s: w7 d5-17 订单页面开发(List模块开发)) c/ O) u! b, E+ O5 X
5-18 订单页面开发(OrderItem模块开发)（1）8 m0 i/ v7 ]6 ?. b, K* m
5-19 订单页面开发(OrderItem模块开发)（2）
' V7 A6 C# ~8 }5-20 订单页面开发(公共ScrollView模块开发), c2 `6 \$ n/ j' i+ o7 N$ ~: C
5-21 我的页面UI开发/ E$ d. ^6 t9 F( T/ P) ?/ z
5-22 我的页面样式开发
8 h1 T4 A4 a) Y( ?5-23 集成react-router& f- w2 @4 S; p) c8 }' M
" g* E/ `2 E" g+ @第6章 美团APP—评价和分类页开发
3 B4 i# p1 F6 c( P) z开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
$ G) y4 H6 }; c0 w6-1 分类页面开发(顶部NavHeader模块开发)1 ?/ b D) i* l6 W0 [
6-2 分类页面开发(顶部Header tab 模块UI开发)
1 V9 r8 i3 h5 z2 E6-3 分类页面开发(顶部Header模块样式和逻辑开发)# z9 V% E3 Y+ X2 w
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)9 ?" C6 w; g7 x g6 ~; O" |
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
5 o) n% E! ^& H' O% @' R* C6-6 分类页面开发(Filter面板模块样式开发)
9 i( Q0 ]- G4 u, x& x8 @' N8 k# b* }6-7 分类页面开发(Filter面板模块item逻辑实现)
6 ^3 N# E4 p' `. n6-8 分类页面开发(列表List模块开发)' D# F2 C/ t3 c6 w- P2 C$ s
6-9 评价页面开发(UI开发)
3 [7 |8 v) m U7 v, ~$ P9 s6 q4 i6-10 评价页面开发(样式开发)
7 t: ]: ^' U; i; o. g% ?) w6-11 评价页面开发(交互逻辑开发)$ \% q' E5 ?4 r8 B b
0 e" a: o( O4 ]' o& Y" ~/ t第7章 美团APP—详情页开发, L% U2 g+ m: n; W: M$ m: I
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。! P2 ~& `+ |5 N* E3 M! p& k* `
7-1 详情页顶部tab开发(UI开发) m8 R' V% @4 Q* e( Q. i$ P
7-2 详情页顶部tab开发(样式交互逻辑开发)
$ A- ?4 w @6 b7-3 详情页点菜页面开发(LeftBarUI开发)
3 ^9 N w% X8 Z5 N5 k; b. k4 ?# \3 G7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)5 ?4 q% Z1 L' x1 O& ^, b. p; A, c
7-5 详情页点菜页面开发(RightContent UI和样式开发)
: `% H( `' z8 s1 _+ N7-6 详情页点菜页面开发(RightContent逻辑开发)
% ^) b) o8 V$ [( b' P* t$ f7-7 详情页点菜页面开发(ShopBar UI和样式开发)
% Z$ O; w7 {/ D& `* }$ q5 \7-8 详情页点菜页面开发(ShopBar 逻辑开发)
, C/ f+ U! b% Z: K! j- _4 S( A3 o7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
) i2 a" t: D f% K; r7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
' L' G" I. Q1 J4 ^7-11 详情页评论页面开发(顶部Header开发)
8 a2 H- n& b& }* N: \8 k2 }7-12 详情页评论页面开发(列表List 数据绑定)
- _* \6 G8 n7 K, q( u6 w2 l- G# t. M7-13 详情页评论页面开发(列表List UI开发)3 U9 Z8 S( J& J/ l
7-14 详情页评论页面开发(列表List样式逻辑开发)4 H1 B- f1 l, J1 Q4 A
7-15 详情页商家页面开发(UI开发)
0 C0 M7 D9 R; B- `! n+ |! Q- ^. W6 C7-16 详情页商家页面开发(样式开发)3 F; `0 `5 {0 P# O; w& o
9 _' T {' x$ O! ~# _第8章 美团APP—回顾与性能优化1 l- } s0 Q0 x h! T
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...# v' U) O' L0 ^- F+ f$ L+ ? |7 K
8-1 懒加载性能优化
8 n2 U: W) B5 v3 z8-2 JS和CSS公共文件抽离优化, l2 {/ y. \$ d
8-3 编写后台server读取真实数据3 T6 o' P- q- a0 }/ J/ J! {. W' A
8-4 多Tab 页切换与滚动数据加载优化2 o0 v" ~2 e$ e
8-5 项目打包4 m4 M" e* Z* }5 e
8-6 项目发布
$ v( m! U0 I1 U/ m W
6 E/ S3 G6 i7 m5 ?' C* K第9章 美团APP与hybrid深度结合% Y3 S( U0 }$ x' [2 @
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。* b5 N _6 e; V! q8 a
9-1 JS bridge 原理 试看
; L% H7 Y; w' Q1 P4 `9-2 iOS webview + JS API接口+iOS APP集成
: H1 c+ v) m1 |# G1 O& Z- i( t0 R' V; T
第10章 课程总结. H0 `, q4 H! j9 H
回顾和总结课程讲解内容，能更好的回归和归纳。
6 n6 A+ G% \" ]# n. ?1 I10-1 课程总结9 a# a. r9 z9 k' Y6 `. `
) m; p3 v( W* w8 C
【下载地址】3 ~5 ~. T+ @; Z( e' A* Y: L
/ S1 R1 V% N, b. I: l5 D
4 C- I+ n- g$ L0 M; W
|
[复制链接]
