# P3 r( `. |2 q
- e9 R( G. ]# J; j: F: l2 C, K【课程简介】
b$ j6 Y- q) k* M% R1 D9 m5 k本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
5 ~) H/ {6 F. A9 b# C$ u2 H+ d+ [4 s [# m" V7 H2 Y+ t- |
【课程目录】6 J7 g( a7 I. V7 K: `
第1章 课程介绍9 ]3 r5 S% [. b
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。 w6 Z$ K5 Z. s8 C9 C
1-1 课程导学 试看( J" t& [% k- Z7 S' Z
; q, M6 Z$ b) B M" Q第2章 移动web硬知识点
, {# M$ y+ N( }# o" l本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
9 L/ G6 \; A, _/ S0 [: K; s5 ~2-1 移动web开发概述
) `3 i' `4 k& g/ g, Y2-2 移动web开发调试% J0 s4 P# S" S% a# o" U2 ~
2-3 移动web适配概述
! ^( K8 n! Y; T0 V7 j- ^2-4 viewport视窗概念; P+ g, q. j. r! b: y9 m
2-5 css3之flex布局, g; | i, j9 U1 C5 H
2-6 响应式布局和MediaQuery
% G# @: M# o; A4 N2-7 rem,vw布局与适配
, J1 e. Q, e7 i! R' p2-8 移动端touch事件详解
, f6 W" O4 n3 R0 i2 z. {. @% k$ h% q, b a% S
第3章 移动web软技能1 H- }' P# N& `
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
9 F* ?) H) `2 ^5 P% m" W3-1 代码管理工具&项目构建工具简介
( y3 b$ X$ r# I; r& D9 r) k3-2 webpack工具使用介绍
# n6 b1 c$ h1 Q/ v7 h k3-3 Sass预处理工具使用介绍+ m) Z" [' z: E# i$ d3 ]* O: d9 S
3-4 React组件化思想 试看
; S1 ?. Y3 b# `" u) A: I4 G
* r3 t3 E% B' f- n* p9 }* P( @* r' c第4章 项目开发构建环境搭建7 j/ H' @# i8 g2 H
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。* j2 B, R8 b7 \
4-1 项目和技术栈介绍 |* X2 \8 g5 Q$ v; D5 E4 I
4-2 项目演示 Y6 t ?% _. l. N) ?: k
4-3 构建环境搭建（1）
9 u- t9 {8 l5 b- C3 y$ K4-4 构建环境搭建（2）6 o+ t) A% m! W8 N* n( v
4-5 构建环境搭建（3）
& T7 H4 M3 F1 ]4-6 构建环境搭建（4）2 G/ Y6 V: Y. [0 v7 V% l& I: K
4-7 redux-react使用介绍（1）
# V1 n1 }/ d8 F% A6 t/ [4-8 redux-react使用介绍（2）
5 \8 O) l. j# Y. N& D3 b0 D3 T6 Y# O* E6 I/ B! c1 `- `7 k+ B
第5章 美团APP—首页开发2 @, a9 Z' T& ^ X$ ?5 t* E$ [
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
& b9 V* H, x# `+ L5-1 底部tab按钮开发(webpack-dev-server配置)( h5 `4 }2 X1 ^; V- _8 i
5-2 底部tab按钮开发-UI逻辑编写（1）3 L; `+ H8 V; P6 k( F' ?) o. I; r) y* r
5-3 底部tab按钮开发-UI逻辑编写（2）0 d5 \0 I7 o8 @
5-4 底部tab按钮开发(rem配置)
$ ?+ Z/ D* r% l9 N5-5 底部tab按钮开发(集成ESlint); b7 f- B: g3 y2 c* c \7 R& c
5-6 底部tab按钮开发(集成HMR)
6 \8 @- j9 \1 D. Q# j5-7 首页页面开发Header模块开发" f) W, W) k G
5-8 首页页面开发SearchBar模块开发
: F: ^; h8 ~: \8 A& _5-9 首页页面开发-Category模块开发（1）
% J! k% a) i+ y% X) b' S5-10 首页页面开发-Category模块开发（2）
3 S( l7 k. j% O% I; q$ H c& o5-11 首页页面开发(ContentList模块开发)0 V' Z. ]6 w5 V0 r( _
5-12 首页页面开发-ListItem模块UI开发
2 f2 R" c' a/ L. {3 ]: w& V; x5-13 首页页面开发-ListItem模块样式开发
3 h& f. r+ J0 l5-14 首页页面开发-ListItem模块数据渲染开发（1）* T1 e3 Q0 D9 k S2 O6 T3 p* t6 \; V, @8 h/ s
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )! F# b7 x; y# j5 w2 O+ I' C7 D
5-16 首页页面开发(滚动加载逻辑实现)* o# k( B1 j# ]4 t; g
5-17 订单页面开发(List模块开发)7 \( L2 W) ]# Y' B
5-18 订单页面开发(OrderItem模块开发)（1）
5 _$ H/ p8 V4 t5-19 订单页面开发(OrderItem模块开发)（2）9 B" E( P V! f
5-20 订单页面开发(公共ScrollView模块开发)
2 F& a' t9 H( T/ o6 V5-21 我的页面UI开发9 g9 U; }/ T: C5 Y5 Y3 H
5-22 我的页面样式开发1 g2 _; ~. {. b1 r7 h
5-23 集成react-router
/ H6 S& R" Q% N$ X, C. k; \; ?
2 a5 |0 x, g2 `6 U+ R' H# N第6章 美团APP—评价和分类页开发8 o: S1 C6 W: T+ f
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。3 h5 V2 t% K# q8 f: o. W: I
6-1 分类页面开发(顶部NavHeader模块开发)
( j! h* E! t, {: _6-2 分类页面开发(顶部Header tab 模块UI开发)$ z6 i' ?$ b1 q C2 S* Z; {, |
6-3 分类页面开发(顶部Header模块样式和逻辑开发) s0 `& b: K1 ]% [- W
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
1 }5 _! b1 ^! H; P# k/ g2 |6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
- g$ C" D0 T7 I! s @- Q6-6 分类页面开发(Filter面板模块样式开发)
$ h# k: m( C: P9 R% w6-7 分类页面开发(Filter面板模块item逻辑实现) Q! l3 K' m3 |9 f
6-8 分类页面开发(列表List模块开发)0 O5 x- L) O0 m3 V/ q7 Q. V
6-9 评价页面开发(UI开发)
7 v; C- i3 h. D* `; _6-10 评价页面开发(样式开发)6 l: S, a$ V4 H
6-11 评价页面开发(交互逻辑开发)
3 j! \3 [$ @; I; G4 B& k( p4 r2 O% R9 P9 ~# g8 Z
第7章 美团APP—详情页开发
( c. f9 a+ W# ]- L6 X5 E开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
$ ^/ I9 ^9 ^+ Q9 Q( E) q7-1 详情页顶部tab开发(UI开发)
% l5 d3 F7 T, C9 B* M" A7-2 详情页顶部tab开发(样式交互逻辑开发)
/ b% d% X0 M q# C7-3 详情页点菜页面开发(LeftBarUI开发)# }* M. s# `( d. ?8 \
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
( {* R1 P) b/ Y3 \+ E* B7-5 详情页点菜页面开发(RightContent UI和样式开发)
0 r9 k* H# R1 D" D3 y; S: a. O7-6 详情页点菜页面开发(RightContent逻辑开发)0 F; g' F; n3 p' E
7-7 详情页点菜页面开发(ShopBar UI和样式开发)# F K1 @, Z- M4 X
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
6 c( L8 x; q' E7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1） k7 z, S8 C2 T1 e7 u
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）( ^; Y9 J0 L, i; U0 ^
7-11 详情页评论页面开发(顶部Header开发)
' a; g# J/ `: W7-12 详情页评论页面开发(列表List 数据绑定)
/ x7 _5 ?; \5 M+ i6 W9 x o7-13 详情页评论页面开发(列表List UI开发)4 a6 D, C* S- G) @2 P: \ ?
7-14 详情页评论页面开发(列表List样式逻辑开发). @3 s# [6 O' w9 t% R3 z
7-15 详情页商家页面开发(UI开发)! [! d0 ?- j. u
7-16 详情页商家页面开发(样式开发)# }2 N/ J$ _8 p' P
# A! g5 ^; _7 F& w7 _ x第8章 美团APP—回顾与性能优化
( i7 D' q }, S- h: }% C. e, l( X通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
4 g/ X- G. v/ W, A6 n. H) W# y8-1 懒加载性能优化
4 P7 h# _3 L- ?9 |8 k3 ~; A8-2 JS和CSS公共文件抽离优化7 B8 L' f6 q! T; P
8-3 编写后台server读取真实数据
C ~9 w6 N# z, n8-4 多Tab 页切换与滚动数据加载优化/ K: W: B& [! n: y6 w
8-5 项目打包: H2 b0 j( X* @- }' e2 M; B
8-6 项目发布
' ?7 ^+ j o) Z3 x0 Y7 ? ^4 C1 m: o
第9章 美团APP与hybrid深度结合
# k' \, ]5 r8 f4 S* {: X. a1 z( a本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。- W' u' m3 p% ~4 {* j" d
9-1 JS bridge 原理 试看6 v. W* L; L/ x. \- F9 j
9-2 iOS webview + JS API接口+iOS APP集成
* K7 s; @8 k7 U7 \6 ^* V* |/ `" v# Z
0 W- n0 l/ \8 ~8 v第10章 课程总结
3 X% V: f6 Z& G6 J2 `% s V7 g, N" i回顾和总结课程讲解内容，能更好的回归和归纳。5 p5 L4 F, I$ U* T% P
10-1 课程总结
8 f+ X0 T" x; {& |* o
- P2 W( L& Q" P8 P$ Z8 A' l【下载地址】
" b3 ^+ A2 ]; a& D% O' V* j5 R3 T' d+ K
! w G) q# k, o2 {9 d9 l |
[复制链接]
