6 Q& r& C, ^, I( {- i
. f! C' Z& |& I: N2 s. l
【课程简介】
$ j+ F/ P# X3 U本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
! C$ w) o, r% | s4 T @/ F6 U" G' e# k" p, ]& K) l% c' d) r
【课程目录】8 w d. _- n* O* l/ d# G' t8 a4 r
第1章 课程介绍6 P- w3 A- U0 `, ^* I) T
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
# ^1 X2 G7 a# f8 P- T! W( p1-1 课程导学 试看
5 F) K7 Y" T2 D+ v3 H% |6 s5 s0 @# W+ y7 S- B- O# B
第2章 移动web硬知识点
( U2 E& a3 |" k" r8 z- ~; _/ Y* c3 A本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。" V! i Y3 B1 _0 k$ `( M
2-1 移动web开发概述
1 A. A. a/ R% e2-2 移动web开发调试
" j- A1 Z- U2 Z( |2 V5 F+ G: y; ?2-3 移动web适配概述
: W7 W- {6 ~( u* m# O2-4 viewport视窗概念
6 O& L' P8 B0 \4 U5 Q/ A% @5 T X/ R2-5 css3之flex布局
# R; \2 W# Y l3 [ R: Z1 `2 S* g2-6 响应式布局和MediaQuery
( g) A J1 h% l6 b+ x6 M# L: b5 _1 V2-7 rem,vw布局与适配
: S0 L9 s& o1 Y7 t& F1 x2-8 移动端touch事件详解# h- q5 L" _, R
1 G8 j6 g, u1 E C9 l4 ?$ Q+ ~第3章 移动web软技能5 h- F: K/ M' F3 }2 z
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
9 R' q0 I! n- e( P3-1 代码管理工具&项目构建工具简介+ R8 G! V+ M- m2 ?0 \' [# d H
3-2 webpack工具使用介绍, d6 H2 V0 |2 N
3-3 Sass预处理工具使用介绍
+ C8 C# \9 Y1 v; N& v+ ?! e3-4 React组件化思想 试看. f4 E9 D8 W( p/ Y7 c
?$ f. [: s+ l V! b第4章 项目开发构建环境搭建0 w! a$ u2 z9 i2 n; ^9 W
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
% t/ m+ j6 k% K4-1 项目和技术栈介绍
; c* ~+ Z; n9 q4-2 项目演示
6 O' ^* n1 B9 X% @, e( M' G" F4-3 构建环境搭建（1）% ^' r' F; ~' u
4-4 构建环境搭建（2）
' x9 L% I: W! q6 P: `/ [/ _4-5 构建环境搭建（3）
6 c/ [6 I+ K, g+ U) f; u* H( J2 `! W4-6 构建环境搭建（4）
( F% Q' E8 C7 ^$ d3 j5 ~3 ?4-7 redux-react使用介绍（1）8 J5 C! G8 p" }9 E% D2 d9 V
4-8 redux-react使用介绍（2）
+ D2 }2 Y! `, m. ~" b, ^- o% R4 N$ D- F, ?3 @ R7 |# ^
第5章 美团APP—首页开发8 v/ j$ S p" |5 d8 C. L i
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
9 H6 h: h& {' W+ H8 w5-1 底部tab按钮开发(webpack-dev-server配置)
9 e# n7 T) x* Y8 _5-2 底部tab按钮开发-UI逻辑编写（1）
5 e& a8 f1 G3 [! C5-3 底部tab按钮开发-UI逻辑编写（2）5 G; `# r2 e8 i0 q5 t
5-4 底部tab按钮开发(rem配置)
9 P0 n7 K/ e2 @; d- U/ C+ R" g5-5 底部tab按钮开发(集成ESlint), q v" k/ K2 r- ~- l4 | m
5-6 底部tab按钮开发(集成HMR)
8 Y# y, N. @( O' H0 \% W" }: ~3 d* v5-7 首页页面开发Header模块开发
! q/ @* z# u1 D3 Z4 D: G- q5-8 首页页面开发SearchBar模块开发* D4 h7 G& l* X
5-9 首页页面开发-Category模块开发（1）
; B. O2 \3 f- U5-10 首页页面开发-Category模块开发（2）
- M4 k J, O5 O( ]5 [3 f5-11 首页页面开发(ContentList模块开发)
% [* w: I" k' Q1 R# h, m5-12 首页页面开发-ListItem模块UI开发
1 K* @. ^0 x, ?$ b- U' G5-13 首页页面开发-ListItem模块样式开发2 H [6 ]7 a. B! q
5-14 首页页面开发-ListItem模块数据渲染开发（1）* ^0 ~' G. z/ k
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
& p5 v, _6 ^ |! e- A8 [# b5-16 首页页面开发(滚动加载逻辑实现)
! F* ]* m* e! [5-17 订单页面开发(List模块开发): \; T1 L$ s; T* X- c# P; I
5-18 订单页面开发(OrderItem模块开发)（1）
* t8 V) ]' l, [6 L# Z1 h5-19 订单页面开发(OrderItem模块开发)（2）+ G8 \( m+ s) B% S/ ], J6 a. {
5-20 订单页面开发(公共ScrollView模块开发)
, l9 e7 \3 T3 m+ Q) \: u* v5-21 我的页面UI开发
; K- l; y% `2 t& I# @5-22 我的页面样式开发& |4 |7 p8 w7 x; ]
5-23 集成react-router' I. ^8 q K8 y+ Y4 ~+ Q' B8 u9 N' I
( A% K# V: ?* w第6章 美团APP—评价和分类页开发; H1 w1 M4 ?5 K" F
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
- ]2 t7 N7 _, X0 {0 U6-1 分类页面开发(顶部NavHeader模块开发)+ n: L1 u) d4 J3 m
6-2 分类页面开发(顶部Header tab 模块UI开发)
+ Q( p6 D/ U: }( q6-3 分类页面开发(顶部Header模块样式和逻辑开发)
5 n+ J! H/ N0 e+ T6 P' J/ ~6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)! q' i; g5 \% Q% C8 W9 a
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现! q0 M# K/ Y( J
6-6 分类页面开发(Filter面板模块样式开发)
; q5 L$ }6 Q+ P4 @& F1 ?% d2 S/ S4 C6-7 分类页面开发(Filter面板模块item逻辑实现)) I2 e8 b5 x# s: p* Z0 i8 ?2 ]% H
6-8 分类页面开发(列表List模块开发)
9 m7 P8 s7 E+ u- n+ E0 f: F( W6-9 评价页面开发(UI开发)9 o+ y4 B3 w/ f! v0 G4 F
6-10 评价页面开发(样式开发)
/ D/ I5 K( ?# m5 K! F& o) ~6-11 评价页面开发(交互逻辑开发)& E5 x/ @" M5 Q; \7 E# d4 K* V
" B9 e: H; A+ a
第7章 美团APP—详情页开发$ X2 B! c z+ W9 I/ Q% w
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
# V& d- `$ V8 I7 `. Z% o7-1 详情页顶部tab开发(UI开发)
4 O$ b- K* z8 ]1 y5 F) x8 Q7-2 详情页顶部tab开发(样式交互逻辑开发)" `% f' G: H) K+ J% F X
7-3 详情页点菜页面开发(LeftBarUI开发)* X3 c9 g% R! V$ ?4 G3 ~& h
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
6 W, x% W' c0 h2 u1 T7-5 详情页点菜页面开发(RightContent UI和样式开发)
: P5 K7 b& f/ ^( J# d8 P7-6 详情页点菜页面开发(RightContent逻辑开发); z4 d$ y7 U/ s: @- X; y- A
7-7 详情页点菜页面开发(ShopBar UI和样式开发)/ E/ ]) i- z, s0 z! h3 O$ n
7-8 详情页点菜页面开发(ShopBar 逻辑开发)9 K2 s- B- w% x5 _; Y# ?. N- z- n
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
% [$ @" }! S0 V5 C/ o# D7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
m% `5 a$ P& c, }1 q/ @# f; M7-11 详情页评论页面开发(顶部Header开发)
2 W4 C* O& r$ b" Q$ w7-12 详情页评论页面开发(列表List 数据绑定): D; n# b2 S, Z- p# ?/ `
7-13 详情页评论页面开发(列表List UI开发)
; S5 Z" M# B/ {; _! \" ]/ A) f7-14 详情页评论页面开发(列表List样式逻辑开发)
( K& g5 O7 Q5 ^. M a! g6 {7-15 详情页商家页面开发(UI开发)
, T' G% \: |* u/ Q+ O G7-16 详情页商家页面开发(样式开发): `) D, b O9 R. N9 u
6 p* q# {# S E) q; [- C
第8章 美团APP—回顾与性能优化
; L' h- i6 [8 X通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。..., A/ O- o) \. u o
8-1 懒加载性能优化: l% E& R* {4 d- W& g- N5 {, N! Q1 i
8-2 JS和CSS公共文件抽离优化
* O+ q& {7 h( \8-3 编写后台server读取真实数据
' w/ N+ U4 p1 c8-4 多Tab 页切换与滚动数据加载优化
: _( b8 @% z% W7 q `; r4 S8-5 项目打包4 A& w: \3 O$ ^; d1 ^# ^; T
8-6 项目发布* t! g4 |. i- ^4 }9 c
1 L9 `( W% u9 H. T
第9章 美团APP与hybrid深度结合
* {+ i4 d! M, i; b6 e* q2 W本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
* ]# C* H; `) C& |4 h9 s4 W9-1 JS bridge 原理 试看, A2 Z0 Q( j7 b+ r
9-2 iOS webview + JS API接口+iOS APP集成: c) M J+ K/ f5 k( t% r; ?
. G2 d6 z) |* e q* H7 X/ O) q第10章 课程总结5 p' i# \/ P4 k" t4 e- G
回顾和总结课程讲解内容，能更好的回归和归纳。
) M2 q! W# i3 v# i6 ?& s10-1 课程总结
$ X& ^* }3 L4 Q3 V9 t$ U7 ~
. }# q P; Q; q$ Q3 A: @% N8 \3 k【下载地址】
' s. ?, F* q3 M' s* K9 t7 l, X3 M3 s4 e5 a, m8 A
8 `* [6 B) D3 Z; O* P
|
[复制链接]
