0 {* L8 `6 J) a, u. u- e
$ R5 |7 L. p7 P/ |. n! F3 O- A
【课程简介】
- X; R0 f6 A0 c* v本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。- r7 z4 z/ `) a; K! ]% _0 |
; k) e' p, O. ~5 {0 y1 k0 x【课程目录】' E: W! m% e( m/ Z
第1章 课程介绍# G( z& i+ H3 r5 o. e
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。; B: O5 a" E2 F+ ^. K. j
1-1 课程导学 试看/ k- u8 h. T* o) X; b
7 v) W! r/ L" [! ]+ K7 p
第2章 移动web硬知识点* L$ }, ]8 h+ i4 f
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
5 w, Y+ A P+ h' {( ?2-1 移动web开发概述
4 v. l' x; y; @% |2-2 移动web开发调试: V% w$ n8 @' t/ H
2-3 移动web适配概述- K7 Y# B3 J; g1 ^, N. t% W
2-4 viewport视窗概念
6 k6 |# O( V1 Z0 Q6 R# j2-5 css3之flex布局
" S9 P+ w4 [( `2-6 响应式布局和MediaQuery
`3 V. d7 B4 \" m3 R3 u: l5 }* [, T2-7 rem,vw布局与适配( c; f3 l+ b8 Y. @ n& x; M
2-8 移动端touch事件详解- _) U$ a! x5 T3 ?8 l" e4 O
* \) E+ J$ {8 x5 O# e8 N5 c第3章 移动web软技能9 [ l" [5 t6 D0 Q
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...- k: o$ G5 d: J! P4 } a
3-1 代码管理工具&项目构建工具简介; {/ W+ U- P: g9 C( h3 c: ?
3-2 webpack工具使用介绍
' F9 Q2 Y$ s% P* d( I& x3-3 Sass预处理工具使用介绍
" z' }! S& A% o, M3-4 React组件化思想 试看3 c! r9 Z, H; G5 A' Y! ?9 J
1 G- F3 f- c1 L) E
第4章 项目开发构建环境搭建, ?3 H4 C* @3 X6 b% ~! K+ ]
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。. V: L+ P; P+ _& f
4-1 项目和技术栈介绍, x! `3 N K4 o/ Y6 D% T: `. F7 L% E
4-2 项目演示( ?, |6 Q; I* ]0 F1 u
4-3 构建环境搭建（1）
: a4 F" |6 @- e) g: u4-4 构建环境搭建（2）" k! D, C3 {, \# a! {9 W
4-5 构建环境搭建（3）
( @' \! z3 l% Z! A+ t/ |7 R* p4-6 构建环境搭建（4）) n/ V9 e* [# J6 S0 z
4-7 redux-react使用介绍（1）
# g5 }8 h7 d/ b7 D4 R) w4-8 redux-react使用介绍（2）
' g6 ?0 A9 H6 v& `
: n/ X2 w2 e0 d# j+ ^9 w第5章 美团APP—首页开发
, r4 e+ ?. b% u% A开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。6 d7 V7 j/ M: }# V' G9 \8 F
5-1 底部tab按钮开发(webpack-dev-server配置)
, v9 B4 P! f5 o* L2 s, G" W5-2 底部tab按钮开发-UI逻辑编写（1）
, }8 D* Z- T0 Y* l% [- I5-3 底部tab按钮开发-UI逻辑编写（2）4 }5 ] a M' M8 |. [
5-4 底部tab按钮开发(rem配置)" }$ |9 y3 u0 [9 f0 S" b
5-5 底部tab按钮开发(集成ESlint)- s0 N9 R- k0 Q9 P- e3 Y, n. k
5-6 底部tab按钮开发(集成HMR)' S) W4 f4 {, Y S/ H* h8 w. E
5-7 首页页面开发Header模块开发, [, I' d% R, _9 E
5-8 首页页面开发SearchBar模块开发
. b) e. O3 p& s* z2 f+ g3 ?3 u i5-9 首页页面开发-Category模块开发（1）
$ H. l: r, C% [2 D# O. A5-10 首页页面开发-Category模块开发（2）
1 l" l2 s& z/ K5-11 首页页面开发(ContentList模块开发)
# b' Y& O7 }8 r: G) q f1 \5-12 首页页面开发-ListItem模块UI开发
4 D( O7 Z9 Z* K; W9 R$ m) }5 H5-13 首页页面开发-ListItem模块样式开发! V0 c6 t7 C1 ?* U4 G
5-14 首页页面开发-ListItem模块数据渲染开发（1）, S: K! M0 Z: p/ o8 Z' J2 P! _
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )3 z( ~2 Z/ R. r- X# t7 S# K$ n
5-16 首页页面开发(滚动加载逻辑实现)+ C4 p; }" u* L: _& r2 Z% r
5-17 订单页面开发(List模块开发)
: p- K4 \& c& ^2 |; ~2 c, N5-18 订单页面开发(OrderItem模块开发)（1）
/ U R% Q7 L9 g6 {" _% @7 d. P' m5-19 订单页面开发(OrderItem模块开发)（2）
3 O( y( Z& S9 l i- h5-20 订单页面开发(公共ScrollView模块开发)
7 G# `4 v6 s4 N& G- Y5-21 我的页面UI开发
" A! a+ g* X! x3 `4 U% P9 I6 v5-22 我的页面样式开发
) I; ]/ g& @# \7 r8 i5-23 集成react-router
' y$ f: @1 g+ p4 I0 m
2 c9 ?$ Q- m' w- N第6章 美团APP—评价和分类页开发
+ g" k* z O5 u* T( ?5 ?) k* H开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
( P# ]! R/ C5 {' G* {. D- e6-1 分类页面开发(顶部NavHeader模块开发)/ _3 Z% J7 _5 ]" P8 s' j1 I! y4 }
6-2 分类页面开发(顶部Header tab 模块UI开发)
- J3 Q9 H* U U% r6-3 分类页面开发(顶部Header模块样式和逻辑开发)
) M7 ^( z. j1 n. Y- o; x6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)% f) u' m& U) V: w" h% _
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现4 S/ R9 J. [1 t: n
6-6 分类页面开发(Filter面板模块样式开发)4 ]1 y4 D9 [6 ]8 h3 Z- k
6-7 分类页面开发(Filter面板模块item逻辑实现)
8 ?3 p8 h) z/ O4 w6 T" j6-8 分类页面开发(列表List模块开发) J5 I, E8 m5 M R% M5 v
6-9 评价页面开发(UI开发)
7 i( J' e% m$ ?" u6-10 评价页面开发(样式开发)2 v/ d# U5 m6 ?: a+ l+ Q
6-11 评价页面开发(交互逻辑开发)
9 |7 s8 m( d# b+ \# d" }& W& ?" X2 D! d( R( r M
第7章 美团APP—详情页开发
% V+ b0 X& @7 s0 {0 A开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
7 E- E8 x8 S$ l# ~8 t: d% ~7-1 详情页顶部tab开发(UI开发)
7 w) Q' |( M/ y; a! c7 L$ j% Z& ^7-2 详情页顶部tab开发(样式交互逻辑开发)! p3 _9 H& _8 m) _
7-3 详情页点菜页面开发(LeftBarUI开发)* E; s a$ l% K I7 _
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)+ `5 v4 @$ J" j l
7-5 详情页点菜页面开发(RightContent UI和样式开发)
, A; m; {( g! l3 \1 w1 J0 q1 ^( A U7-6 详情页点菜页面开发(RightContent逻辑开发)
0 i' I, x$ c) w9 @7-7 详情页点菜页面开发(ShopBar UI和样式开发)9 @8 Y' n, ^; i! k- ~
7-8 详情页点菜页面开发(ShopBar 逻辑开发)1 r6 _; g( O, v: x
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
- k. o! N, E, E* p( S7 y7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）& f) ]+ Z* v/ c) J
7-11 详情页评论页面开发(顶部Header开发)
; K0 Y- i& {6 Y/ K( \+ ~8 s% J7-12 详情页评论页面开发(列表List 数据绑定); z0 m8 T8 G: K0 u) I6 ^. `6 j
7-13 详情页评论页面开发(列表List UI开发)
. A# P/ U* e" G( i) }7-14 详情页评论页面开发(列表List样式逻辑开发)$ h5 K6 r0 j- S% l, v/ J
7-15 详情页商家页面开发(UI开发)& W5 J( h8 S& y" l p' L$ O, E5 n
7-16 详情页商家页面开发(样式开发)! F$ _# W# q1 y6 |7 G9 Z0 R
0 {# T% V/ N9 s+ c' `9 V
第8章 美团APP—回顾与性能优化+ e) W5 x& Q6 X" O: e l# s( k) \2 W
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
9 X0 \1 f9 O' A2 @' m8-1 懒加载性能优化
$ L- L+ p( o) O, ? T z8-2 JS和CSS公共文件抽离优化
4 M; d8 U& }: V8-3 编写后台server读取真实数据) p/ u0 ^, s C T
8-4 多Tab 页切换与滚动数据加载优化& ^$ E7 C+ f3 c9 [2 S" P8 c) ]
8-5 项目打包) x% y6 C8 l9 z: @% `4 j. p" \$ G
8-6 项目发布
7 D9 d i3 g P6 W& L: R' D$ z3 t
第9章 美团APP与hybrid深度结合* H. o( Y/ i$ ]8 {
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
9 E: _/ }5 u3 ?+ ^. {9-1 JS bridge 原理 试看
2 I0 I7 p! Q% m' ~6 k; b- O/ j9-2 iOS webview + JS API接口+iOS APP集成
3 H, g: ~8 m4 y& F8 N
: J6 S8 B" L. b6 A4 y5 |第10章 课程总结
* q0 I" |3 w3 i0 r; l回顾和总结课程讲解内容，能更好的回归和归纳。8 W/ j4 C& i/ S e$ q8 k' U7 i; a
10-1 课程总结
p4 F, j% u9 M$ e' i8 L) _4 B, }1 T3 C7 ^! O& n. L$ r0 ]7 S; a
【下载地址】
0 s: K2 t& ~: x7 r( B
- Z7 {1 K; c- m) D2 O: G, }, C
$ @( `# H/ D( E2 \/ N |
[复制链接]
