+ H5 ]4 Z _+ i; j; o
8 Z5 l9 K% E+ e3 j
【课程简介】( f* \; D. o" ~
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
4 R! K% E4 H; A0 t7 G0 V2 N# g1 ~1 r3 R& p' S' e
【课程目录】
8 y. Q7 L! B# r1 [第1章 课程介绍2 o @. W# H* s6 d$ P! U
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
! ]6 S' \. c8 b% a( j1-1 课程导学 试看$ G! N; {" g: r# L' \- Q
* g# X! m. Z' V9 j/ k6 ^
第2章 移动web硬知识点) Y) X) h3 b8 b& m/ D. `
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。! W; J0 R" Y3 \5 e! n3 C& C) c/ S
2-1 移动web开发概述% J; j6 D- y. u; W6 E7 i
2-2 移动web开发调试- j" ?" T8 Q$ ?' S
2-3 移动web适配概述' ^2 q* i. b) M( ^" x9 r
2-4 viewport视窗概念/ u+ r- ]4 C6 K( {
2-5 css3之flex布局
5 {3 m1 `, ^% I% g& W# z8 V2-6 响应式布局和MediaQuery1 F/ |8 _0 d8 }
2-7 rem,vw布局与适配
! A" G, L3 G; |* G; k2 C2-8 移动端touch事件详解
V: @$ X1 i( u$ e& ?* q* D) T& A3 O p8 Y/ _$ }: C
第3章 移动web软技能
& K) B1 K4 D/ }' w5 v6 K& n- Q本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...$ [8 ^! @3 ?1 T8 {2 n
3-1 代码管理工具&项目构建工具简介
2 S. w3 n* ~7 G) _( x' }, A3-2 webpack工具使用介绍
) w+ T7 {; ]4 S) W& b+ @7 L* D3-3 Sass预处理工具使用介绍
0 H. D0 A$ J" X! C8 R3-4 React组件化思想 试看
" P5 |, T5 Q$ Q, A! I/ M# J! Y1 n9 H
第4章 项目开发构建环境搭建
% i/ R2 v- n- x! L1 K7 u本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。 i; A$ ]5 x7 x0 i& J4 @
4-1 项目和技术栈介绍0 O7 d0 t3 |- @
4-2 项目演示
+ R" I$ b+ R7 |4 g( s& r4-3 构建环境搭建（1）
: ?5 T) z9 ~6 `4-4 构建环境搭建（2）" c8 J' p: w, ?" j8 Y! H& \3 B- P
4-5 构建环境搭建（3）
* I; ~# I0 k" w4 u4 _5 u! o: j* l4-6 构建环境搭建（4）9 ]; P' c7 O ?- n# J! \
4-7 redux-react使用介绍（1）
" M; [& q! N7 _* Q# |, O4-8 redux-react使用介绍（2）
) b8 o, [" c$ S- w |6 I+ V2 y8 }& y
第5章 美团APP—首页开发# Q7 w4 B+ Q( k. P0 \1 @% z
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。9 H: {, `& ^: x( r
5-1 底部tab按钮开发(webpack-dev-server配置)
) Y; L" V6 P0 y1 }5-2 底部tab按钮开发-UI逻辑编写（1）; |" ]5 C- z3 m0 b6 \3 t* b
5-3 底部tab按钮开发-UI逻辑编写（2）
5 d8 n" F# w# U+ V5-4 底部tab按钮开发(rem配置)) ]! t/ H, Z2 l- a9 S9 B
5-5 底部tab按钮开发(集成ESlint)
- n9 r! m4 B9 U/ T5-6 底部tab按钮开发(集成HMR)1 i% N8 N# t# n. O9 R
5-7 首页页面开发Header模块开发3 y4 n8 h4 o' i: c& q$ L
5-8 首页页面开发SearchBar模块开发
$ {5 w# O7 c- X$ m* P0 U5 o. Z5-9 首页页面开发-Category模块开发（1）
: ~0 v6 [6 y C' Y: U5-10 首页页面开发-Category模块开发（2）% m8 n" @: U8 ]+ C
5-11 首页页面开发(ContentList模块开发)
( X/ m' @0 z2 k, @) ?% m: g% C5-12 首页页面开发-ListItem模块UI开发
1 a8 y6 L! i5 }8 K7 H! N5-13 首页页面开发-ListItem模块样式开发
! x5 v9 R/ y+ F3 X) R( d5-14 首页页面开发-ListItem模块数据渲染开发（1）# f5 S5 q& S4 K- x0 L' o3 v5 R1 L
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )" d) I5 l) i$ Y' B' p- b
5-16 首页页面开发(滚动加载逻辑实现)
0 R! C+ P0 e; f9 N5-17 订单页面开发(List模块开发)
; ?2 n q5 K! |2 A5 F& l8 j5-18 订单页面开发(OrderItem模块开发)（1）
% R5 v8 o0 ^# X- r5-19 订单页面开发(OrderItem模块开发)（2）
& I) M/ u3 i. g) W5-20 订单页面开发(公共ScrollView模块开发)7 h6 Q+ D7 x, M0 b' R
5-21 我的页面UI开发
1 j' s' ^" B5 M5-22 我的页面样式开发
& W+ ?" y) H T( j2 o7 l5-23 集成react-router0 a- r7 f8 u3 t- _ K
2 G2 j) I. ^% R5 K0 x! x
第6章 美团APP—评价和分类页开发4 M2 M0 K* g0 ~- Y5 G4 M
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。* F8 a; c. r j; r6 C7 w
6-1 分类页面开发(顶部NavHeader模块开发)
0 e. @$ X& }6 y$ M6-2 分类页面开发(顶部Header tab 模块UI开发)
4 R; r, @' M: I* I% Y7 j5 l' F& A# L) J6-3 分类页面开发(顶部Header模块样式和逻辑开发). q5 s% {5 X$ S- ]4 I& i
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)% K8 I; W. r/ V+ B0 [ q1 A- [
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
3 a: J2 X4 z+ Z. c9 F' T6-6 分类页面开发(Filter面板模块样式开发)! U0 O! ]& b' W, s# l# n
6-7 分类页面开发(Filter面板模块item逻辑实现)
* [8 l9 @: d C. K6-8 分类页面开发(列表List模块开发)
0 A" h" W9 T+ [2 G6-9 评价页面开发(UI开发)- a, j/ w) L. T; c* M+ k" u8 l* _
6-10 评价页面开发(样式开发)
6 O) |1 R% ]+ ]2 T; Q6-11 评价页面开发(交互逻辑开发)
2 ~6 |! d+ p# o" P; a! Z8 [4 X
7 M& U0 D) f! x3 j) A- x e6 J第7章 美团APP—详情页开发
' b( T8 L9 \ G4 h0 ^开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
+ e3 {( G! k5 S4 [7-1 详情页顶部tab开发(UI开发)1 ~/ h& v" ^0 R# o6 G
7-2 详情页顶部tab开发(样式交互逻辑开发)
$ v' _! Z$ k! o, S4 B; _. S7-3 详情页点菜页面开发(LeftBarUI开发)) O) A8 Q$ y1 t( R R3 s
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)! p# ^- K8 C1 P/ F5 i
7-5 详情页点菜页面开发(RightContent UI和样式开发)
- u9 S8 i7 k, X r- J I R7-6 详情页点菜页面开发(RightContent逻辑开发) A" q( K! ?. _- P. F
7-7 详情页点菜页面开发(ShopBar UI和样式开发)7 X* S1 n8 P5 L2 I
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
8 r: ?' [7 a- O6 |7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
1 T+ F" Q0 r" V) a* D3 T7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）7 U' l% p& ^6 k) h
7-11 详情页评论页面开发(顶部Header开发)1 q- ?: \( s' l0 ?) |
7-12 详情页评论页面开发(列表List 数据绑定)+ _2 Q& I4 J! ~
7-13 详情页评论页面开发(列表List UI开发)
0 i# Q! r1 `/ b: r" b F& O7-14 详情页评论页面开发(列表List样式逻辑开发). d( F' y6 E S7 J
7-15 详情页商家页面开发(UI开发)3 c! @8 m7 ^2 E/ S3 v# T
7-16 详情页商家页面开发(样式开发)* I( {6 T" [, V) X: V
0 q$ k5 @6 \ Z2 \- K
第8章 美团APP—回顾与性能优化
3 i0 i4 w# s$ d" G0 D7 K7 i通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...( M" i9 ^# }: F. [
8-1 懒加载性能优化
, @0 M6 g; F/ V: I/ v) l0 t& Y& k8-2 JS和CSS公共文件抽离优化
9 Y I+ y1 `8 N& x/ O+ j4 x% c8-3 编写后台server读取真实数据1 f; m# ^: O; X* i/ f: l9 B
8-4 多Tab 页切换与滚动数据加载优化2 o( p* [! Q5 T
8-5 项目打包# O: [1 B5 k! N7 C8 [9 }; g) S& N
8-6 项目发布0 s4 J) h+ Z% N* x
! T, x0 S3 q, L第9章 美团APP与hybrid深度结合* s/ u8 t2 T0 P2 P" e' _ X/ y2 Y! K
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
* V! h. m% H5 p& Y9-1 JS bridge 原理 试看
' t4 E6 u% u/ u- x2 @9-2 iOS webview + JS API接口+iOS APP集成9 {( C! W4 d7 M& l& }2 |
* i3 J2 v$ E. H0 `7 N6 K$ c9 h! Z: B
第10章 课程总结
5 E5 |8 V( l0 l+ Y6 D回顾和总结课程讲解内容，能更好的回归和归纳。0 U$ t/ P: L- O8 M$ Z) @
10-1 课程总结
( {+ Z9 ], L O$ ]+ Y) e2 \* }8 s o( j
【下载地址】
! t" ?! B C# W! r- G2 @7 X* d+ [0 ?& ^7 l4 B6 L
1 U4 i7 z, K! K O) K0 H
|
[复制链接]
