. O1 Y" U6 T; a/ T4 B
' R: W: L. [+ l' }* \【课程简介】: a9 ?+ f8 V0 h: Q1 M" i
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。& o. I+ U+ z0 O1 E; c0 p
. I, f0 D% j' f* o% J【课程目录】- H. q% s$ ^9 c% d( z. |
第1章 课程介绍$ d0 k6 i* x$ b+ L
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
3 _' g( O' H1 D/ E& e1-1 课程导学 试看
0 z0 a2 U- I" a( _ q+ }
' q+ [! |- Z5 s" [+ {% D& i |) U第2章 移动web硬知识点8 u. Y: x. D( D7 W1 P6 `, o1 c3 t
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
% O, G5 x( T6 d2 z5 g2-1 移动web开发概述
" [8 l. E {# [: [- D: l" b/ t+ E3 \2-2 移动web开发调试
' B9 X& d$ C+ B) Y" Q2-3 移动web适配概述; w! S+ z0 p) p% B8 K
2-4 viewport视窗概念
# j& g8 B# r0 E9 i7 ~1 e$ B7 w2-5 css3之flex布局7 t0 O1 K% y. ? |0 y' M
2-6 响应式布局和MediaQuery, u, E0 b# }- f2 Q7 q
2-7 rem,vw布局与适配8 Z+ K l% G" `3 f# h
2-8 移动端touch事件详解
; F3 Y K) q5 F" C
2 c$ L, B7 W. R1 f8 Z1 f `第3章 移动web软技能
) {, B! o) j9 y2 g9 z本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...' p" y' @1 s: ^1 e, U4 @( X' T
3-1 代码管理工具&项目构建工具简介; p' z5 L4 L {4 A+ b4 L
3-2 webpack工具使用介绍: M$ V7 r' O) R0 L* X
3-3 Sass预处理工具使用介绍3 x9 f+ Q N+ D. h7 O" o3 P
3-4 React组件化思想 试看6 U3 ?7 f/ V0 R, D% j
3 z9 @6 A* e, F0 ]1 b第4章 项目开发构建环境搭建
5 B: t5 C1 X: W' f6 P9 C7 e9 H% Q本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
. s9 I( h9 S. ]" _" I4-1 项目和技术栈介绍, m' W1 s# ~) f* M1 ? l4 X( c
4-2 项目演示# {& l8 j& l! h- J' T+ z
4-3 构建环境搭建（1）9 B4 N3 c7 d" ?% W
4-4 构建环境搭建（2）1 b: W. \9 d( w/ w& E# c
4-5 构建环境搭建（3）
5 k& y6 {; }1 d8 H2 q% T4-6 构建环境搭建（4）
! ^9 y5 n( B f8 G5 C. }4-7 redux-react使用介绍（1）
) d$ V$ `* c: D+ }2 n4-8 redux-react使用介绍（2）- K: R9 u: Z+ h$ S" W; v
# Y' e+ n& b8 N1 e第5章 美团APP—首页开发
& G6 y% \" X4 \: N开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。3 r2 O4 q2 k' {7 K2 z& x6 {( J2 B
5-1 底部tab按钮开发(webpack-dev-server配置). o% w1 g: Z0 l
5-2 底部tab按钮开发-UI逻辑编写（1）
, q' C( \9 |$ V, l5-3 底部tab按钮开发-UI逻辑编写（2）
; G! r( T5 v4 w" o0 Z5-4 底部tab按钮开发(rem配置)
6 r2 M3 j/ T! `" Y5 {5-5 底部tab按钮开发(集成ESlint)
5 ?# G) R& L' D0 d8 e2 w$ O5-6 底部tab按钮开发(集成HMR)
$ f/ |2 I& W/ `& [5-7 首页页面开发Header模块开发) h7 L( P+ G! s6 q5 e- X/ b4 L
5-8 首页页面开发SearchBar模块开发
% R1 c9 r1 q" w& W- ~5-9 首页页面开发-Category模块开发（1）2 Y! x G3 b6 M! d& p6 }: n- J
5-10 首页页面开发-Category模块开发（2）
% X9 @. E( ]9 Q0 E5-11 首页页面开发(ContentList模块开发)9 q, V2 S5 A8 M5 a$ n) r1 q& j/ K
5-12 首页页面开发-ListItem模块UI开发
- s8 R4 [# ]; M8 X6 f5-13 首页页面开发-ListItem模块样式开发
8 ^8 m8 @( N4 y3 \" R# ~: u5-14 首页页面开发-ListItem模块数据渲染开发（1）- a* V: M6 r2 Z. r( @
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
& P6 R1 w r0 K9 n- s$ Y" P( y5-16 首页页面开发(滚动加载逻辑实现), o0 Z3 @5 x8 E, D$ n3 f0 {
5-17 订单页面开发(List模块开发)
; H9 b8 X6 D( M1 n& K0 X4 a- P, j5-18 订单页面开发(OrderItem模块开发)（1）# B' K( g7 H% k& \6 d
5-19 订单页面开发(OrderItem模块开发)（2）
' ]) r% s3 S9 a4 X3 I+ Q t5-20 订单页面开发(公共ScrollView模块开发)6 J+ L& [6 F0 O4 J0 y) w
5-21 我的页面UI开发
9 z6 I; S" y+ V' @ m/ S5-22 我的页面样式开发) m! Q) {1 ?$ \
5-23 集成react-router4 ?& Z* ]0 K( b- B5 g( |
4 O/ @0 b7 v$ K! l, x
第6章 美团APP—评价和分类页开发
/ C d' U6 _. a' A2 C1 u3 ?! p开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。* D+ m! h- C6 n* J1 x% J4 W% u
6-1 分类页面开发(顶部NavHeader模块开发)3 d' b( }9 k# Q$ N- b# {' n' } V
6-2 分类页面开发(顶部Header tab 模块UI开发)
3 H6 i/ K2 H j+ t9 O( x* g- h6-3 分类页面开发(顶部Header模块样式和逻辑开发)
& X" X W% R. W6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发). j7 j; n, L5 E/ Z
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现$ n4 Z6 \1 c6 c6 w' ]0 x
6-6 分类页面开发(Filter面板模块样式开发)- P' Q0 @ N0 G8 C
6-7 分类页面开发(Filter面板模块item逻辑实现)
% s3 x- F# N# T: y3 o% Q0 z" ~1 n6-8 分类页面开发(列表List模块开发): |* Q# g! M+ }5 z. q& J
6-9 评价页面开发(UI开发)
) Y+ j% c- t' z% n+ S4 y: l( |6-10 评价页面开发(样式开发)
. s' G7 c0 ^/ a; ?; V6-11 评价页面开发(交互逻辑开发), }$ W$ r& i g0 d
b, D6 f! q# U; q- H3 Z第7章 美团APP—详情页开发
, N! `1 E. W! l# ~1 n开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
8 e: z% k* ?! j1 a3 S7-1 详情页顶部tab开发(UI开发)
1 W+ U$ F6 `( n, ?5 G7-2 详情页顶部tab开发(样式交互逻辑开发)' R$ f2 r; b5 I, T6 ]; D
7-3 详情页点菜页面开发(LeftBarUI开发)
& W: u* H+ J5 o$ d7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
% b! a3 U+ w2 ^; @( l: @7-5 详情页点菜页面开发(RightContent UI和样式开发)
. h) y0 b, Y# f' j& z, x; X3 a5 e5 J7-6 详情页点菜页面开发(RightContent逻辑开发). d3 E' R6 ^, v! }8 [, t
7-7 详情页点菜页面开发(ShopBar UI和样式开发)
# W+ ~% o4 g- ]7 _7-8 详情页点菜页面开发(ShopBar 逻辑开发)% F" M, d3 U! J, N
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）" R4 X/ h: r! _# r7 L: G& D: v& y
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
9 n% T0 e+ R2 \# T* q7 F7-11 详情页评论页面开发(顶部Header开发)4 E) H0 i9 U! C
7-12 详情页评论页面开发(列表List 数据绑定)' |8 b. ?9 K a& E1 \$ Q( h% G! ~- m3 f
7-13 详情页评论页面开发(列表List UI开发)
1 k8 @& p3 {. e7-14 详情页评论页面开发(列表List样式逻辑开发)! |4 L+ S: C7 M. j' q! S
7-15 详情页商家页面开发(UI开发)# `4 q8 z! N, Z, h: w( r7 e
7-16 详情页商家页面开发(样式开发)
$ s! A& C1 r- E# _$ b, b' b/ ?9 C0 m& S9 m& \" n7 z( m
第8章 美团APP—回顾与性能优化
* V3 d2 b& }* H; r7 J( x' F通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
1 h. |* E% V! I% y- m3 X7 N8-1 懒加载性能优化
% `; p1 I. ]% O O: \$ k! T7 c8-2 JS和CSS公共文件抽离优化
) @$ K- m" u2 D5 ^7 Q$ V) H8-3 编写后台server读取真实数据, X4 M$ A' B! {9 ~0 n% x
8-4 多Tab 页切换与滚动数据加载优化
, G# @. m5 n; ]8-5 项目打包
5 {" b* v x0 C( T R8-6 项目发布
0 ^( \5 p5 {, N5 H6 Z; m4 G9 Y3 v! E
9 F! o Q7 @$ T9 a' v2 l0 |第9章 美团APP与hybrid深度结合
. X1 t. \) x$ Q9 } c本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
# l" e! A' p6 U% |" d9-1 JS bridge 原理 试看- H! c+ D h+ Y% l2 F; ^( g
9-2 iOS webview + JS API接口+iOS APP集成' m0 g5 ^( R! P
1 B! Y N, b! J9 e第10章 课程总结
3 X; {# s% D* k' B4 @3 }5 B回顾和总结课程讲解内容，能更好的回归和归纳。. X6 r: b+ K/ i+ ^$ X4 \* J# v
10-1 课程总结3 w4 F* o9 i! X4 O* F
' ?% _! R6 U- k6 l. A# D& G【下载地址】
- o$ e" Y6 g. M2 d
0 `0 `% z G& |$ ?, v9 s% n! F' C; p; g
|
[复制链接]
