$ x6 B. b; {6 c$ t
3 _0 q% l- x& `9 E& B4 u C【课程简介】
]# V! O) h" W/ ^: W本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
1 `3 ^! [2 o, S# Y1 T2 \( |$ D6 C$ ^5 @/ N& ~% v, |. _3 m
【课程目录】6 x- D* `2 E+ k7 k
第1章 课程介绍" Y& u \6 P( f
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
3 Z m6 [$ U# u& W9 j5 n1-1 课程导学 试看
) _) H& u6 i! M& I1 W2 _5 b6 S# w3 n g4 c; _
第2章 移动web硬知识点
( E v6 o) R& \5 }# ]8 C. E1 h本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。! R% V+ I4 l( \, y# ?) H6 L
2-1 移动web开发概述
* Y* M9 a. \0 @2-2 移动web开发调试) |# Y' S; o9 ]1 G& o
2-3 移动web适配概述
) M E( z& a4 k2-4 viewport视窗概念
9 w' l) F" z$ z- |2-5 css3之flex布局) O% k6 P# Y' V# ^5 x$ B/ C
2-6 响应式布局和MediaQuery5 u# Y1 O7 `, O0 A
2-7 rem,vw布局与适配
/ A7 Q8 y; J& k! T1 w2-8 移动端touch事件详解
2 k+ d% y# e% W5 j& T( r- d
. S1 c0 y% V: N, l1 ]第3章 移动web软技能9 L5 J. e& j! m6 t4 v9 b+ _: t$ Y
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
( F! d; J; a6 d" v9 b3-1 代码管理工具&项目构建工具简介
2 O0 V& h7 g; q* @) n- b3-2 webpack工具使用介绍
2 O2 A6 {0 |! d0 Q9 b/ I9 M3-3 Sass预处理工具使用介绍
7 j- ?8 ?0 M0 I3 L$ m3-4 React组件化思想 试看 D7 m/ o! e* t9 W! q. O6 T1 n
4 n3 }2 e$ U! S
第4章 项目开发构建环境搭建
0 y6 r) W) ?( n2 g, q8 k9 v0 I/ [- A本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。: p% f3 L. }$ V+ P$ k
4-1 项目和技术栈介绍
2 d9 `$ m$ E7 k& Y4-2 项目演示/ k! z4 |; d5 ?! c8 E5 I
4-3 构建环境搭建（1）! G$ l4 a, Y- n* y# n
4-4 构建环境搭建（2）' k1 D+ k& W5 x% G- K
4-5 构建环境搭建（3）6 H2 h' Z) q0 Y9 s- ~* o
4-6 构建环境搭建（4）
5 r( L; [+ }; A4 R( ^2 J4-7 redux-react使用介绍（1）; Y$ Z6 K. H$ w5 y l% r5 r( x9 J& n
4-8 redux-react使用介绍（2）
1 h5 \+ l: Q7 R( h+ Y
N) t/ g6 L; o第5章 美团APP—首页开发
! o6 G% V1 [5 Q8 ?# e6 k开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
' g9 e6 e( E' W0 I3 {5-1 底部tab按钮开发(webpack-dev-server配置)
% [, @* \& ^9 _7 W5 x: `+ X5-2 底部tab按钮开发-UI逻辑编写（1）$ D, S( g9 e3 ^0 L8 P1 i
5-3 底部tab按钮开发-UI逻辑编写（2）+ z5 v. X, r( l$ O; S/ Q
5-4 底部tab按钮开发(rem配置)1 o; o* Y9 D8 b) t8 b& I" d
5-5 底部tab按钮开发(集成ESlint)) @, m: R; |) ?% U
5-6 底部tab按钮开发(集成HMR)2 K/ X+ K1 f/ s# v U3 |
5-7 首页页面开发Header模块开发
3 _6 Q5 {) x6 V- q5-8 首页页面开发SearchBar模块开发5 o7 Q: m( O0 h7 z: t
5-9 首页页面开发-Category模块开发（1）
- n2 j. x, ?( z3 ?) K; F4 z5-10 首页页面开发-Category模块开发（2）4 |& o T) n# z
5-11 首页页面开发(ContentList模块开发)) \3 k( u3 F+ H9 H4 A5 O
5-12 首页页面开发-ListItem模块UI开发
) u4 I' l) q: O9 ~& c5-13 首页页面开发-ListItem模块样式开发
0 H) w8 [2 f# J5-14 首页页面开发-ListItem模块数据渲染开发（1）
. q6 ]; m+ A! b; u3 m \4 k3 V5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
& {+ Q. C' x8 B6 k5-16 首页页面开发(滚动加载逻辑实现)- p2 ]6 `1 u+ u" A* ~4 E
5-17 订单页面开发(List模块开发)
/ e& p3 d @$ Q5-18 订单页面开发(OrderItem模块开发)（1）
* q! H9 A3 V' b3 ~5-19 订单页面开发(OrderItem模块开发)（2）
* m( Y- u1 I3 z' G5 z5-20 订单页面开发(公共ScrollView模块开发)& e" B! o1 T- H7 {/ u2 h# [, \
5-21 我的页面UI开发. x* H& [7 q/ e; Y! l; j
5-22 我的页面样式开发
' F7 W% X( ], b5-23 集成react-router% z- R$ Z6 Q6 W! v5 K) C
. w* \/ L. I+ q! V o
第6章 美团APP—评价和分类页开发
7 | s: J! I( v# E. c开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。: R0 j; e; K( s& k" k8 c
6-1 分类页面开发(顶部NavHeader模块开发)" t3 b# [0 w( o. o! q! z& r. A
6-2 分类页面开发(顶部Header tab 模块UI开发)' m: e2 t6 i: m( E' ~: l- S/ E) m
6-3 分类页面开发(顶部Header模块样式和逻辑开发). K# p, G7 O& r j- |7 o9 e
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
& J g- n9 X7 b8 ~6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
0 M& y" x' c$ K4 Y' T/ x2 O6-6 分类页面开发(Filter面板模块样式开发) v4 d# L( B& S/ p7 `' g7 G1 `
6-7 分类页面开发(Filter面板模块item逻辑实现)$ s, j7 R( X5 ]3 X
6-8 分类页面开发(列表List模块开发)- u3 S0 m) l% {
6-9 评价页面开发(UI开发)
0 O3 X5 i. k* x: A: U$ C6-10 评价页面开发(样式开发)
9 U, S0 N6 n' H0 R. d0 U& z( N6-11 评价页面开发(交互逻辑开发)2 J/ [) Q0 g1 E, u$ D4 z3 K
" M- Q, n% S' E* K( ^- r4 e
第7章 美团APP—详情页开发
$ K3 ] v6 R; f; G开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。9 r) k0 U9 Q. D4 I2 j
7-1 详情页顶部tab开发(UI开发)& s! ]7 x: J& B& n$ w
7-2 详情页顶部tab开发(样式交互逻辑开发)2 {7 w( E: u$ L# U6 j* P$ I' p( x
7-3 详情页点菜页面开发(LeftBarUI开发)
9 w. ~6 U2 ^' Z7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
& G9 y7 M$ @' @5 F+ A2 l7-5 详情页点菜页面开发(RightContent UI和样式开发), p3 N1 D. e; P; w+ _
7-6 详情页点菜页面开发(RightContent逻辑开发)
8 n8 c( S, t+ N* a5 M+ p% E2 ~7-7 详情页点菜页面开发(ShopBar UI和样式开发)) }0 z9 q1 r6 d. A ^! Z1 w
7-8 详情页点菜页面开发(ShopBar 逻辑开发) V. i) S0 |* [& o$ ^ V2 a
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
# L4 j4 f* O0 H8 g7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
- A, t8 Z2 s9 X7 f1 h7-11 详情页评论页面开发(顶部Header开发)
( b0 J' M; C2 a" f l* o9 L! ]7-12 详情页评论页面开发(列表List 数据绑定)
& V( J1 {! v* f: m7-13 详情页评论页面开发(列表List UI开发)
( q* V2 W7 h$ B' h- q7-14 详情页评论页面开发(列表List样式逻辑开发)) n$ W8 q+ s* E5 g4 X5 I$ `: \2 a
7-15 详情页商家页面开发(UI开发)! w0 Q: _1 {5 u5 o5 M- m Q
7-16 详情页商家页面开发(样式开发)
6 o3 [# Z3 l& z9 X4 [9 _# k5 J- V* I9 a+ i3 C* T$ y; z
第8章 美团APP—回顾与性能优化1 {: P/ p* j: x% p, v
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...7 T6 R2 M1 a9 f: d) J# F8 x. y9 r
8-1 懒加载性能优化
" g1 J- e/ T) V( _6 f! l, K8-2 JS和CSS公共文件抽离优化% t5 F& Y' [! y) f- v! m* G0 E
8-3 编写后台server读取真实数据1 a; f% l Q1 m. G5 d2 I L
8-4 多Tab 页切换与滚动数据加载优化$ f$ _5 o% K0 W* J/ p' g- `0 X* D9 M
8-5 项目打包
$ b: c5 N. W W. P8-6 项目发布
; c: h3 a, a6 h& j; D/ }* z, ?1 V- R% Z& b* M5 P
第9章 美团APP与hybrid深度结合 E$ R$ ?* W( X' u; b9 P" t
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。. Q, C P& j1 [, _! x2 p! ?
9-1 JS bridge 原理 试看* n1 d0 a5 c' C
9-2 iOS webview + JS API接口+iOS APP集成7 e8 B+ ~2 m% L+ X3 ^$ A, E
4 S& t9 U6 v W9 r* G |2 ]第10章 课程总结
& j; h8 H% _' O( C5 X* J回顾和总结课程讲解内容，能更好的回归和归纳。
+ t( G3 `- V ` [10-1 课程总结( a. g" f2 {: E7 @5 A$ p, _
. o4 {( I' ?0 y9 `4 V2 P* G【下载地址】. X8 \4 h0 j; I3 W
. {8 t' r0 ?" P$ o8 f% h3 t6 O5 l9 a
. P( ~$ Y$ @+ I( @2 Y |
[复制链接]
