' u% S6 p/ G( J B' w! I5 q/ M$ F2 q" J
' ]9 M; v0 w4 @# F
【课程简介】0 u5 C [8 H# L/ W3 {( d# \& ^
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
6 `- }! \6 v, v0 ~1 F7 m. |4 ^5 I
C$ P6 n7 v4 {$ q+ T【课程目录】) h9 l9 J- h3 |% B: o/ f- {8 R N7 }
第1章 课程介绍5 |# _0 o6 v2 G
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。9 I4 U) U: g8 m$ N% C# ?4 M
1-1 课程导学 试看
/ K s0 f N+ m, W9 V( e3 {3 z) V! |& e2 o# n2 G
第2章 移动web硬知识点: z7 j0 {. H( g# s" V3 D! j- D; W
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
- J% U* \* @* F8 V2-1 移动web开发概述
s8 E& {% [4 J! o5 M7 w- i n2-2 移动web开发调试
( f6 E1 }9 n' b# E: Y% v& Z& x2-3 移动web适配概述6 o6 M- A7 T8 G% V; D
2-4 viewport视窗概念9 C) o2 S; C2 ~: N; C9 d
2-5 css3之flex布局
. A. [2 A4 a8 \6 E' \* y2-6 响应式布局和MediaQuery1 P; L$ g! h9 e9 P9 O* k r) L$ o" Z0 r
2-7 rem,vw布局与适配* E5 M* |1 h( T) s
2-8 移动端touch事件详解
# `/ N$ n8 R3 C& G2 y1 U
1 C& N. b# h% e+ r( V' e第3章 移动web软技能$ f l5 g+ n! S) H# C+ [
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...1 h/ T& b% e) I( Q; P4 S
3-1 代码管理工具&项目构建工具简介
) |, i) W* K6 i4 |8 L, R" n1 w% m3-2 webpack工具使用介绍
+ u2 z7 Z' x V4 b% H3-3 Sass预处理工具使用介绍- \8 \4 `% B$ t" _
3-4 React组件化思想 试看
2 A3 X3 e8 S& L4 `2 h0 w+ j
6 q2 w- Z& x# N) ?" J( q5 k, M第4章 项目开发构建环境搭建
( @/ }' \ j6 B; e9 {/ W) _. t本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
1 r/ ]) h& `7 J7 c4-1 项目和技术栈介绍# K( Y' Q4 p2 i# [2 {' x* o$ a: J% _
4-2 项目演示
' D5 P* ^8 f( [4 }- i- A4-3 构建环境搭建（1）* @3 M9 e6 i4 \0 o# r* A
4-4 构建环境搭建（2）# A2 a9 E" V2 s `- ^6 t5 ]
4-5 构建环境搭建（3）9 E. P& ]# D2 v; e# h
4-6 构建环境搭建（4）$ f' }# e7 Z w9 q
4-7 redux-react使用介绍（1）0 k& d$ D3 u4 w
4-8 redux-react使用介绍（2）/ X% t7 m5 z! {
9 k/ U3 e- H1 y" N5 _3 g第5章 美团APP—首页开发4 M* Y4 {# P) r" d- t8 T
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
5 j' G" C) v! r8 ?2 W5 l( O8 L5-1 底部tab按钮开发(webpack-dev-server配置)7 j/ Q5 U' b6 e/ K: k# M. P
5-2 底部tab按钮开发-UI逻辑编写（1）
" v/ a. B; r$ c r, J5-3 底部tab按钮开发-UI逻辑编写（2）2 s1 C1 G G8 e3 c ]
5-4 底部tab按钮开发(rem配置)
; M- T- _/ ^- y/ v5-5 底部tab按钮开发(集成ESlint); {' g- A! [' Z/ ?4 [, E
5-6 底部tab按钮开发(集成HMR)
( l. U+ ^/ _) ]6 e1 V5-7 首页页面开发Header模块开发
9 B" _- ?( s' ^8 t/ E9 G* d5-8 首页页面开发SearchBar模块开发, S$ N+ R+ y! u, Q, i& B
5-9 首页页面开发-Category模块开发（1）+ w3 Y$ q( w4 D3 s: U4 o
5-10 首页页面开发-Category模块开发（2）; c" T2 }( r/ D5 [7 y
5-11 首页页面开发(ContentList模块开发)
* i# t" G2 D T5 N5-12 首页页面开发-ListItem模块UI开发- g9 {! y. W" o3 Q0 f& a
5-13 首页页面开发-ListItem模块样式开发6 }" I% a0 i: h% o/ }
5-14 首页页面开发-ListItem模块数据渲染开发（1）
( v# W$ h* }# p: M/ p5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
( W3 u# {+ |5 K( f' c5-16 首页页面开发(滚动加载逻辑实现)
3 d' x8 U/ L4 }: ?$ c% x O5-17 订单页面开发(List模块开发)
H9 @/ s% Z' a% \7 c$ W" k* s5-18 订单页面开发(OrderItem模块开发)（1）( p5 G: l* H% i7 Q) `: q2 W0 t
5-19 订单页面开发(OrderItem模块开发)（2）% h T: @) `# X8 s
5-20 订单页面开发(公共ScrollView模块开发)
8 x5 E; R. S: i5-21 我的页面UI开发% b* {9 I5 n9 B
5-22 我的页面样式开发2 `/ d8 W8 _' d+ X3 F" ^$ U
5-23 集成react-router
$ I& h! A) R1 o: c% {/ n8 ^( P- E: q4 f- W/ B z* _
第6章 美团APP—评价和分类页开发
4 @1 C! r" F6 n开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。7 B& R8 W$ {* T, @2 c
6-1 分类页面开发(顶部NavHeader模块开发)
) v) X) S! g" b* }0 h" e; `6-2 分类页面开发(顶部Header tab 模块UI开发)7 ] _4 b) R1 R: I! R# k& T
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
; F! u* w/ S" C/ N6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
$ `0 `4 Z, o7 }6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现/ X/ f( g1 [" B
6-6 分类页面开发(Filter面板模块样式开发)8 K/ b9 P8 {+ Q- T+ h$ o \
6-7 分类页面开发(Filter面板模块item逻辑实现)
. U/ \- K4 {% ^6-8 分类页面开发(列表List模块开发)/ N* _0 C* z: R( ?/ }% C
6-9 评价页面开发(UI开发)5 C- H7 f' W; E1 n/ k
6-10 评价页面开发(样式开发)
# h1 r; k; \2 n' {6-11 评价页面开发(交互逻辑开发)
( H7 m3 E- Z2 v& `, z2 I" C+ }
8 _( N" g# a" M第7章 美团APP—详情页开发+ z1 j8 c" Z' j. G: S# }
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
0 u& W2 t& [ v9 M- r7-1 详情页顶部tab开发(UI开发)$ s5 Q* g9 |# c+ g, L: T
7-2 详情页顶部tab开发(样式交互逻辑开发)
( q' W9 w! b( h& R P7-3 详情页点菜页面开发(LeftBarUI开发)' J& `) ?- E6 k6 f" w5 `$ S( C2 B
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
1 g5 n$ c6 @# q4 S3 \$ ?) R7-5 详情页点菜页面开发(RightContent UI和样式开发)
$ E9 K: }: l+ M* n0 l, i% L9 ^7-6 详情页点菜页面开发(RightContent逻辑开发)6 h* w5 k/ L a3 p
7-7 详情页点菜页面开发(ShopBar UI和样式开发)
3 b; p% c- u5 H0 s( R# n7-8 详情页点菜页面开发(ShopBar 逻辑开发)3 G, L( k* X" q4 {7 U
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
, w0 l1 V' {3 F1 u9 S: Q7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
) p# l# M2 I/ N" e$ j0 O6 ?7-11 详情页评论页面开发(顶部Header开发)
; Q1 \ K8 w( N& h2 e4 @: H+ c7-12 详情页评论页面开发(列表List 数据绑定), C5 }- c* T; d+ O
7-13 详情页评论页面开发(列表List UI开发)
% }$ M) y6 I& s' I. a" H) D" j) O7-14 详情页评论页面开发(列表List样式逻辑开发)! [; L+ |4 _& C7 e" ^" M
7-15 详情页商家页面开发(UI开发)+ |8 J7 w' f' M- V& e( l/ P2 H0 `/ Z
7-16 详情页商家页面开发(样式开发)* K& Y! A) K/ e5 h/ J- L; j
" n3 t+ v. @. U
第8章 美团APP—回顾与性能优化) C: A+ X; S( i- ~; L
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
5 a6 G- s6 Y/ k: {! o- g) @- o7 G) T8-1 懒加载性能优化
2 [' E: W$ C0 U0 C8-2 JS和CSS公共文件抽离优化
. p7 _! m- _4 y7 Z- _& @8-3 编写后台server读取真实数据
! _% a( Y5 N: E' b. r8-4 多Tab 页切换与滚动数据加载优化2 L7 A g9 ? w2 q
8-5 项目打包
; }9 s& O+ v) b9 p; v) j8-6 项目发布
3 n' `. A" q# V8 m3 ^1 _
8 s1 a* i6 @9 y9 X+ Y5 C第9章 美团APP与hybrid深度结合1 u2 q5 P' ?! a0 o* n3 T, d( ], k
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。4 A$ G9 y3 A1 O& m+ {- I! z
9-1 JS bridge 原理 试看
1 ^; S, E: L E1 R5 M) Y9-2 iOS webview + JS API接口+iOS APP集成6 S5 c4 r7 P2 c# D4 g9 Q8 S
3 M: U+ w- M5 g- z0 L1 A1 O! @4 q
第10章 课程总结; _" q% ~. {9 ^) w6 Q$ _( e. }1 a
回顾和总结课程讲解内容，能更好的回归和归纳。/ r" L3 @/ k* w8 }
10-1 课程总结/ ?; L) \& n+ e
) L/ q! e! S* J* \% |% n1 ~
【下载地址】
8 H3 g0 b' c* b( G! {- i/ M- m
& n: O* _% d' T* e7 A& [# W
2 N9 z c1 V2 x- G$ a: ] |
[复制链接]
