8 X; y7 Y' o+ r0 p& a
: M7 y) q( W3 p b4 Q( J! e' i, T
【课程简介】
- j4 B a4 S% a+ p, ^- Q1 h2 v本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
1 g( u4 Z6 |7 E& m3 S
& N) K K8 q7 b5 L2 R/ n【课程目录】
: _: N; y+ c/ G, V. y第1章 课程介绍! u, r1 V; y3 w5 H
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。6 M7 t' J9 d/ u
1-1 课程导学 试看9 i: s0 F& ]( Y7 w
& Z5 m' q4 k8 F1 E+ D: }' {
第2章 移动web硬知识点
% _# e, k) Q* R0 t7 g$ I% |2 e本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
/ D3 O4 ?3 V0 ?- q8 ?# c2-1 移动web开发概述+ ?/ K" ?+ ?8 |. j i
2-2 移动web开发调试
; ?3 Y( [4 G# ?4 a% d$ F7 v2-3 移动web适配概述( S* g+ |5 |) O& L: T
2-4 viewport视窗概念8 Y* I/ l5 u2 u3 g8 A; L4 W! ^
2-5 css3之flex布局% O( \" s R$ A4 u/ s3 }5 n
2-6 响应式布局和MediaQuery$ c5 @% I1 T' K& M/ w6 B1 c
2-7 rem,vw布局与适配: [3 H- F. M# @) J) i( g. U7 Y
2-8 移动端touch事件详解
" {- J+ p' `( o! O# M0 I
/ ?5 c, m- K5 \1 r; `* e第3章 移动web软技能0 K5 A( k* ]7 C; V9 o; F: G" k
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...' o4 g9 s; O7 s# j
3-1 代码管理工具&项目构建工具简介
" z6 X9 B0 d' X; @' R$ D1 u& [3-2 webpack工具使用介绍
6 G$ d( Q, W0 l: g7 t* Y% U5 e8 J W3-3 Sass预处理工具使用介绍
9 Z6 _% j3 e" z6 ^# @5 b3-4 React组件化思想 试看
' A: s4 w7 h' h- m- V7 O3 G$ S' t* L, L+ E
第4章 项目开发构建环境搭建1 s$ K6 F* Q: J. N2 @
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。( m# a$ A/ ~; k z" y4 ~
4-1 项目和技术栈介绍
8 l+ K7 G; [- ~+ q+ h* J+ q4-2 项目演示. q3 J1 b5 A% _2 B/ B7 C
4-3 构建环境搭建（1）+ `. d) x- Q" \/ q. A
4-4 构建环境搭建（2）
) [# h* H, V9 Y6 _4-5 构建环境搭建（3）/ J: a; o# W4 |, R) a
4-6 构建环境搭建（4）9 ?5 a8 I- R3 W" U/ L! _
4-7 redux-react使用介绍（1）
$ Y" h- e l7 N1 L4-8 redux-react使用介绍（2）7 q# U+ n4 d& P/ L# A" l
: V" G9 R/ b5 X! A1 r7 K! s, }第5章 美团APP—首页开发 v# {6 C4 ?* r9 r& T" u z
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
( g7 Q$ q# t1 ?+ v7 M E5-1 底部tab按钮开发(webpack-dev-server配置)
% j/ n% L( v! M6 W( O/ {6 A/ F5-2 底部tab按钮开发-UI逻辑编写（1） h4 p* I3 H! z# K1 P' e; t) G! O
5-3 底部tab按钮开发-UI逻辑编写（2）' l6 ~' J3 B/ k: [1 u. e5 ?
5-4 底部tab按钮开发(rem配置)
/ \, S3 e2 I2 w+ H5-5 底部tab按钮开发(集成ESlint)
- d/ `6 l) V/ R% ?6 ^0 U: P1 {5-6 底部tab按钮开发(集成HMR)5 r$ t+ F+ d0 h
5-7 首页页面开发Header模块开发
- Q9 O/ r, ?/ t5-8 首页页面开发SearchBar模块开发
& a9 h+ Z, z/ u: r" O% y5-9 首页页面开发-Category模块开发（1）
* c# V0 M4 u5 H9 C% `0 |' }5-10 首页页面开发-Category模块开发（2）" h8 @" [* i: b3 D. P; F
5-11 首页页面开发(ContentList模块开发)
% ^( ?6 P) H' u* p* m# z$ w8 n5-12 首页页面开发-ListItem模块UI开发3 [6 ?. }' n$ ~$ E
5-13 首页页面开发-ListItem模块样式开发- ~! C' c/ I3 I
5-14 首页页面开发-ListItem模块数据渲染开发（1）
; `& h: n6 f2 {0 B5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
- D3 R. M7 i. p. A$ t5-16 首页页面开发(滚动加载逻辑实现)
$ |5 A: Q0 Y O' W5-17 订单页面开发(List模块开发)9 b8 o3 E& g& l+ }. [- D
5-18 订单页面开发(OrderItem模块开发)（1）* P* L0 u3 d- D. J5 ~4 D: D
5-19 订单页面开发(OrderItem模块开发)（2）
" T4 h" E+ N7 O: w; p0 N7 V0 Q5-20 订单页面开发(公共ScrollView模块开发). L! O! w% L; P8 s, I
5-21 我的页面UI开发. S W f& l+ d9 x4 H; l
5-22 我的页面样式开发# y7 l# n6 K" q9 j0 d
5-23 集成react-router, A, R0 a- _' \) B+ B
& c$ i1 J7 a7 V4 m2 g
第6章 美团APP—评价和分类页开发
/ ~+ F6 B; ^ I) f开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
9 H( `. X. O& a; Q# x. H, K0 i+ w6-1 分类页面开发(顶部NavHeader模块开发)* Q1 X n7 E+ } t2 F; Y" S ]9 @
6-2 分类页面开发(顶部Header tab 模块UI开发). G. ^* e# t1 S( L
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
* C3 P3 ^/ B7 [* @" `) B6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)7 g# s$ C% j; @0 p8 X
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现9 G, W7 G! p7 Z
6-6 分类页面开发(Filter面板模块样式开发)
' g" A* W" D% M7 z" m6-7 分类页面开发(Filter面板模块item逻辑实现)1 u6 A/ `& G( H3 X1 g5 n
6-8 分类页面开发(列表List模块开发)9 f. q8 D% F2 u. j
6-9 评价页面开发(UI开发)
. i: [; U1 Y6 k2 Q; I# Q: `8 ^/ K( Y# Z6-10 评价页面开发(样式开发)
0 G, j/ ^* A$ g! ]- g6-11 评价页面开发(交互逻辑开发) J8 A$ y4 `% \( b
3 ~% }, \( z1 N7 c+ p! R5 H/ \第7章 美团APP—详情页开发
7 ~# L$ X: V/ G9 T* V5 s开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。 \( D" v* S6 }* h6 ? O$ f
7-1 详情页顶部tab开发(UI开发)
! [* L* S0 V8 }8 Y5 u; u7-2 详情页顶部tab开发(样式交互逻辑开发)
4 j$ U: s* M) W: a7-3 详情页点菜页面开发(LeftBarUI开发)5 }+ `$ k8 S) f. _* q9 r; E
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)5 J0 n# c# ^6 ?4 ?6 c2 Q* f1 U
7-5 详情页点菜页面开发(RightContent UI和样式开发)! W( t/ u0 q5 D+ f3 p& g& x5 @7 Q
7-6 详情页点菜页面开发(RightContent逻辑开发)
, e) e- B2 S$ r4 l" ~ u' X7-7 详情页点菜页面开发(ShopBar UI和样式开发)8 O# T. e5 J) d. j. b4 ?: X
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
. T! T# b7 @! o2 r0 E+ V5 K0 H7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）* k6 v' T% u, A' Q$ ?; l: d
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
( r7 E6 ]/ K& D0 _, i7-11 详情页评论页面开发(顶部Header开发)
" S1 N+ g2 |/ n) p# _7-12 详情页评论页面开发(列表List 数据绑定)8 A- m7 i$ f6 @9 H/ r& S% u9 Y5 F1 e
7-13 详情页评论页面开发(列表List UI开发)% U1 Z# {) X2 J
7-14 详情页评论页面开发(列表List样式逻辑开发)$ e1 m8 x$ J: e1 O0 p/ X) y7 B8 z
7-15 详情页商家页面开发(UI开发)
3 F& T( m: t3 Y# b9 _7-16 详情页商家页面开发(样式开发)1 K, V7 _* [, y2 I
7 i1 }7 E& c# j$ Q$ k* h第8章 美团APP—回顾与性能优化% J/ z& c+ G5 x
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。..." B. }0 X$ ], _) b# T8 S4 h
8-1 懒加载性能优化' R2 |* F8 d& g- U# K
8-2 JS和CSS公共文件抽离优化! s, o. J3 O1 Q- L3 p2 _
8-3 编写后台server读取真实数据
& [- d+ z* R: M1 c8-4 多Tab 页切换与滚动数据加载优化
& A$ v& p/ B( `3 I& ~8 z8-5 项目打包' w& I4 @& o1 O
8-6 项目发布
+ _1 ^$ i* { }6 T' p- U7 ` n% B6 z2 M/ e
第9章 美团APP与hybrid深度结合
0 P5 E) W: K. c# v! z+ s# L1 ?本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。5 t( X/ S% s! c9 U* r8 m: G5 ~5 n2 i7 @
9-1 JS bridge 原理 试看
/ {& m/ c; T3 k d, V7 i9-2 iOS webview + JS API接口+iOS APP集成. W) u6 X" w) P. ~6 t
* O& }, z) u+ w0 v# K. k' u/ k第10章 课程总结$ Z f( F! }- K) U* |0 h4 S# ?
回顾和总结课程讲解内容，能更好的回归和归纳。
: l2 Y* {6 j/ ~4 b. L' Q2 r' L4 Z" U( f10-1 课程总结
+ k. Z+ t) i0 g8 i1 b
. v" I/ ?( a: G【下载地址】) @0 e' C7 j2 B; o! B8 f q
0 T; Q6 K$ C5 `5 d
& ?8 C' k+ i! C2 f) _7 C |
[复制链接]
