; Z. Z3 [. d* ~* J/ \
# h# L. N- f! z$ f【课程简介】 [9 r, T! P" ^' x6 ?8 `2 A3 m
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。5 k' J$ |$ p2 X
) w' x" o S! r/ l8 |【课程目录】
0 S7 b, `/ F2 v2 m+ s% v5 S第1章 课程介绍7 K4 f |0 s' G2 ^1 b
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。3 L2 e0 E+ ]5 @( Y. }
1-1 课程导学 试看
2 n8 e8 O6 X$ \4 i* _- k2 |4 ]6 D: E+ x& P% T4 P. D- k, ^
第2章 移动web硬知识点) B9 k( h) N3 U; z8 B# d! x
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
# Z2 Z$ b _& E6 M1 Q2-1 移动web开发概述6 u; _9 S$ S7 b7 A+ n5 S$ ^, R
2-2 移动web开发调试, ?+ \4 b( c3 p6 f
2-3 移动web适配概述
1 A R1 p6 b, f( r2-4 viewport视窗概念
# e- B- h4 {9 {+ _4 U) T) b4 d Q2-5 css3之flex布局" c+ a- j. T8 M s$ r+ f$ b/ L% l* h
2-6 响应式布局和MediaQuery: b: O2 y K7 T' d! A& B& k
2-7 rem,vw布局与适配
5 A n/ ^) a! n0 ^2-8 移动端touch事件详解2 _8 ^+ P! v; o* L
3 p9 b3 H% I) ^7 ?/ Q
第3章 移动web软技能
) H, e2 z. t9 q9 u' O本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...5 G8 G9 X3 Q0 P9 _2 j1 T# y
3-1 代码管理工具&项目构建工具简介4 E% C6 ]. r; d# V0 Z; ]. E
3-2 webpack工具使用介绍& o" b0 O' I9 E9 Q* v3 n1 M
3-3 Sass预处理工具使用介绍
7 M" j' w q4 p. x, m5 k3-4 React组件化思想 试看
! K, d0 K" W+ _$ | ]8 W& W- W+ X( j- j& D
第4章 项目开发构建环境搭建
/ U% K' m7 B9 h6 M+ b2 S: N本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。$ C u4 `& L; p9 y6 h* ?0 Y# f
4-1 项目和技术栈介绍
2 @. B! G, R/ c, w4-2 项目演示
2 q" @0 J# j; t6 U8 @$ W1 {0 e4-3 构建环境搭建（1）
9 V: a% D) L4 D) `% ]: Q9 J4-4 构建环境搭建（2）
n3 `7 @+ t0 n4 ?( s. ~( {% @4 @4-5 构建环境搭建（3）& w2 c/ j. @/ v& {
4-6 构建环境搭建（4）
; p( e3 j, Y @/ o6 e4-7 redux-react使用介绍（1）
; C) w: C, S6 R& o0 y6 @. j4-8 redux-react使用介绍（2）& q5 ?1 {$ S. G1 c$ J9 n+ F
0 U' z" i' Q9 a! D1 n: ^0 ]6 t3 O第5章 美团APP—首页开发: F- K2 U4 p ]# F5 A
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
+ _4 |% Q& {& b5-1 底部tab按钮开发(webpack-dev-server配置)
9 H) i- H4 o G0 I5 ~ T* U5-2 底部tab按钮开发-UI逻辑编写（1）8 @( m. S+ Z4 ~9 Y* `, d
5-3 底部tab按钮开发-UI逻辑编写（2）
- z1 b- H& @7 G) ?1 G5-4 底部tab按钮开发(rem配置)+ F( q; l1 L. k* A* Y
5-5 底部tab按钮开发(集成ESlint)8 ?4 A2 b9 M& {( i1 O8 r& Q( f
5-6 底部tab按钮开发(集成HMR)1 o% H; c7 y8 Z4 m5 C* x
5-7 首页页面开发Header模块开发6 A+ i$ z p: C a; P" `
5-8 首页页面开发SearchBar模块开发$ E/ W9 X5 }3 Z k& e
5-9 首页页面开发-Category模块开发（1）
D8 t6 d0 c4 H$ i# N! [5-10 首页页面开发-Category模块开发（2）
1 Z% I4 v/ E( g; Z5-11 首页页面开发(ContentList模块开发)
$ y3 a: _* A* i) K5-12 首页页面开发-ListItem模块UI开发
V* ^4 s( \/ K- L4 P7 Y5-13 首页页面开发-ListItem模块样式开发
% ?% g( ~2 P% G/ l8 ]' `6 b5-14 首页页面开发-ListItem模块数据渲染开发（1）
& w! |( T2 {- K; S% c5-15 首页页面开发-ListItem模块数据渲染开发( 2 )$ `! x3 N1 y2 R/ t, v- g5 o
5-16 首页页面开发(滚动加载逻辑实现)
A3 h2 a4 A [ b4 [' t5-17 订单页面开发(List模块开发)
) @- D; ? s& H9 ]1 C5-18 订单页面开发(OrderItem模块开发)（1）
- w, A7 Y, }( ]' O( m7 ?7 G9 a5-19 订单页面开发(OrderItem模块开发)（2）
& e8 T# B7 Q% f8 O8 G9 i4 \5-20 订单页面开发(公共ScrollView模块开发)
6 U( d" {! B9 k# O. h& v/ d' t) U5-21 我的页面UI开发$ K& q* x5 E6 Y$ `& c5 [! B: _
5-22 我的页面样式开发
: X5 r* I4 h+ a' H: `+ h5-23 集成react-router- ]1 @. ~: X' I
, x# \" i$ L9 P0 c# G+ @3 @第6章 美团APP—评价和分类页开发( V; s4 b, }4 s1 ~% K+ T5 Y
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
" r( m0 H# X3 Q3 o: I- f. Z3 I6-1 分类页面开发(顶部NavHeader模块开发); c$ {& h) N; D0 U7 t. e& W
6-2 分类页面开发(顶部Header tab 模块UI开发)2 I& v; o( R+ u6 N) ?0 V
6-3 分类页面开发(顶部Header模块样式和逻辑开发)* M0 @" I' N2 w5 W! F( R
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)& U2 R: N& ?) U8 W
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现7 l% W) d, X9 l- ?" `/ y$ t a
6-6 分类页面开发(Filter面板模块样式开发); I% o4 O! ~7 x9 m* @
6-7 分类页面开发(Filter面板模块item逻辑实现)$ p( h% Q" n8 ~' c% x5 j! r
6-8 分类页面开发(列表List模块开发)! j5 _" O3 A4 N- r
6-9 评价页面开发(UI开发)
) c1 Z4 |0 m3 q4 M6-10 评价页面开发(样式开发)/ }6 i5 @2 @0 p4 X6 K$ W5 q
6-11 评价页面开发(交互逻辑开发)
. \6 _) q. d/ v" a
* Y$ d. |1 i4 _6 r: [ z, w- i第7章 美团APP—详情页开发% j6 J4 A5 [) n! M+ U9 x
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。 g& Q$ t. F# I' F# i3 `
7-1 详情页顶部tab开发(UI开发)2 c' O: W" l5 O3 g7 h* f8 H" M
7-2 详情页顶部tab开发(样式交互逻辑开发)1 r6 X6 x- p* \% ?/ _- _8 X! `
7-3 详情页点菜页面开发(LeftBarUI开发)
s% P9 b! s5 s) \7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
, {$ h, @) `* P; H+ E7-5 详情页点菜页面开发(RightContent UI和样式开发)
' B8 S- I4 F4 O7-6 详情页点菜页面开发(RightContent逻辑开发)
: g* x5 ^4 D5 h8 p2 y& c4 g2 \7-7 详情页点菜页面开发(ShopBar UI和样式开发)
_; F& B" R) z% Z+ E6 v7-8 详情页点菜页面开发(ShopBar 逻辑开发)
, d8 G7 g' |6 M* k4 _0 m( m9 A7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）0 a" Q4 V$ |- ^9 p2 {7 l
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
( j/ ~ }& n: w) S& o* U6 p7-11 详情页评论页面开发(顶部Header开发); ^4 B& T; q* A
7-12 详情页评论页面开发(列表List 数据绑定)
2 y% ?* N: \9 M$ L$ l( r7-13 详情页评论页面开发(列表List UI开发)8 \! ~0 t* n8 o
7-14 详情页评论页面开发(列表List样式逻辑开发)! P3 g( f6 w: U w6 g' E' I
7-15 详情页商家页面开发(UI开发)
% h0 S8 y' N) B. e6 k; B" Q3 E/ g7-16 详情页商家页面开发(样式开发)' r; h! [3 {' o5 K/ @% I
4 ~' O: H: j1 c2 h# \, r' w# m
第8章 美团APP—回顾与性能优化
3 {: ?/ c J7 L) x9 x: K5 C$ K5 ]$ s通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...1 v+ Y a! f) g, q% _( q+ E) j. u
8-1 懒加载性能优化
9 O+ o; b1 S( U# z% y8-2 JS和CSS公共文件抽离优化
9 L$ A! O2 W- R5 n3 [& H2 C0 A8-3 编写后台server读取真实数据) X6 e U+ o& \* y1 L2 ~& \
8-4 多Tab 页切换与滚动数据加载优化2 H5 U/ e' @9 U/ a& C z4 N; y
8-5 项目打包0 F W. q& v& L6 G
8-6 项目发布& \. V3 w+ B9 }7 i9 T. W0 X
9 X9 m6 h% K$ t7 x" V& @' ], m第9章 美团APP与hybrid深度结合
# d* \8 K5 c: H4 I8 C7 y- Y7 {本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
! A; F4 v9 \. [6 _( {; t: B9-1 JS bridge 原理 试看
* y: p4 U4 D( ~8 G$ t! z9-2 iOS webview + JS API接口+iOS APP集成
: U( [. Z& y* O, e+ m5 q4 Y; d4 ?4 c; c; K0 U: ]9 f- ?
第10章 课程总结
( P, z9 O; L& C# Z- Y回顾和总结课程讲解内容，能更好的回归和归纳。; c6 Q4 L, q3 n" s. S
10-1 课程总结
; d$ a, U% f/ ?
6 U# p L# O2 j+ z& X7 E【下载地址】
+ d' `" G( _) f+ H3 D/ F9 w' ?: d
! j1 ]( s/ E7 g0 `3 y6 N
|
[复制链接]
