, y: a" Y a: H* Y+ d' r
6 s% p7 K# [& n# K; F+ y
【课程简介】
6 B# y" {( L+ O本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
s; G, p$ g' K# L, E9 J: {; G- C* m- _8 D" M5 F6 c, w0 G2 u
【课程目录】
9 p6 N3 o+ W: Y第1章 课程介绍4 _/ f/ I# D" c$ G
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
/ @ A# v) W6 I+ O' S% y; C1-1 课程导学 试看7 L5 _! l. J4 I I! a$ ~
/ f u/ M3 Y+ d5 I( G$ h) d& g
第2章 移动web硬知识点; I6 g+ m2 _! h9 u. m
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
, ?9 p2 Q c' B4 U2-1 移动web开发概述1 L* K B, }/ g* [ E- h) ?" @6 f o
2-2 移动web开发调试" e% h* b" k+ o" u
2-3 移动web适配概述9 ^0 O: r3 R/ \. W% q9 w* n" e6 s
2-4 viewport视窗概念
4 i+ |* V2 |, K5 b, e2-5 css3之flex布局) ?- u* a3 q8 q* X& J5 E8 F
2-6 响应式布局和MediaQuery
: L" S, C. Q4 ~5 h2-7 rem,vw布局与适配
a* }0 y1 ~- i& x& o2-8 移动端touch事件详解
) p8 @9 e4 q" w- N0 k( K$ J6 h6 t" B" i/ Q1 d' m6 w5 h1 x7 F2 { f
第3章 移动web软技能; { q& e2 U& O
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...5 ]: K9 {4 R. S9 w ]( t- q$ g
3-1 代码管理工具&项目构建工具简介2 i- ` c+ B' S& @6 W
3-2 webpack工具使用介绍% T$ T1 R, Z1 \: P& Y2 h1 Q+ e
3-3 Sass预处理工具使用介绍# h3 ^# O" v/ B7 [( C" e2 V
3-4 React组件化思想 试看) s! q$ e0 a$ T6 ]# a3 p$ S
- c+ V/ ^. |+ i. L4 o z; {3 ?
第4章 项目开发构建环境搭建
. `% ?9 C+ j8 P- U8 p本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。2 ]1 d3 H) b2 F: Y5 l
4-1 项目和技术栈介绍
5 M" ]/ _4 Q8 U$ d4-2 项目演示' t$ i& G- f$ Z& P1 v
4-3 构建环境搭建（1）, R" {: k# t+ u q- k
4-4 构建环境搭建（2）
& k; X4 G( Q9 W1 u2 _4-5 构建环境搭建（3）0 V& R2 T! ?7 K: K
4-6 构建环境搭建（4）
2 t* @- T4 N9 \" [. |* y4-7 redux-react使用介绍（1）
/ q2 P1 @$ c8 P# U: ?9 H: z4-8 redux-react使用介绍（2）
7 ~% G; {/ E/ X9 [+ O! @6 _' L( r; x- u4 k: U3 I J3 J' H& j
第5章 美团APP—首页开发
" c+ G# V( I+ [+ B! W5 ?, [$ v开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。' B# N* v- q; q9 w6 u
5-1 底部tab按钮开发(webpack-dev-server配置)& E, a, L; c" H& r6 e& m/ P
5-2 底部tab按钮开发-UI逻辑编写（1）$ f: l7 r1 E3 g, c) d! v
5-3 底部tab按钮开发-UI逻辑编写（2）$ g6 y1 \+ x* `$ Y0 V6 z
5-4 底部tab按钮开发(rem配置)
n$ }5 \ Z& o. y4 F2 }: M5-5 底部tab按钮开发(集成ESlint)
5 z( V, b3 _* k- z: B( D3 @$ h4 j5-6 底部tab按钮开发(集成HMR), b2 g7 T" g I2 g$ \
5-7 首页页面开发Header模块开发3 b; ?& G. X. t8 U: ?) n( a% Z
5-8 首页页面开发SearchBar模块开发
$ I" q9 x3 i/ l* b' f# U5-9 首页页面开发-Category模块开发（1）
8 j [- Q+ u5 _' r) r7 @2 |) d5-10 首页页面开发-Category模块开发（2）
) s' {) B1 B5 f* `1 b+ Y6 B$ u5-11 首页页面开发(ContentList模块开发)
, b! a6 U9 W( f8 K6 \6 A" @( z7 \5-12 首页页面开发-ListItem模块UI开发
- Z1 ~: D5 O" v0 o$ ?: F5-13 首页页面开发-ListItem模块样式开发3 d. l( a" H+ d' ?1 b
5-14 首页页面开发-ListItem模块数据渲染开发（1）$ \) [) e7 E; N; G6 p
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
0 H2 z3 W6 h; ]$ T9 [' s5-16 首页页面开发(滚动加载逻辑实现)
* E) R8 L, Q6 P& ~" p6 K8 U5-17 订单页面开发(List模块开发)- T8 d6 d( P. g! D1 l& T
5-18 订单页面开发(OrderItem模块开发)（1）
! p ?7 j4 V9 u- I5 R% F+ \* p5-19 订单页面开发(OrderItem模块开发)（2）
. g) q; f) P* S9 B! I5-20 订单页面开发(公共ScrollView模块开发)0 i" w! o- { o& {9 i6 W
5-21 我的页面UI开发# N) D# f7 H, P1 u* ^2 i. H
5-22 我的页面样式开发
7 n$ Y. t1 G- p! k- x, O5-23 集成react-router
; G. {* `: |* j/ j9 X! I5 `
0 C( {. o- O4 h第6章 美团APP—评价和分类页开发
?4 q+ {% y" I1 s ]开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
U2 z U/ V' T* _3 W" G6-1 分类页面开发(顶部NavHeader模块开发)
+ _' f. p' y1 r6 E: T1 N6-2 分类页面开发(顶部Header tab 模块UI开发)/ {' Z+ b* ~; z( M* Q z5 L
6-3 分类页面开发(顶部Header模块样式和逻辑开发), }# B5 u4 L6 V, }$ U4 ?6 g
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发), S0 Y6 {6 _6 I% E& e* q. D
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现8 l3 t5 C( ~2 P' a) F
6-6 分类页面开发(Filter面板模块样式开发)
4 i& h- N. h: P: i, c( h+ r6-7 分类页面开发(Filter面板模块item逻辑实现)
" R( T5 q R- F& `6-8 分类页面开发(列表List模块开发)8 n; _+ J9 z7 D4 Y" |; z/ r
6-9 评价页面开发(UI开发)! u. ]; o, w H! G2 N6 g% u
6-10 评价页面开发(样式开发)) e$ d! Y* P4 P. l7 ]2 R4 E
6-11 评价页面开发(交互逻辑开发)/ y$ Q, j4 _8 X4 k3 s% m
6 i# l$ X* `0 \/ F. k3 F第7章 美团APP—详情页开发
. k# y; d; u ?: R开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。- \, a# J1 i3 Y, A' }* O6 X$ U
7-1 详情页顶部tab开发(UI开发)
) U" L; C' z* n7-2 详情页顶部tab开发(样式交互逻辑开发)3 D7 P, z1 ]' a% d- q! b
7-3 详情页点菜页面开发(LeftBarUI开发)
1 P$ Y, ~, v9 {7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)1 `. p$ L6 ~' p5 _' V! y
7-5 详情页点菜页面开发(RightContent UI和样式开发)7 E' p4 w" p9 p% n
7-6 详情页点菜页面开发(RightContent逻辑开发)
$ w9 r/ r0 p8 w2 y7-7 详情页点菜页面开发(ShopBar UI和样式开发)8 n; s9 @3 }% ?5 Z3 I" i4 @* o
7-8 详情页点菜页面开发(ShopBar 逻辑开发). k, H& s; N$ U$ ~: `" s
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）' s4 ~( N4 C+ y
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）3 J: D3 `' D# L$ ]( V
7-11 详情页评论页面开发(顶部Header开发)
" Q, A( A# Q9 b# J1 z, g5 _7-12 详情页评论页面开发(列表List 数据绑定)
. n9 i. `7 x6 J% u5 O7 f7-13 详情页评论页面开发(列表List UI开发)
& T2 p; }2 [( @. W7 `$ {/ @7-14 详情页评论页面开发(列表List样式逻辑开发)$ }2 m/ l. n7 @/ o7 ]2 N9 }
7-15 详情页商家页面开发(UI开发)" U0 M2 X+ Q/ f% K
7-16 详情页商家页面开发(样式开发)
3 u( I& `' |/ ?- B2 e9 N
9 u" a$ J& {) g: S* S第8章 美团APP—回顾与性能优化! L+ M+ v' u; s: V
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
7 \! E% V9 @6 M+ \4 p) r8-1 懒加载性能优化& f1 B, `1 A2 {1 S$ T2 b4 L
8-2 JS和CSS公共文件抽离优化8 f9 g; Y. H5 x2 \
8-3 编写后台server读取真实数据
6 M8 A/ V1 ^6 w8 q8-4 多Tab 页切换与滚动数据加载优化6 I" `2 Z: v; f. I" d- l1 K
8-5 项目打包+ x$ r; D5 d( h1 P
8-6 项目发布
3 T$ p( y) f! d" f8 C3 D) x3 @* d. P. u
( m% F$ K/ k+ j3 l, q. H第9章 美团APP与hybrid深度结合0 B8 P: A; m" N8 X
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
4 |& `4 a; \& O$ q+ n. d9-1 JS bridge 原理 试看
0 H8 Q! e$ A2 B) {, R9-2 iOS webview + JS API接口+iOS APP集成+ O3 S' Y# G; S
" ^5 L9 i) v J7 w3 F" a) G* u第10章 课程总结6 l& [0 m% ^5 L9 B- D1 ]
回顾和总结课程讲解内容，能更好的回归和归纳。
$ v Z1 H0 Y8 M+ V: S( B10-1 课程总结9 A+ ?7 T, n% }5 a0 Z# P$ x7 R2 v
* k1 i) T' ^ \' a! M! x9 Y【下载地址】
1 d8 |- T% ?$ t, Y3 c% {+ P6 Q1 ^% z: Y |( u% M1 r# j+ h% e
$ ^( a% ?& E( v$ V0 [ |
[复制链接]
