* W4 T. V0 o6 Q# t8 ]) J$ y
Y" }- R9 L) o0 d4 Z1 p【课程简介】2 x1 t9 x$ Z/ Z( [# y8 d
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。; N( Q1 A' L! L. [8 U2 |
3 f0 [( V; M8 }9 S+ _: c% X
【课程目录】
) [# ]4 q" G% V; ] r, b1 w第1章 课程介绍
4 Q0 [6 m5 d4 K: b7 T% g6 N- \通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。 x8 K1 U/ Y/ | }% N7 O$ S8 K9 b
1-1 课程导学 试看
# z" e& m, O; v4 \0 U4 _9 ~) C3 @# a7 Q& i/ q5 ]' }
第2章 移动web硬知识点
4 E/ I A- N5 z: j8 u7 M本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。" s+ k# @ L( L: N+ k4 D
2-1 移动web开发概述9 Q0 Y8 \/ c- s+ f
2-2 移动web开发调试9 N5 ~8 F- p* |, S3 n+ _7 s
2-3 移动web适配概述4 k3 W1 u; |7 @9 ]1 `7 j
2-4 viewport视窗概念0 Z& Z& [; ?# I j! I" z/ Z
2-5 css3之flex布局
# I+ M( U4 Y$ J8 p* e6 W& Z+ P2-6 响应式布局和MediaQuery1 r c' @! d% h
2-7 rem,vw布局与适配
* O! L# }0 e S7 @2-8 移动端touch事件详解
+ ?' n7 S% S/ V- \; V. h/ ^/ g& f) R/ X/ S2 H. [/ L
第3章 移动web软技能5 t( C- U/ n7 n
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
0 J8 T' R, t7 A+ X3-1 代码管理工具&项目构建工具简介
/ T9 g7 N- r3 e3-2 webpack工具使用介绍- o3 G0 y. f# m# Q t5 s
3-3 Sass预处理工具使用介绍4 @+ ^9 G9 t; U# v# Y* Y
3-4 React组件化思想 试看
: J# Z/ n7 m# f1 o7 T, V/ {
& O* i: z- V) d9 x) G |5 e第4章 项目开发构建环境搭建
6 P0 t4 m! ^, j本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
1 E R6 Z0 g! B4-1 项目和技术栈介绍
& k5 ~- D+ F" m3 z( g4-2 项目演示/ Y/ ]' C' y4 F' p
4-3 构建环境搭建（1）
: E( c& G |0 r; I4-4 构建环境搭建（2）: P% R4 ]6 U$ L2 B* V8 [6 s/ Y: m
4-5 构建环境搭建（3）; z% s4 B X, J+ L/ {$ l, ?" E" [
4-6 构建环境搭建（4）
" ^! J/ X0 v0 O3 z! h2 F4-7 redux-react使用介绍（1）2 H. F+ h. [) g1 n- @: g1 c# h
4-8 redux-react使用介绍（2）% E4 x' B) a( X9 W0 m) N* V
: A$ g# x" b5 G$ b+ W# L+ f
第5章 美团APP—首页开发
# G/ Q: |9 B0 H1 [1 s& J+ I$ q" `开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
5 n7 \2 y: J: y$ @5-1 底部tab按钮开发(webpack-dev-server配置)& L" n7 E* _' {7 H0 d
5-2 底部tab按钮开发-UI逻辑编写（1）/ d, z" N6 E! y" Q0 N
5-3 底部tab按钮开发-UI逻辑编写（2）
9 x" P* v, C1 _5-4 底部tab按钮开发(rem配置)3 x L& p2 n. r
5-5 底部tab按钮开发(集成ESlint)
; g& M! \& C4 k) |3 K4 d1 t5-6 底部tab按钮开发(集成HMR)1 O0 x* T# n# c' Q& |
5-7 首页页面开发Header模块开发
: {& | o& p/ |+ ~4 S( R/ F) R5-8 首页页面开发SearchBar模块开发
! I, b* A6 `0 O( w$ B0 [/ t7 b# T5-9 首页页面开发-Category模块开发（1）
: V+ s* U5 z1 l% ]5 s& F. {5-10 首页页面开发-Category模块开发（2）
: |2 x& o# T& A0 d' j5-11 首页页面开发(ContentList模块开发)4 f' G- Z, z9 i; q1 P/ \, a
5-12 首页页面开发-ListItem模块UI开发
& X9 Z9 V9 `/ ]5-13 首页页面开发-ListItem模块样式开发
, e- n1 L) r/ R3 Q' ^% L5-14 首页页面开发-ListItem模块数据渲染开发（1）
0 I* F' p* J. S! M4 r) U8 ^5-15 首页页面开发-ListItem模块数据渲染开发( 2 )) j0 Q4 f; g% v; X# w" ?
5-16 首页页面开发(滚动加载逻辑实现)- V5 v6 I; }" S) M* ]* ^; h
5-17 订单页面开发(List模块开发)! _0 B. k3 f$ A0 v
5-18 订单页面开发(OrderItem模块开发)（1）
6 g0 r$ h9 A3 v" {2 X5-19 订单页面开发(OrderItem模块开发)（2）" Y! M* F6 s) d, G2 x
5-20 订单页面开发(公共ScrollView模块开发)/ U' r y! }; Z& v
5-21 我的页面UI开发
9 @8 @ r. \. o5 z, W5-22 我的页面样式开发
) T6 K. x! q( X: s @+ k5-23 集成react-router
# w2 }. Q% j. l, a0 N% D# I: W3 `0 \" {; j G
第6章 美团APP—评价和分类页开发" \$ N! R. E6 g2 I- v
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
4 C4 A( g& g. X% C& A# ^1 E# |1 b+ B6-1 分类页面开发(顶部NavHeader模块开发)
6 D. G7 w3 S2 l& n \3 i8 U1 a6-2 分类页面开发(顶部Header tab 模块UI开发)
6 t8 M2 C$ w: I6-3 分类页面开发(顶部Header模块样式和逻辑开发)
( _, {9 {1 Q6 }" K0 k) C( T6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)5 n3 g! t7 s/ Z/ X
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
4 U/ \/ h/ Y% }0 Z4 R6-6 分类页面开发(Filter面板模块样式开发)2 y `5 Z; P$ Q: M4 |
6-7 分类页面开发(Filter面板模块item逻辑实现)5 T; |' ~' U$ U2 h! F g
6-8 分类页面开发(列表List模块开发)
. _5 |$ j4 I/ ^: B2 V6-9 评价页面开发(UI开发)
- P! t0 t$ |& l5 c& l4 q, \; I, T6-10 评价页面开发(样式开发)3 p8 c" T4 |/ N. [" z. t3 U
6-11 评价页面开发(交互逻辑开发)& D+ x- P2 T5 Q3 D
+ C: Y! b' _. ]/ l& P第7章 美团APP—详情页开发; H1 F( l' X8 m: R6 S) S
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。( ~; K8 R( E; q' x6 @3 a) O8 l
7-1 详情页顶部tab开发(UI开发); e$ a/ |$ Y/ }) N" Z! x& @
7-2 详情页顶部tab开发(样式交互逻辑开发)
3 U, L; l: i1 W! y7-3 详情页点菜页面开发(LeftBarUI开发)% s2 F. [9 s. q( B+ D
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)) @% V7 v4 R$ O! [8 r h9 {
7-5 详情页点菜页面开发(RightContent UI和样式开发)! {) d9 W# h5 U' b3 y, J7 I; h$ f5 l
7-6 详情页点菜页面开发(RightContent逻辑开发)
9 I) L; y- l3 @# i7-7 详情页点菜页面开发(ShopBar UI和样式开发)4 b4 W$ O% }; |8 l$ V
7-8 详情页点菜页面开发(ShopBar 逻辑开发). t" L, L5 E, n, Q
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）7 @; f, S7 y* m4 m8 T
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）& ]. y9 S/ n9 l( A; e
7-11 详情页评论页面开发(顶部Header开发)
% Q9 x/ W' l7 J; U* k0 y7-12 详情页评论页面开发(列表List 数据绑定)
6 Y" M% K- V7 W7 P9 ^7-13 详情页评论页面开发(列表List UI开发)5 O/ [, d& h" V( R
7-14 详情页评论页面开发(列表List样式逻辑开发)
" p' P: J0 L: P5 f$ a) Y9 Q7-15 详情页商家页面开发(UI开发)' q0 ]1 o; U; H% T6 c' N$ O7 T. p; Q5 T
7-16 详情页商家页面开发(样式开发)9 D2 N3 W' w# H) { j2 ]
" \/ k8 R/ p- U6 s$ Q* A
第8章 美团APP—回顾与性能优化! u( h" h& e% y7 w" [5 g
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...7 P0 O9 e- o: f( Y( k }: w
8-1 懒加载性能优化
; K! j" s" O0 m8 |0 R$ Y- h8-2 JS和CSS公共文件抽离优化
( D7 g( R" o9 _9 o8-3 编写后台server读取真实数据# O8 s G( k' |3 q/ c& v
8-4 多Tab 页切换与滚动数据加载优化
2 u% ?: X1 w3 ~! [ }& n$ z3 u8-5 项目打包& s9 Z$ p, z5 H% @! W& x) Y; K
8-6 项目发布
2 r, S C5 T) n" J; u9 M
1 d* ^1 \+ e! h第9章 美团APP与hybrid深度结合" q2 f! a$ S, n& t
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
S7 S$ [. b4 f U9-1 JS bridge 原理 试看! n5 e+ @2 r1 n6 B
9-2 iOS webview + JS API接口+iOS APP集成) V- d9 N0 o$ t) p# e
8 y, d: ]. S1 P# H V& q
第10章 课程总结! q U. ?8 t! H9 p* B8 f N
回顾和总结课程讲解内容，能更好的回归和归纳。4 R) o5 z4 ^0 G
10-1 课程总结$ U+ U& X' L) ~. O$ V1 N
V' I" X; d& r【下载地址】
9 l }; H5 ~4 d$ p3 r- ]; ]+ u( j$ M' S2 l" B2 B
8 |& j; P' B' c! {# S
|
[复制链接]
