* _2 Y% v8 _. r! V* C$ K3 [+ S) h
; j9 l0 c9 s( I+ D0 C4 M
【课程简介】$ X+ O9 t' s6 y/ C7 k [. c
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。* N% o8 [. h M/ ]
1 e% \2 C/ C! d) x# c
【课程目录】
7 t! m( a2 \ }& `0 I2 j6 E0 j第1章 课程介绍
1 w6 C+ @$ m( v" i+ r. c通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
9 ^: o9 I! s( E, x! u1-1 课程导学 试看- H% @$ m: w4 f
) ^# k8 c3 Z8 w第2章 移动web硬知识点- _" }7 }; i9 G2 v; j
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。8 d. p+ m4 F7 n _" j1 {2 E# @
2-1 移动web开发概述) _9 {$ w# {9 L+ Q6 @
2-2 移动web开发调试
2 G0 B$ Z! h* x; R+ |2-3 移动web适配概述7 c4 N" s% @$ y& v
2-4 viewport视窗概念6 x8 d; |3 p2 y8 {- g, `: q0 @+ J
2-5 css3之flex布局, s# V F+ L" j8 F
2-6 响应式布局和MediaQuery
$ ]+ _' I! Z; z3 K" J5 e2-7 rem,vw布局与适配
& d' e( ]8 e% n0 y$ X# z' Y2-8 移动端touch事件详解
7 ]2 W# w0 a, ~& v/ U4 a& Q5 w, `" M
! e% f0 s# i- A; J& }第3章 移动web软技能
! j6 ], @8 L9 _8 L; V: f本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
( p% M+ [3 g; U0 d0 y* h ]3-1 代码管理工具&项目构建工具简介
5 L& l$ B* L5 c& {+ y# _, I" `% h3-2 webpack工具使用介绍
e: |$ _- x! j9 _) g6 R4 e" j1 e( y3-3 Sass预处理工具使用介绍
3 }! n. Q3 d% V* V$ b* i; @3-4 React组件化思想 试看9 P2 ?, _3 U4 h& O; p- @
' D9 `2 ?* n# @& `5 O4 z# P+ M8 h第4章 项目开发构建环境搭建
5 r: V( H. z' g本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。) V9 t1 y8 v0 C$ i$ A! g
4-1 项目和技术栈介绍
g {2 U% o* V3 @. I: B6 d0 i4-2 项目演示2 B& K, Y( ]7 q' N, ~3 R; U
4-3 构建环境搭建（1）2 @2 T2 C( A% ^! t8 ]; |& ]
4-4 构建环境搭建（2）3 A" \' s$ A. o: y7 S
4-5 构建环境搭建（3）( j. N/ c0 E4 j+ ^' A
4-6 构建环境搭建（4）
5 H; c m7 R2 b% P4 ?" f4-7 redux-react使用介绍（1）
5 k3 q3 H: n- N4 \3 T. V& L4 ~4-8 redux-react使用介绍（2）
( @* D! w6 T( G4 m- n- [6 a
: q9 P: J3 O9 {2 Q/ Q第5章 美团APP—首页开发0 x6 O9 J/ L4 G* d
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
% X0 Z" {) }. }1 A7 m5-1 底部tab按钮开发(webpack-dev-server配置)9 R9 x ^/ v* M0 P! b
5-2 底部tab按钮开发-UI逻辑编写（1）
; N6 H+ K0 M5 c8 K& V* j5-3 底部tab按钮开发-UI逻辑编写（2）0 W1 P* O5 x) b
5-4 底部tab按钮开发(rem配置)
9 C$ \$ l% p' u9 P% c2 d* O5-5 底部tab按钮开发(集成ESlint)3 c% @' l* r; ]- f0 F/ T# \
5-6 底部tab按钮开发(集成HMR)4 N5 t4 ~# N) a
5-7 首页页面开发Header模块开发
7 B0 j$ j) l0 w, O1 a5-8 首页页面开发SearchBar模块开发
' ~5 q# Z2 u' `5 ~4 G& a5 p5-9 首页页面开发-Category模块开发（1）
$ S& Z$ d9 `4 k/ Q' V1 N! ?5-10 首页页面开发-Category模块开发（2）0 Q' p, w) ?" q1 Y: }
5-11 首页页面开发(ContentList模块开发), A8 u/ ^& B! Y! r; }: t) P
5-12 首页页面开发-ListItem模块UI开发' b3 h0 y* Y( W
5-13 首页页面开发-ListItem模块样式开发
4 o, p4 s" G. I4 k5-14 首页页面开发-ListItem模块数据渲染开发（1）/ @( u* D4 g1 j. }3 A
5-15 首页页面开发-ListItem模块数据渲染开发( 2 ): ] D$ ]$ t, L' R+ l O
5-16 首页页面开发(滚动加载逻辑实现)! B0 q* @7 L3 y" U# K3 N
5-17 订单页面开发(List模块开发)- t% ~" {+ N/ S3 \% z: T
5-18 订单页面开发(OrderItem模块开发)（1）
- x1 F9 Z; l1 Y- |% D5-19 订单页面开发(OrderItem模块开发)（2）$ Y+ ^# M9 I1 c8 n, h
5-20 订单页面开发(公共ScrollView模块开发)% }, H* D5 Z1 ~( g2 d
5-21 我的页面UI开发; \2 n0 b- |3 `% w4 G' z$ x
5-22 我的页面样式开发/ A: e% F: L- A
5-23 集成react-router# @0 }* K: {8 c+ n2 U
; y6 c6 Z# j. q8 W" N+ W+ ?
第6章 美团APP—评价和分类页开发4 m g4 G5 {; N, S! b$ Z
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。3 k& l# K. w- D6 P7 ?0 ^; | O: T
6-1 分类页面开发(顶部NavHeader模块开发)3 ?7 {+ X" s+ P/ r: Z% [" K
6-2 分类页面开发(顶部Header tab 模块UI开发)) C' S: h) B- f- f
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
; S1 [/ s$ D, o5 S; x% l+ M ^7 x' ^6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)4 j7 m4 S3 p: u9 }. W
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现0 I0 y" n9 g% q- V
6-6 分类页面开发(Filter面板模块样式开发)
# z/ |0 f @/ `1 m/ M4 v6-7 分类页面开发(Filter面板模块item逻辑实现)# Q" z0 ?( V4 R1 W& z
6-8 分类页面开发(列表List模块开发)
) T# o# M: {& Z0 f6-9 评价页面开发(UI开发)
3 s* ]" W |6 Z0 R( ?/ h6-10 评价页面开发(样式开发)
0 {% S( T" Z7 z5 [9 G* q1 X$ z: H6-11 评价页面开发(交互逻辑开发)9 X4 `* W5 ^+ ~1 J( E* k; D7 t
) l6 u% y! _# v0 Q; Y" I
第7章 美团APP—详情页开发; f% M6 w5 Z7 D8 L/ E! a2 ^
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。4 v# ^ ^" V/ T% m0 v* c
7-1 详情页顶部tab开发(UI开发)
, h' }: a; `. D# ]7-2 详情页顶部tab开发(样式交互逻辑开发)
* F- P4 q7 |- V6 l9 a. O+ l7-3 详情页点菜页面开发(LeftBarUI开发)
. z$ o, O% s% ]; j9 o; W' g, u6 p7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)4 S* [5 h' h2 O$ |. M. J
7-5 详情页点菜页面开发(RightContent UI和样式开发); J+ M. m% z s% I2 m- J
7-6 详情页点菜页面开发(RightContent逻辑开发)
6 m) ]( d) o j) A7-7 详情页点菜页面开发(ShopBar UI和样式开发)% L4 f$ X2 k8 Q% ]
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
J4 A- p$ C2 t9 i7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
+ N/ j+ r7 C: ?: L: l) W. T2 R7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
( p9 W" b, W! D+ V O7-11 详情页评论页面开发(顶部Header开发)/ i" z h( k2 \/ K
7-12 详情页评论页面开发(列表List 数据绑定)2 e7 A" o: Z! ?' F9 `; [
7-13 详情页评论页面开发(列表List UI开发)6 k& ~$ t( V% k; b
7-14 详情页评论页面开发(列表List样式逻辑开发)' H* w: {1 n8 M9 x6 k: ^3 b
7-15 详情页商家页面开发(UI开发)1 H% @% v/ E( ]: _
7-16 详情页商家页面开发(样式开发)
( Z" Y: }. V, ]' |
4 U; w# _4 W5 _1 T+ {第8章 美团APP—回顾与性能优化/ X O& C- }: R% O0 V- ]
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...# B9 f; _! B5 ]; W0 [1 I
8-1 懒加载性能优化
! q/ ^5 H" A9 u; d, T8-2 JS和CSS公共文件抽离优化
9 p/ U9 {8 }9 A; b8-3 编写后台server读取真实数据
: l& h; W4 H7 ]7 D* S& U3 Y- T8-4 多Tab 页切换与滚动数据加载优化1 k1 B0 W# p/ d
8-5 项目打包
9 _/ H+ b J# p: @/ Y3 d- P8 N8-6 项目发布( E' K( n: H l0 |
D; g5 X% g5 `; z
第9章 美团APP与hybrid深度结合
6 \) d, F4 P! d$ [% a0 z, W本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。* [* z8 W. H, {) D+ A9 L. O
9-1 JS bridge 原理 试看
" |+ p u+ i1 D# F- O1 i9-2 iOS webview + JS API接口+iOS APP集成
+ B+ v+ ?& [ [: K
$ t& k* U5 m( {, S' ~第10章 课程总结
% B- a& [* m5 Z' \" h0 C" E8 J3 h回顾和总结课程讲解内容，能更好的回归和归纳。, e& @, P" H# u: I/ J/ p. O
10-1 课程总结) Y# W$ Q# o" x2 L
$ Y5 r' g7 z( ~【下载地址】
( x5 Z) I, n4 T; a) ^
" L. l, t+ ]' K& v: N9 d! x
% {" r# f4 Y0 k8 M9 s |
[复制链接]
