, B" A2 G: ]/ p1 f5 n) z" y
- _: K- k% d" V2 G( C0 d【课程简介】5 e' k3 @ P$ g! U
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。* j X2 g* b! D! l# C
) |; E0 h+ @/ S; ?; u
【课程目录】! p% R5 J/ P; ]! @2 p1 C0 z
第1章 课程介绍
' A1 P, c) w; Q% z1 w- b0 P通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
r9 L# U3 V# r$ B) E( _+ ~1-1 课程导学 试看
; ]1 \6 K% y; X7 R, C; {+ ~: D+ a9 m. B1 T, t4 M* P' e" A1 v
第2章 移动web硬知识点
' R- S, p9 Y v" x( c' f, f, U本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
; h- n' M- U; ~2 H5 }" |+ {; \2-1 移动web开发概述
! M1 b& x; v, N2-2 移动web开发调试
3 _5 i3 q0 s+ j3 j F2 U2-3 移动web适配概述
; F5 d* U$ A: n. [) F& \2-4 viewport视窗概念. |- z( X$ L9 G
2-5 css3之flex布局
% E7 v1 U3 e. @, i2-6 响应式布局和MediaQuery+ B# I, s' E+ y7 b4 Z/ \! h8 @) C
2-7 rem,vw布局与适配5 D# P( W; U- ^
2-8 移动端touch事件详解. A# |0 Q4 h' }
& J5 I( L% u% w4 }
第3章 移动web软技能
: e5 o( _6 r6 I3 B k. a本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
9 K5 t$ ^- {( ]7 S3-1 代码管理工具&项目构建工具简介
9 B- z/ g. j m4 r0 J3-2 webpack工具使用介绍
2 V9 o3 P$ q/ z3-3 Sass预处理工具使用介绍1 x- @( d& a, ?
3-4 React组件化思想 试看
! N4 Y7 ]* H$ i' s2 d3 `' z. d0 e
第4章 项目开发构建环境搭建3 ~) b2 a3 r$ L' W0 @) ? ]9 `
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
* F( B; c0 Q. m" S7 F& b- D6 P5 v4-1 项目和技术栈介绍
; x; S9 h; W& x( N4-2 项目演示
~' B6 m. y! u+ m+ b4-3 构建环境搭建（1）" W/ f' t2 q/ E1 S2 q
4-4 构建环境搭建（2）* W3 t, z9 @" E; O8 V [6 a
4-5 构建环境搭建（3）
5 l+ _/ w. G9 B' ?$ c4-6 构建环境搭建（4）
. t: W, ^# q0 m5 x0 q4-7 redux-react使用介绍（1）
- u/ ^; k" P0 G% s4-8 redux-react使用介绍（2）% V4 I( v0 D7 H# C& ^
; }9 c' S2 K5 F7 c* u4 z) b: V第5章 美团APP—首页开发
. G. k+ u( C$ [8 u开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。1 P: m. k Q0 }3 o$ S, E4 c5 b
5-1 底部tab按钮开发(webpack-dev-server配置)& \8 ?' p# m$ `: w
5-2 底部tab按钮开发-UI逻辑编写（1）- e# U9 {+ @$ y$ Q& ]8 d- |) P& c, M
5-3 底部tab按钮开发-UI逻辑编写（2）) L5 v, d' P1 Z) h* j" Z+ G
5-4 底部tab按钮开发(rem配置)
* v. V4 S9 k% g5-5 底部tab按钮开发(集成ESlint)
: J, d( x2 M9 U2 p5-6 底部tab按钮开发(集成HMR)/ I N( U8 f' W# G4 |3 A
5-7 首页页面开发Header模块开发
. D- U2 T7 D8 \) b; G5-8 首页页面开发SearchBar模块开发
, T5 q6 X0 K* g4 G5-9 首页页面开发-Category模块开发（1）* q6 A' _2 @5 V0 U# F$ O
5-10 首页页面开发-Category模块开发（2）+ {1 d+ C+ t1 W
5-11 首页页面开发(ContentList模块开发)2 _9 W8 F# q8 }5 ?
5-12 首页页面开发-ListItem模块UI开发
# J- ? u1 P/ F J3 s0 h5-13 首页页面开发-ListItem模块样式开发! x( \& d' m6 `
5-14 首页页面开发-ListItem模块数据渲染开发（1）$ v9 A) w' b9 @) `" E
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
& k; b' c- [( r. A9 R5-16 首页页面开发(滚动加载逻辑实现)$ m& a W9 J, D- X
5-17 订单页面开发(List模块开发)% \) a4 z. j$ r
5-18 订单页面开发(OrderItem模块开发)（1）
* A7 b6 i& O2 U- |: ?6 D) Y5-19 订单页面开发(OrderItem模块开发)（2）
9 {3 {5 _$ {6 S3 o# a6 L% p5-20 订单页面开发(公共ScrollView模块开发)
1 G1 L3 p" G) H, r) Z5-21 我的页面UI开发' S+ A6 S. e! n' v
5-22 我的页面样式开发( l ?3 [. \2 [: O- l
5-23 集成react-router O0 Y1 I4 ?6 s/ m3 b
% c# \7 u9 F& h* v/ C第6章 美团APP—评价和分类页开发
0 P2 k" S2 u, {; F6 @开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
" @! O* z1 B# t$ B; r1 W6-1 分类页面开发(顶部NavHeader模块开发)" x w+ q5 W# j) I, J, }
6-2 分类页面开发(顶部Header tab 模块UI开发). R$ \( R m! \
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
- U& k, b4 K+ V6 W$ Y6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发) v9 Q+ ^9 y. n3 d5 j
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
/ R- S/ I$ h8 {' ~6-6 分类页面开发(Filter面板模块样式开发)
$ j- `6 ^3 e1 \7 [" o; m2 S0 a+ k6-7 分类页面开发(Filter面板模块item逻辑实现)
M+ C& N: N7 R: F6 o8 a3 w6-8 分类页面开发(列表List模块开发)
2 G. X; h. a Q4 n, }5 E6-9 评价页面开发(UI开发)
" z* E( ~, t2 p7 M, o6-10 评价页面开发(样式开发)$ A" S D; K0 a
6-11 评价页面开发(交互逻辑开发)
% A( |' w1 `( o) t% h( a7 e# o& F# y" M* L
第7章 美团APP—详情页开发; }( V1 v5 v! J! {, d0 a
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。; t* E' @( N- \, ]$ M% M* ^: G
7-1 详情页顶部tab开发(UI开发)
9 J! c4 p- j' ], m3 [$ l7-2 详情页顶部tab开发(样式交互逻辑开发)- [0 c# ^5 p, W/ O6 _* N
7-3 详情页点菜页面开发(LeftBarUI开发), E& B; C. b/ s' s
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
4 u4 K( M, V) D- h7-5 详情页点菜页面开发(RightContent UI和样式开发)* ]# G% s) o4 ~1 F4 }% [$ i- y
7-6 详情页点菜页面开发(RightContent逻辑开发)
$ m9 A _& [$ w. V/ f7-7 详情页点菜页面开发(ShopBar UI和样式开发)
" S: H$ D+ q' T. |4 P7-8 详情页点菜页面开发(ShopBar 逻辑开发)
( j8 S9 A1 j5 @4 E/ k$ k7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）7 b+ y# P& J# C, O
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
6 y! g# m5 B3 H4 F% q, w5 T7-11 详情页评论页面开发(顶部Header开发)1 X# p2 r, _3 k) L& t/ G9 [
7-12 详情页评论页面开发(列表List 数据绑定)
8 h r O2 u; r7-13 详情页评论页面开发(列表List UI开发)
2 U2 J- ^8 t8 l( b* q5 G7-14 详情页评论页面开发(列表List样式逻辑开发)
" t# ^+ ^% x$ k5 c6 p9 [7-15 详情页商家页面开发(UI开发)
* x0 b3 t7 f$ M. `7-16 详情页商家页面开发(样式开发)
, T; A* Z4 u3 N4 S& s1 l8 n) b
6 A3 J D4 b6 E第8章 美团APP—回顾与性能优化0 h: e1 Z. W. B. P! f" o5 [
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...* \: h/ v! G) W- I
8-1 懒加载性能优化
8 ]' K: F: q4 ^* G8-2 JS和CSS公共文件抽离优化
5 h0 `; F% E- \0 N* a. h8 R/ M8-3 编写后台server读取真实数据
9 M1 d! ?: q B* b* g4 Q" H. j8-4 多Tab 页切换与滚动数据加载优化; N& E$ A0 A' m S0 S$ _4 |
8-5 项目打包
B. _6 V* W( I1 Q2 s8-6 项目发布7 \6 t; a1 o) t
: U1 T& l. H1 g j: n第9章 美团APP与hybrid深度结合( N4 I1 _7 B6 @- B
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。9 L5 c0 z# X' `6 \/ P0 U, F
9-1 JS bridge 原理 试看
) F8 s, m8 _4 n) m5 [! {; c9-2 iOS webview + JS API接口+iOS APP集成
5 y" o+ w4 g+ j( t1 r' g5 t
1 p. B0 m ?0 ?/ S第10章 课程总结
+ \/ ~$ r2 Q" c: _, f: `8 P回顾和总结课程讲解内容，能更好的回归和归纳。' o; Y: s4 P; d+ \5 J$ D7 Z
10-1 课程总结
: ^4 ~+ t$ F& B/ Z. J- v! `9 N! u4 v( ]7 b. m3 W$ S+ J
【下载地址】
. e$ B# m m, W. Y, Z! \3 W
- O& Y; B9 @# I4 ?6 c4 @/ w- u- d' t, ~* D
|
[复制链接]
