9 U6 i! ` X* ?6 R0 @+ H
7 h3 i. [9 i/ z4 w4 o【课程简介】5 E6 l$ p: o1 g- e( `: A& G
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
: r4 v% L: t3 g" V1 l$ S; r% X( ^ ?5 L2 h* w C# b
【课程目录】- {& ~0 G7 C0 Q+ e1 U" U/ ~1 H
第1章 课程介绍
Z/ W0 v& H0 l( k8 i9 J通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
7 k2 j; J8 O R! F W1-1 课程导学 试看
$ x5 t- E' Q2 k% R$ ^% G
. ?' h7 F8 q& f9 q第2章 移动web硬知识点
1 z) F, Z. E! t; q- `, v4 w8 F本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。% l! K2 v" z, U$ |
2-1 移动web开发概述. ]! Z* `* R; N# c7 z- U% `9 l
2-2 移动web开发调试
+ @6 G# D7 k( @2-3 移动web适配概述
( N# p" C4 Q4 q/ U D7 r, h2 D2-4 viewport视窗概念* g5 v: z7 a' I0 k! p% _5 C
2-5 css3之flex布局
8 T% }+ O6 y( \2 H0 D2-6 响应式布局和MediaQuery
' x7 }: J% [4 y. f; c, C' Q4 M) z2-7 rem,vw布局与适配5 [. K; j) Q( p$ q0 P
2-8 移动端touch事件详解" @# {: |8 ~7 I7 I& z6 b9 i
# A. L K7 p, m; ~第3章 移动web软技能' P+ ?/ f. o% c
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
; C" w% `+ e5 f/ k' c3-1 代码管理工具&项目构建工具简介
+ I5 ], I9 Z7 o# v! O* r9 L3-2 webpack工具使用介绍
; M6 a, e x& i1 {0 l7 B3-3 Sass预处理工具使用介绍
" B' ~5 [3 {& x, |/ ^3-4 React组件化思想 试看# n4 Q- I& j/ k/ y8 u8 A" N3 H! C
" i; h2 ]& W5 p3 X2 n
第4章 项目开发构建环境搭建* J- w9 Q( Y' q
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
: P* n8 {5 U& R2 G; z/ l4-1 项目和技术栈介绍/ p- d! w) K' J) h4 C
4-2 项目演示/ y( g5 J; i5 v6 i9 I/ [
4-3 构建环境搭建（1）( i; j) g% t' Q. d% W, C5 W* @
4-4 构建环境搭建（2）
5 D4 Y/ `$ L2 k/ ~4-5 构建环境搭建（3）6 O. H2 \6 d% R( k
4-6 构建环境搭建（4）
# t7 f/ i+ q: W4-7 redux-react使用介绍（1）' a) P4 O# c8 V% a
4-8 redux-react使用介绍（2）
; @5 t! |3 A% k* v9 i. }* \5 ~, O- H- S) A5 Q6 ~, @& A4 N: r' f% `
第5章 美团APP—首页开发/ J1 `, W! `: q- H) l6 Q
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。9 r+ T% \( O, k& Q+ x/ Q
5-1 底部tab按钮开发(webpack-dev-server配置)
4 ]4 n$ @1 o1 C- B6 s5 P5-2 底部tab按钮开发-UI逻辑编写（1）
; e" h7 O! G; Z7 J$ r5-3 底部tab按钮开发-UI逻辑编写（2）/ A$ O8 v3 J' |7 c1 r C9 D# C
5-4 底部tab按钮开发(rem配置)( o; V7 P# s0 {6 `* i( @
5-5 底部tab按钮开发(集成ESlint)
7 z6 @/ ]& x& w& q( x5-6 底部tab按钮开发(集成HMR)
' D) Q, e7 Y$ W$ a+ m% e) N5-7 首页页面开发Header模块开发
, j( X- `+ p5 g& Y% H4 |5-8 首页页面开发SearchBar模块开发
2 l v! b5 H; W/ ]5-9 首页页面开发-Category模块开发（1）
" V R6 J% l* u& q, _5-10 首页页面开发-Category模块开发（2）- V, k0 y* }8 R8 u; r5 }
5-11 首页页面开发(ContentList模块开发)
, u1 F4 ~( I7 h# t5-12 首页页面开发-ListItem模块UI开发
( x5 l; i2 e5 E+ ]4 [5-13 首页页面开发-ListItem模块样式开发5 L3 _+ K& a8 v$ k T! n' W4 ?2 r
5-14 首页页面开发-ListItem模块数据渲染开发（1）
' e7 ~6 C+ E/ b; ?& Y6 Z4 q2 e3 h5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
" M) m5 k# {+ |1 P8 v: m- f5-16 首页页面开发(滚动加载逻辑实现)
% `4 ]6 {' I/ G+ U+ u5-17 订单页面开发(List模块开发)1 j& C9 p0 ~5 L* i. g
5-18 订单页面开发(OrderItem模块开发)（1）
x' e8 ]* }! c* I5-19 订单页面开发(OrderItem模块开发)（2）+ r; P6 {7 D9 k
5-20 订单页面开发(公共ScrollView模块开发)4 u6 k' P5 {6 ]4 t
5-21 我的页面UI开发+ }$ e. w( }3 c& ]! X7 d3 q
5-22 我的页面样式开发
; q. c7 J% `. [" C5-23 集成react-router$ ]" O+ }3 W1 i! [( g& A
: E1 ]. d6 h& V) ]- w1 J第6章 美团APP—评价和分类页开发% U5 c/ B* ]% @6 O* m$ b2 \. s
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
: ~& q" p* s! T8 ]! m) G6-1 分类页面开发(顶部NavHeader模块开发)! x" ^9 K3 y2 b! g) B9 A. |
6-2 分类页面开发(顶部Header tab 模块UI开发)
' Q, ^ W ?1 P! o: I* R* q7 A6-3 分类页面开发(顶部Header模块样式和逻辑开发) B |2 c7 g1 U1 ^0 z: o
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
9 P; g* e0 x' y& y& Z/ w* a6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现" w* s" q) A: I g- s0 a4 g
6-6 分类页面开发(Filter面板模块样式开发)( @& } n. `8 P: H
6-7 分类页面开发(Filter面板模块item逻辑实现)
2 _: O! b8 }2 _* q% Y6-8 分类页面开发(列表List模块开发)$ y! h1 M: B- T- O) @
6-9 评价页面开发(UI开发)3 `. N5 D6 u" O7 H' Y0 _, M
6-10 评价页面开发(样式开发)
" g: N5 [6 G, r1 r8 p, u: A; p6-11 评价页面开发(交互逻辑开发): ^9 X# Y# K0 {
; q% Z0 c- Y4 p2 T
第7章 美团APP—详情页开发
~! {" b* t" \' R' \; O0 U0 Y开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
$ }! L, {2 I8 V7-1 详情页顶部tab开发(UI开发)( Z1 u" b0 U# r- e/ B: R- n+ [
7-2 详情页顶部tab开发(样式交互逻辑开发)- I! Y1 c M. C( z
7-3 详情页点菜页面开发(LeftBarUI开发)
! \$ a& X% Q7 b" d* f; |/ R7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)3 m N# K' u8 F$ u7 n! @# Y' j6 }$ w
7-5 详情页点菜页面开发(RightContent UI和样式开发)
" i; X* C/ H) T4 n& m; ~7-6 详情页点菜页面开发(RightContent逻辑开发)
+ R" f" P% N. j+ E- c7-7 详情页点菜页面开发(ShopBar UI和样式开发)
5 p Q5 l f0 f# T* h7-8 详情页点菜页面开发(ShopBar 逻辑开发)
$ H: l. O0 e! v; a3 K. x. P7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）( |9 T9 T, L& i0 s+ O
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）6 Y' B( B# A+ X: B0 w: E+ c6 C
7-11 详情页评论页面开发(顶部Header开发)
+ ?8 z6 b' }$ d& |& B4 E6 j4 L7-12 详情页评论页面开发(列表List 数据绑定)2 A8 j% H9 O8 g7 n4 G- S
7-13 详情页评论页面开发(列表List UI开发)* Q ?, Y" ~9 L1 C7 |8 K- n% u5 E
7-14 详情页评论页面开发(列表List样式逻辑开发)
) [2 L$ W3 @0 U# i0 f1 A+ E7-15 详情页商家页面开发(UI开发)7 V$ S: m0 N- E2 U6 Y, P0 a
7-16 详情页商家页面开发(样式开发)
* R' L" ~0 W- F8 H9 n- o$ e) |
第8章 美团APP—回顾与性能优化
1 z2 _$ E' r2 D5 R, b: Z1 H通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
$ e) U* I8 A7 R' a" |8-1 懒加载性能优化
) d; {' s' L# u' t9 H" ~; |8-2 JS和CSS公共文件抽离优化9 Z$ ~2 v( c Y! G, d: o
8-3 编写后台server读取真实数据
) s J o) S, _# ^8-4 多Tab 页切换与滚动数据加载优化1 @$ M% v% b/ G B
8-5 项目打包
% A: g& H& j1 C5 L- s8-6 项目发布1 Y$ V0 n1 k5 Q+ _; x/ }$ i% }
) `/ a# b' ^ q
第9章 美团APP与hybrid深度结合: Q. z. }9 @ y' b3 K! w
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
* z& A' [& A# c! g3 G5 P9-1 JS bridge 原理 试看* `: [+ a ~% N! | H
9-2 iOS webview + JS API接口+iOS APP集成
7 X% }) A1 R7 x3 f/ ] h
7 A2 v1 n V+ T5 Z* ^ |( d. t第10章 课程总结
( `# @2 ^& R( r3 |9 d# `回顾和总结课程讲解内容，能更好的回归和归纳。
8 N& Y: m6 G5 y/ _" _: R& I. B5 |10-1 课程总结
1 E/ w( B- m# U$ D/ q3 N
5 z2 p k$ T! e$ l3 v8 `2 F【下载地址】
8 ~5 L" }( U y! _- _/ J3 r# T4 y7 M/ U0 f( l. z) a7 g; Y [
# E& M: V" X8 N. c( i3 P |
[复制链接]
