9 E5 d$ a: \! A. `
: p3 ]& m6 O K【课程简介】
8 Y: \. K1 F9 b3 ^) i9 Z本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。) P( f+ j9 M9 ~0 k
0 V! N, o) R4 v L
【课程目录】* Q/ f; P( L, H c
第1章 课程介绍/ Z0 Y; L1 y6 `- @& j' R. }4 C
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
7 e8 z: M+ t! V6 e$ H" U' O! V# m1-1 课程导学 试看
/ Y. y; T0 k! s& N& b5 t& a+ X. f' D9 F, ^4 J* G3 ^, }3 X
第2章 移动web硬知识点2 @: ?+ L1 _5 F; N# j) U# x" @9 z% D
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。3 R2 O& g# ^5 W: k+ w$ L
2-1 移动web开发概述
9 Q/ X6 a# P5 w% u( o2-2 移动web开发调试
$ b3 f# M" v2 p$ W7 A2-3 移动web适配概述3 A, ]; U5 ?$ E6 W9 Z
2-4 viewport视窗概念
$ ?6 s3 n- s l4 s8 G1 F2-5 css3之flex布局
! Y# T8 ^8 g9 D$ u2-6 响应式布局和MediaQuery6 ?4 ]) r$ ?3 N; n. D" `- h
2-7 rem,vw布局与适配
+ D3 q7 r# I+ x, A2 i) b- @# W2-8 移动端touch事件详解 f1 s0 o. j( }; L: T) J2 b1 f+ A
- e; e% p# _% U6 P第3章 移动web软技能
* M' |- U- U# A ?& U+ u8 C9 b; K本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
. X6 g, c% P( W: @( f, m! }& c3-1 代码管理工具&项目构建工具简介
8 P! w4 d+ w: ?' T3-2 webpack工具使用介绍
* Y, C2 n! K% O0 `& P! ]3-3 Sass预处理工具使用介绍7 H4 Z& A! M' r& ?& `9 l7 y0 U
3-4 React组件化思想 试看# c5 w- Z, X6 L+ s
, j0 {1 K% v9 b' c( _1 g: n第4章 项目开发构建环境搭建6 w- ~" z" x1 G, ^% }/ {
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。& ~2 F: ?& f7 G9 H) y D* o' l3 S# r
4-1 项目和技术栈介绍' |; z$ [7 \; d
4-2 项目演示8 `) n* h$ f7 o
4-3 构建环境搭建（1）
7 T5 B- L; H/ {- L4-4 构建环境搭建（2）
" \2 P8 M7 [, q6 Z$ W4-5 构建环境搭建（3）* M. l( ?) h5 U% |4 ]# l
4-6 构建环境搭建（4）
$ J) } l" C2 O% g# r4-7 redux-react使用介绍（1）
" K+ h: N; u& o6 ^3 U5 w4-8 redux-react使用介绍（2）
( _1 F% V1 D& n; L6 Q7 o, Y1 D3 V8 h! F$ c) M( ^
第5章 美团APP—首页开发
3 t, \9 e, o( _4 V开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
' b* h% w0 O5 u) e1 M3 {5-1 底部tab按钮开发(webpack-dev-server配置)
7 }3 i* q$ t% y5-2 底部tab按钮开发-UI逻辑编写（1）$ V( u5 j4 J Q, S; `: e1 d- a
5-3 底部tab按钮开发-UI逻辑编写（2）- O% L2 V; i# v6 X2 f3 Q
5-4 底部tab按钮开发(rem配置)2 [( L! M/ } r1 _
5-5 底部tab按钮开发(集成ESlint)
: c7 P0 ~( s, J* O$ R8 v0 ^! b; C- w5-6 底部tab按钮开发(集成HMR)1 G1 [8 T4 `0 }, }, C
5-7 首页页面开发Header模块开发+ k3 K, N4 S# e3 B7 e
5-8 首页页面开发SearchBar模块开发
7 u/ h! X; ~/ q# q0 `$ B2 D2 L. |5-9 首页页面开发-Category模块开发（1）3 A. m1 t) I p$ @; G( {7 X+ o# g8 e' U
5-10 首页页面开发-Category模块开发（2）
$ c" a+ M: r: H3 R+ w! D9 _. A7 N5-11 首页页面开发(ContentList模块开发)
c7 J' i& N7 |9 a7 X' B# U5-12 首页页面开发-ListItem模块UI开发) }! Y1 P) D1 a' @
5-13 首页页面开发-ListItem模块样式开发6 p2 a# T% S4 a+ q$ r% K* _8 k' x
5-14 首页页面开发-ListItem模块数据渲染开发（1）
% O; p) ]9 t. x3 ^- n r5-15 首页页面开发-ListItem模块数据渲染开发( 2 )" [' M4 w5 b% G7 j& g& g
5-16 首页页面开发(滚动加载逻辑实现)3 r- m; F6 b7 ~, p5 ]1 g
5-17 订单页面开发(List模块开发)
8 P# v* l& q* h5-18 订单页面开发(OrderItem模块开发)（1）" q( ]* S' z# M; B
5-19 订单页面开发(OrderItem模块开发)（2）
, k/ [ `( b: G5 [1 X' z2 g" M5-20 订单页面开发(公共ScrollView模块开发)/ ]6 R( o/ T# K
5-21 我的页面UI开发# w; h0 V: ]- X6 j$ \+ B3 v+ `* h* ?
5-22 我的页面样式开发
. z2 x: H; `( V7 @& \: g5-23 集成react-router2 q. t. r$ W ~- y# F( J
9 _" }6 h+ i- r& A# _* @第6章 美团APP—评价和分类页开发: H" w0 s1 V0 x, v% H8 m
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。" X" q9 q. F6 E" }$ t
6-1 分类页面开发(顶部NavHeader模块开发)
- g2 P; d$ x3 r6-2 分类页面开发(顶部Header tab 模块UI开发)
$ D: g3 `- l8 v2 T& p. i6-3 分类页面开发(顶部Header模块样式和逻辑开发)
+ F G1 m9 ]8 A6 {5 e6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
5 q2 L3 ^6 q( h& D' r6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现. A& Y+ L. Y7 B8 A8 U' v
6-6 分类页面开发(Filter面板模块样式开发)
- ^! n- S; q5 }# G# o6-7 分类页面开发(Filter面板模块item逻辑实现)
0 U9 m+ U8 C( S8 Z6-8 分类页面开发(列表List模块开发) L5 O. N% M4 ]* ?
6-9 评价页面开发(UI开发)
& S3 B; @) [0 f- g: \1 l% p6-10 评价页面开发(样式开发)
* G5 @' ?2 A& V6-11 评价页面开发(交互逻辑开发)
$ V6 c/ R9 U% G" i; N L3 O: D
5 n }3 D; P# x第7章 美团APP—详情页开发+ c1 `. g9 ]) W+ w' O' g2 [
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
, E, E% t( ]8 d5 |& y7-1 详情页顶部tab开发(UI开发)
' d% x7 a' i7 V4 J7-2 详情页顶部tab开发(样式交互逻辑开发)
3 A2 @ S2 [3 }' X7-3 详情页点菜页面开发(LeftBarUI开发)5 J+ H* E0 ^ d8 P1 s* l
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发). b4 [* G+ @' x- a9 m. V4 U. Q
7-5 详情页点菜页面开发(RightContent UI和样式开发)
1 {9 V) n& b1 v" \% u4 w. j7-6 详情页点菜页面开发(RightContent逻辑开发)0 H- n" A6 }. T4 h1 ]& u" P. F
7-7 详情页点菜页面开发(ShopBar UI和样式开发), ~$ \8 S6 G' F8 {+ c
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
3 @+ x8 ?' t9 `7 M7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
/ P! }6 L# C8 s: s7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）& L; Z9 D# E* q1 Z8 u% N
7-11 详情页评论页面开发(顶部Header开发): [! ]1 n1 ]0 B
7-12 详情页评论页面开发(列表List 数据绑定)& z; l v; S% H! B! |
7-13 详情页评论页面开发(列表List UI开发)
u, F- K; O5 i" J7-14 详情页评论页面开发(列表List样式逻辑开发)2 a' S5 f0 I! x
7-15 详情页商家页面开发(UI开发)
* n& d- V, ]6 k/ i7-16 详情页商家页面开发(样式开发)( X; q4 z8 O3 u c% o1 C) Q
' [; {& i1 U H' C9 H7 I* ?第8章 美团APP—回顾与性能优化) P w1 n2 k6 p! b
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...% \* f0 Z7 m- j' Y* i
8-1 懒加载性能优化
2 [+ i0 ^ ?; A' q- f8-2 JS和CSS公共文件抽离优化
" Q& @5 v) a2 U- B4 K2 I8-3 编写后台server读取真实数据
: h" Z# T" |0 S( w8-4 多Tab 页切换与滚动数据加载优化8 I3 @" f+ \; p& e8 I4 {- a5 ^. M
8-5 项目打包
$ o* f+ l3 R: G0 L" z. d8-6 项目发布8 |9 |3 @7 v% A( R
) ]2 x% t) X. ~( e第9章 美团APP与hybrid深度结合
, K5 [! ?0 m! K8 \' j本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
9 Q. R* x' _/ E9-1 JS bridge 原理 试看
9 f1 H( H9 e- L0 `' G9-2 iOS webview + JS API接口+iOS APP集成' Y: S J' f; ^' ]1 J5 ]" \( G
% Q2 g6 }& e9 n' g V
第10章 课程总结
( Y- H: J( k* t回顾和总结课程讲解内容，能更好的回归和归纳。
/ X, }1 G6 K; I# B8 U10-1 课程总结
$ ?7 t. `. j+ Z8 k& y) ?+ i1 j/ x7 j' f* i) r. A8 ]
【下载地址】8 ]- j( s" u$ ^* U& ^+ Q9 G1 S! J+ G7 E
6 u" r- G7 m4 G' R& E/ v- G: g
- G3 g1 ~& [7 O) y- r1 d8 s# P
|
[复制链接]
