3 ~! x* X" B1 i. {
8 w, c1 |1 {5 }# J& @- i【课程简介】
. {, v' K% d7 K1 `( B5 d, Y本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
& e* b( N0 A: l4 O2 w8 b, A4 l! b( e5 ?% ?
【课程目录】& Q6 h: ]0 X2 @. {0 ]3 t0 j
第1章 课程介绍
+ C. j P; R& u8 C# e! _5 M# M; i通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。3 t: c; L8 `; [0 B Y4 V
1-1 课程导学 试看3 n1 u! a* N \6 v% ~
* f6 @. T1 @9 i O2 l
第2章 移动web硬知识点
0 ?9 Z/ v8 H' F& t5 e: u8 n, a本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。- r) `% @ x/ f+ m# T
2-1 移动web开发概述" |+ e/ d6 e" `. b4 D* t! e
2-2 移动web开发调试# R% Z: T% h: H& t5 \& }
2-3 移动web适配概述* n6 r$ Y" v' l% x
2-4 viewport视窗概念
$ {3 F8 E5 r1 _" u+ D) r# @% @2-5 css3之flex布局6 o \! P! Y! K" B
2-6 响应式布局和MediaQuery9 i- D% p+ I) g- q, t) w" |6 v6 z
2-7 rem,vw布局与适配/ A6 ]) ?, Z k b, z8 R
2-8 移动端touch事件详解6 K8 `/ r/ x v e$ ]
: z8 ?# Q' g ~. |
第3章 移动web软技能+ v3 j$ r9 I. |* ~, R* w
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
) {1 v3 v/ |* `3 a, a3-1 代码管理工具&项目构建工具简介. H+ w% I/ w- P0 ]1 R
3-2 webpack工具使用介绍9 S: x6 X" e# s3 b
3-3 Sass预处理工具使用介绍( R3 i) i: g( b# O9 b5 Q- ~
3-4 React组件化思想 试看5 e2 x1 l1 ~0 y1 A0 U
% W6 X+ m$ k# C: G2 y( ]% e第4章 项目开发构建环境搭建5 X% w) f, P8 j" M$ D9 k$ ^2 }
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
2 _0 \! ?1 s1 i5 b3 `) N' y4-1 项目和技术栈介绍1 X- e# d) A6 b* y* h. B2 {
4-2 项目演示
! ^1 \+ n, `# U4-3 构建环境搭建（1）& J3 y0 B8 o% w5 @2 \; d* I
4-4 构建环境搭建（2）
$ ^& v2 n/ b3 i4 {( Q% g! b4-5 构建环境搭建（3）
& Z# e1 E+ H; a% D* Z4-6 构建环境搭建（4）& t4 l' E" J7 [6 u8 W# Z. p! \
4-7 redux-react使用介绍（1）
, A+ H% n& A6 u9 T6 k* \, b4-8 redux-react使用介绍（2）
! j/ I4 g6 S1 \) n0 U3 I. d' _: i/ U7 W% w
第5章 美团APP—首页开发/ f; F8 R7 w1 V
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
1 |' Y, ?% a9 g& f5-1 底部tab按钮开发(webpack-dev-server配置)
5 m5 p) [9 M- i* z9 e) m, o B$ W- }5-2 底部tab按钮开发-UI逻辑编写（1）
( Q! ]+ g2 [& w5-3 底部tab按钮开发-UI逻辑编写（2）- J1 u& ]$ s" q) Z% ^2 {
5-4 底部tab按钮开发(rem配置)4 T$ l1 E! l9 z( W
5-5 底部tab按钮开发(集成ESlint)
& o( K; S3 N& u @, ~5-6 底部tab按钮开发(集成HMR)( f. @+ i4 _; l" R6 J- V
5-7 首页页面开发Header模块开发9 t& I. e8 G/ @; ~; A5 s. w' |
5-8 首页页面开发SearchBar模块开发
6 ?0 K0 ~& u4 E2 B: ]$ T9 p5-9 首页页面开发-Category模块开发（1）
) v6 U3 T) z3 X- L/ J- p5-10 首页页面开发-Category模块开发（2）' @) @, x* f* `+ r! S! R& ?
5-11 首页页面开发(ContentList模块开发)
3 l$ q; {1 R @. _( K5-12 首页页面开发-ListItem模块UI开发2 D! z. R" [0 d7 p( k7 Z6 F$ @* I
5-13 首页页面开发-ListItem模块样式开发( Z& N% `. r% ?1 Y$ y; a$ x
5-14 首页页面开发-ListItem模块数据渲染开发（1）0 T3 c6 \* n4 V" L
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
+ V# \. J+ G( ^, D9 T5-16 首页页面开发(滚动加载逻辑实现)! T/ }0 `. e0 q0 c( N
5-17 订单页面开发(List模块开发)
6 V4 \+ J k+ z# B/ ~4 o5 Z- {1 U5-18 订单页面开发(OrderItem模块开发)（1）
, r3 t6 Y% N- S: b5 Y6 d5-19 订单页面开发(OrderItem模块开发)（2）
" @ [( q6 L0 H! M5-20 订单页面开发(公共ScrollView模块开发)
3 `0 F1 f0 D. @/ m5-21 我的页面UI开发
6 I0 R1 e3 l2 j r P2 `" U* b( g9 v6 x7 f5-22 我的页面样式开发, M& o* g1 ~ v* I
5-23 集成react-router
3 E% m: _% \) O0 |6 m
% W. x, ], c9 J J$ E8 I第6章 美团APP—评价和分类页开发
6 f% m0 e: Y8 g; b( {! m开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。5 @6 h- n! T1 W! v3 V1 g$ r
6-1 分类页面开发(顶部NavHeader模块开发)
$ M7 F' ]9 G* c* j9 v1 f) K6-2 分类页面开发(顶部Header tab 模块UI开发)' @6 D; l9 Q2 B$ d& |
6-3 分类页面开发(顶部Header模块样式和逻辑开发)2 d8 A- S( ?4 L3 W* k& o
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)4 e2 B0 x0 o F
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
3 Z% \ l6 V% r. M2 a6-6 分类页面开发(Filter面板模块样式开发)% r# n" b3 F$ B9 M$ [
6-7 分类页面开发(Filter面板模块item逻辑实现). n* p- W8 J8 h9 ]/ t+ ?
6-8 分类页面开发(列表List模块开发)
8 C: H8 e/ t, A$ I/ y6-9 评价页面开发(UI开发)
" @5 e1 I+ D* l: v6-10 评价页面开发(样式开发)
7 Y2 n: U6 o, Y0 s2 _/ ^2 m% v6-11 评价页面开发(交互逻辑开发)
3 y5 T4 U/ i( f* r# C& \5 J7 r/ F8 D
# c z" c7 i9 Z6 q) S- a3 ~第7章 美团APP—详情页开发
: A! W8 U2 o# x* R开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
9 `6 [* o; }( ]7-1 详情页顶部tab开发(UI开发)8 X& y5 I4 _# n j! \$ _; w y8 V
7-2 详情页顶部tab开发(样式交互逻辑开发)
5 c1 }: J) A8 f0 B3 j* p7-3 详情页点菜页面开发(LeftBarUI开发): K( d! S; t; U2 X4 L" D7 s% n
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
3 q# M) l5 G; X. E l7-5 详情页点菜页面开发(RightContent UI和样式开发)
! c$ X% n8 N9 e2 X' I4 B" s7-6 详情页点菜页面开发(RightContent逻辑开发)& f2 {! [. [- X6 }
7-7 详情页点菜页面开发(ShopBar UI和样式开发), j0 h( v7 Q" j A3 A
7-8 详情页点菜页面开发(ShopBar 逻辑开发)/ w6 O9 k; _+ O2 [/ m
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）. ]! O! C0 v: Y; b @
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）, g: J( L. [( @
7-11 详情页评论页面开发(顶部Header开发) e$ L6 O' _) Q0 ]
7-12 详情页评论页面开发(列表List 数据绑定)) I9 b+ H3 @& c; i1 Q
7-13 详情页评论页面开发(列表List UI开发)+ D5 Z$ k5 r1 ^5 Z4 t4 k
7-14 详情页评论页面开发(列表List样式逻辑开发)8 E: E* z* a; A! U- m
7-15 详情页商家页面开发(UI开发)
; C' D. x6 K4 ]7-16 详情页商家页面开发(样式开发)- Z* L- {: K4 Q, w" w) B
y6 b1 I! g; E; _) n8 g第8章 美团APP—回顾与性能优化3 J! H+ m3 _7 _3 ]. v
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。..., P9 n/ c1 a. m# [* m7 v
8-1 懒加载性能优化
1 v- c3 v3 f% ~8-2 JS和CSS公共文件抽离优化! \3 Q5 Y/ N4 F! i& R+ `# q
8-3 编写后台server读取真实数据
1 o; V$ c( `4 V5 W8-4 多Tab 页切换与滚动数据加载优化) z* A, A# P1 S+ ?, ?
8-5 项目打包' k9 g8 o0 C, A1 [; Q
8-6 项目发布
. v, U+ e9 y7 C+ E- c- W; v; X+ b0 |" a) N4 G! }
第9章 美团APP与hybrid深度结合
6 L' |1 x3 X$ U B5 l本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。, b$ g0 u$ N' P
9-1 JS bridge 原理 试看
1 p @ u% u) S9-2 iOS webview + JS API接口+iOS APP集成9 h5 K" [3 [0 Z) W1 ?9 r
$ Y9 f2 W, X0 p2 ^6 O* n0 M1 {第10章 课程总结- d% |/ g. B* K# C9 v( t
回顾和总结课程讲解内容，能更好的回归和归纳。9 V- i/ b7 A( H( c
10-1 课程总结
2 S7 Z T7 A" P6 _, k. V7 b
" d; f7 e! ^1 x" g9 a( r【下载地址】
- ~0 u7 Z) y+ R" |- x7 [! X+ o; A
1 Z+ k# A* v* ]! n- K* W0 H0 L; j, [" p6 x. _ }8 m) @0 }/ R5 X
|
[复制链接]
