! L6 H9 ~' b4 p% v
) W3 }! n' C' Z! T h
【课程简介】
( w; {2 o) L" H# p, _$ ?# E6 ?本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
$ B3 N# j' I/ t; P6 s! F& F5 s. @) A0 y6 @! d2 _! v
【课程目录】" Q3 h s) J8 \1 h
第1章 课程介绍
6 v% ~8 f5 E, e8 O% E通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
+ i* e8 \; h$ L% C2 O1-1 课程导学 试看) }) T8 D1 e0 y+ H
+ p/ g/ F, H. n5 l, D- b7 q4 w
第2章 移动web硬知识点; b+ V5 `, `/ n
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
# p7 |* b( \% L9 G2-1 移动web开发概述
1 _' ]& h4 k; d5 b2-2 移动web开发调试( R8 ~& f0 v! ]$ O( j
2-3 移动web适配概述( L, E- {0 a% Y: m @
2-4 viewport视窗概念
4 d' j8 [" I4 l2-5 css3之flex布局
/ a' m, k7 k! p8 T: S2-6 响应式布局和MediaQuery
. u# r- a4 _* U) g9 \2 J2-7 rem,vw布局与适配) @9 m5 }9 Y4 B+ j0 \
2-8 移动端touch事件详解
# W6 S/ O+ U9 p" t& a( U7 f6 O! `' h; t; A
第3章 移动web软技能
D: R" N+ s$ |" G/ {( i- w本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
# ]1 y/ K L0 _6 G+ S* `5 ^3-1 代码管理工具&项目构建工具简介
p8 d1 F4 K A2 q: u0 g3-2 webpack工具使用介绍- x# n) ]* M ]0 `9 H
3-3 Sass预处理工具使用介绍
- G/ o" D' Q3 ]; X3-4 React组件化思想 试看
8 R+ c. r, g5 m) T7 i
, Z) y- O. v# r$ Q1 `6 j/ w第4章 项目开发构建环境搭建' }/ v4 g: a6 T* |: L! M- x' i
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
* ]7 K' f" c# J% V# i4-1 项目和技术栈介绍( {9 b3 ]# {/ l! O- }; B- f& v/ i
4-2 项目演示
# w; ]/ ]' R9 f0 g: Z5 |4-3 构建环境搭建（1）
) Q# v3 U5 I8 t- m+ Z( f4-4 构建环境搭建（2）
7 Q% Z! I3 w( a R9 ]" p, {8 f4-5 构建环境搭建（3）. Y6 _0 b7 ?4 ~- A& P: ]
4-6 构建环境搭建（4）
$ R. G) J- Q3 B6 l/ ^7 o* a' z4-7 redux-react使用介绍（1）2 ~$ |2 o$ U6 z0 R8 d% E4 J
4-8 redux-react使用介绍（2）+ g! s P) e: @, D/ k
% W! _- h, A; x( a7 h7 y1 q第5章 美团APP—首页开发7 @ i7 M$ T. Y: F7 u
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
. h: v4 k; i) X: r5-1 底部tab按钮开发(webpack-dev-server配置)
- ~3 v9 e2 V# Y! `5-2 底部tab按钮开发-UI逻辑编写（1）- [4 B! P7 s7 v+ W
5-3 底部tab按钮开发-UI逻辑编写（2）
, C+ @8 A: Z) q5 D6 n7 a5-4 底部tab按钮开发(rem配置)! t H% _- w& R( N
5-5 底部tab按钮开发(集成ESlint)
4 u. T. q" z& ]) b" H# o) n5-6 底部tab按钮开发(集成HMR)
, ]# B7 ^4 N2 [+ K5-7 首页页面开发Header模块开发( J9 h* r! y' S. E1 }! t. ]4 B6 [
5-8 首页页面开发SearchBar模块开发
% m \ W+ {! ?0 l6 u- P5-9 首页页面开发-Category模块开发（1）/ z. f) a% o" l- h5 Y3 ^
5-10 首页页面开发-Category模块开发（2）
% D$ [% P8 O% z6 y, m6 A5-11 首页页面开发(ContentList模块开发)
6 X3 S+ s4 v0 b6 S8 @0 F5-12 首页页面开发-ListItem模块UI开发2 C9 U5 _7 y# W/ W# ?
5-13 首页页面开发-ListItem模块样式开发
8 C9 X/ i4 V* \7 O7 `' _, s5-14 首页页面开发-ListItem模块数据渲染开发（1）4 h( I: k4 J* r6 j
5-15 首页页面开发-ListItem模块数据渲染开发( 2 ): @4 `$ e; k, ]* A7 x
5-16 首页页面开发(滚动加载逻辑实现)
5 F# R6 ?! F# b0 m7 k5-17 订单页面开发(List模块开发)4 h0 w. U, v- M- e: U
5-18 订单页面开发(OrderItem模块开发)（1）
9 _* [; I7 G+ c( h$ e3 W' z5-19 订单页面开发(OrderItem模块开发)（2）+ o7 {+ v, ~( v; M
5-20 订单页面开发(公共ScrollView模块开发)
L' G: R1 }: B3 n- P: Q# L5-21 我的页面UI开发4 R# ^- D6 H$ @( K
5-22 我的页面样式开发
% }) t) q/ z1 I" M4 w+ F5-23 集成react-router: ?! t% A& i$ v2 b* f% R" `
h4 g# h) h/ l, ~# H" v9 o+ K
第6章 美团APP—评价和分类页开发
8 F7 o- o; z; \- y" m开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。6 g% p" O+ ~7 i6 G
6-1 分类页面开发(顶部NavHeader模块开发)# A* B) i7 ~/ T+ v5 @
6-2 分类页面开发(顶部Header tab 模块UI开发)
9 Q; B" a% M6 ^: T. Q0 Y; H6-3 分类页面开发(顶部Header模块样式和逻辑开发)
, L2 p4 S: S* n/ m4 h6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发): J9 k( ?, P- \' |- t+ b* B. F* G
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
4 M8 z( L" N9 j6 N% {9 F# I6-6 分类页面开发(Filter面板模块样式开发)3 t& W/ D1 l$ p4 C. E7 J- V0 }7 X* q
6-7 分类页面开发(Filter面板模块item逻辑实现)
, D# [: i' s) {$ w3 l# i" f1 E% d6-8 分类页面开发(列表List模块开发)
" G- T, H+ Z8 g5 Y. w6-9 评价页面开发(UI开发)3 Y6 x2 y% r* W- \% ]' @+ A: @
6-10 评价页面开发(样式开发)5 m8 E, u6 }" i6 _3 l& d6 T5 ^
6-11 评价页面开发(交互逻辑开发)& [& {- W( m0 i9 ?+ _8 j1 r) m! N
2 D1 d3 b% t% A) C9 Y& v3 I第7章 美团APP—详情页开发* F4 Z3 L7 w% g8 }6 j4 Z4 K) @
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。" |% z/ i2 ]( M8 \. @) X
7-1 详情页顶部tab开发(UI开发)4 I8 x/ U" N2 F* W# K
7-2 详情页顶部tab开发(样式交互逻辑开发)% j% ~& X9 C0 H( i& p
7-3 详情页点菜页面开发(LeftBarUI开发)" m6 K6 N1 s3 m' Q" B4 n, M
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
4 k: U4 o( g$ Q7-5 详情页点菜页面开发(RightContent UI和样式开发)9 N, z, {8 v8 S% S) U# h( J; }
7-6 详情页点菜页面开发(RightContent逻辑开发)
{& N' n7 a# ]6 F; z9 A! ~7-7 详情页点菜页面开发(ShopBar UI和样式开发)
. Y- _4 P3 Z9 g) d* Q7-8 详情页点菜页面开发(ShopBar 逻辑开发)' X ?# Q0 }) ^7 k
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）5 l/ I8 m/ ~% `$ M7 X
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）8 i7 ]7 X$ U S: K6 S, T h
7-11 详情页评论页面开发(顶部Header开发)5 J. l/ ?; Q# r
7-12 详情页评论页面开发(列表List 数据绑定). C4 U( J! z( o: x1 {
7-13 详情页评论页面开发(列表List UI开发)- v+ S4 F5 l" n. k3 \
7-14 详情页评论页面开发(列表List样式逻辑开发)
6 S0 z! m/ A0 D- h# x% L+ L2 g7-15 详情页商家页面开发(UI开发)
" C# x& {8 y* Q2 f' z7-16 详情页商家页面开发(样式开发)
( m& Z6 z9 k$ Q( c0 O1 E1 p9 } Z' T/ \
第8章 美团APP—回顾与性能优化# T! r6 a- D( W( W. l" k) d
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...! n; M1 ?9 O& a: a
8-1 懒加载性能优化
$ l H) r( N8 \2 K# `; @4 O8-2 JS和CSS公共文件抽离优化
: P/ ^4 P! c1 V, K C8-3 编写后台server读取真实数据
& H8 O {! J4 f; y% g, O' [/ j! G& o8-4 多Tab 页切换与滚动数据加载优化' v% C$ ]) B. b: g! N2 z4 h6 b- I
8-5 项目打包
/ L2 L5 y' H4 O6 s/ H. Z- g3 J8-6 项目发布
& t; w( x1 o# D- a8 {/ c) o; M# ]/ ]" A8 B
第9章 美团APP与hybrid深度结合8 O9 ~5 C. Q- u/ r( y
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。+ \7 M! Z8 H4 @! L; L
9-1 JS bridge 原理 试看$ E) m) z2 A! G3 N% i% B$ R. |. w
9-2 iOS webview + JS API接口+iOS APP集成; u4 q, c. h- N
2 \( N4 w; C7 M0 J1 w, ~! F第10章 课程总结0 ^+ e* v# N' U
回顾和总结课程讲解内容，能更好的回归和归纳。. V) Z8 n* V, t! j5 `# [
10-1 课程总结
; D+ t2 L. F8 u. m9 l
: O% N& V4 Q+ H% b/ |8 i0 f【下载地址】
3 `% i- g" |/ _! F& v( @1 @ \! r9 F
p' a K: p: Q) m r E
|
[复制链接]
