( \0 P, J# j# I* b
9 [0 M$ Y3 ~3 g+ n! g【课程简介】
f6 D9 E1 c% f本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
0 R2 P( {* y- a5 O* O! E! |/ o& V# `" w* w$ A# u1 _1 X
【课程目录】) A5 J' a+ Y6 P- ~
第1章 课程介绍, E' @1 I5 E' R
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
) }! p o g# L# l# E1-1 课程导学 试看
% ?. p3 O4 n) V% j2 o o+ u5 R2 |, w0 ?2 [" ^
第2章 移动web硬知识点
6 e; u# v! X- v本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。, g( d; \2 G+ u
2-1 移动web开发概述0 R/ P$ r+ }$ Y
2-2 移动web开发调试
' [( i- G5 s6 M" r, ^' w2-3 移动web适配概述) ]6 G* x8 Q: x0 L6 o
2-4 viewport视窗概念6 ~8 P' ]- P+ k
2-5 css3之flex布局7 e8 h" Z' B; @/ H
2-6 响应式布局和MediaQuery: a' [9 k j: _+ ^$ _* ^ i' ~
2-7 rem,vw布局与适配
6 b0 I r* X3 r, @. X+ e2-8 移动端touch事件详解. f, h$ }- x! N4 U; Z
/ [0 e8 T5 q: ~第3章 移动web软技能
8 f2 [' Z0 _/ E- D: ~; F% H本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。..., n/ ^6 K9 `) @9 n9 q
3-1 代码管理工具&项目构建工具简介' }/ t6 I3 V* H
3-2 webpack工具使用介绍. B! \; B1 C5 ^0 G
3-3 Sass预处理工具使用介绍4 ~4 v. T) L9 [" ^
3-4 React组件化思想 试看
: J& m* U7 W" s& X* }4 K0 G0 O# U
' r- J, L$ N, W1 Q1 D" g第4章 项目开发构建环境搭建
8 k6 V+ t' p7 N( q0 [$ X) Q本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
8 e" s2 N( X& O4 l! c9 U, t( U3 k4-1 项目和技术栈介绍5 w' H# f( W" {
4-2 项目演示" z6 Q& ?: a; [$ V0 [2 S
4-3 构建环境搭建（1）
/ F+ N3 c; Q# h0 z. X7 e4-4 构建环境搭建（2）6 F. O- F, w2 N! }6 Z
4-5 构建环境搭建（3）
, u: y( I3 D/ j0 C, u9 n! `4-6 构建环境搭建（4）
1 w2 p8 f# W) Z. K# n* P) x4-7 redux-react使用介绍（1）4 M) [; [4 ?4 e# |# o. k
4-8 redux-react使用介绍（2）
3 s" J- N& }6 ]* V+ d1 R' p+ r. S8 q3 m0 Z
第5章 美团APP—首页开发$ C( w8 e2 |' C- A3 }7 Y3 e* z* m
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。) d* W( d/ s" |# S- o: M- G+ m V
5-1 底部tab按钮开发(webpack-dev-server配置)
: e- g& N$ K0 D( t5-2 底部tab按钮开发-UI逻辑编写（1） H i! u. ~& k
5-3 底部tab按钮开发-UI逻辑编写（2）
( V% h% o' I1 ?' y7 B5-4 底部tab按钮开发(rem配置)
/ M' l) c6 O* j: O8 }2 k5-5 底部tab按钮开发(集成ESlint)9 x! V6 ]6 T$ Y' H0 K3 c
5-6 底部tab按钮开发(集成HMR): b9 k9 N j$ m! O
5-7 首页页面开发Header模块开发& ^1 R J6 ~% S
5-8 首页页面开发SearchBar模块开发
% h" W& u3 l% Y. [5-9 首页页面开发-Category模块开发（1）
1 a2 x2 W+ N8 [0 R! C5-10 首页页面开发-Category模块开发（2）2 j5 n! L2 n6 {. Y
5-11 首页页面开发(ContentList模块开发)
, V2 M9 D' q4 Q5-12 首页页面开发-ListItem模块UI开发6 B9 p2 G, T1 E$ y+ x5 ^
5-13 首页页面开发-ListItem模块样式开发
" A- A7 V. H* t- e' A P8 t5-14 首页页面开发-ListItem模块数据渲染开发（1）: r1 D, w( N( _
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
7 y# S3 D) E4 e+ i7 g. \9 B' G. ^5-16 首页页面开发(滚动加载逻辑实现)6 j5 h# u/ ^9 g! S" s: G
5-17 订单页面开发(List模块开发)0 i3 ]' s8 ~6 U! g
5-18 订单页面开发(OrderItem模块开发)（1）
0 o: M; c; C1 q+ c/ A' d5-19 订单页面开发(OrderItem模块开发)（2）
- j i7 {" ^. c$ {5-20 订单页面开发(公共ScrollView模块开发)
9 z' T% e! i7 X5 t5-21 我的页面UI开发
8 _! S3 a6 _4 N# `5-22 我的页面样式开发( u/ k$ K- n2 a* ], w
5-23 集成react-router
9 E+ x x5 q7 ^) h
8 ]" u, ` _( g- @, R E2 I第6章 美团APP—评价和分类页开发# l& u/ C6 i' H5 R2 k3 Z
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
: q. t7 A" `# n) E. y- X( E0 @2 e E4 {6-1 分类页面开发(顶部NavHeader模块开发)- R" y# {: k! R. @; B# R+ \
6-2 分类页面开发(顶部Header tab 模块UI开发)
3 d9 c, b' g: e6-3 分类页面开发(顶部Header模块样式和逻辑开发)
+ Z4 e$ B( d% N5 x2 `. C2 d( _6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
7 N* H |3 S, N) p4 R+ s3 @7 ~- t9 G# ~6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
" j& F: o( }- o; {$ [- i+ V6-6 分类页面开发(Filter面板模块样式开发)
. t7 B0 D, U9 T! Y4 x \7 N$ \6-7 分类页面开发(Filter面板模块item逻辑实现)4 z% G3 L* [7 g
6-8 分类页面开发(列表List模块开发)+ S2 @' v1 q' w' q8 S
6-9 评价页面开发(UI开发)
1 C& J+ j# ^: L" {# J$ n6-10 评价页面开发(样式开发)9 F Q# s, Q9 i
6-11 评价页面开发(交互逻辑开发)
1 b; q3 f* Z! ~5 N
8 d) G9 X4 Y/ O; K" O7 {第7章 美团APP—详情页开发9 K: `9 P+ @* H2 x
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
3 z0 X/ Z3 O4 H* O1 @$ u( I7-1 详情页顶部tab开发(UI开发)4 X& b9 E5 H3 `' I/ _6 E
7-2 详情页顶部tab开发(样式交互逻辑开发)+ D, n9 X" U+ p- e
7-3 详情页点菜页面开发(LeftBarUI开发)
, a% p1 {$ Q( V0 a7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
0 d6 w8 b1 c" |6 a+ _4 w. u# d) t6 W: R5 d7-5 详情页点菜页面开发(RightContent UI和样式开发)
1 x1 r( C; v) f( |7-6 详情页点菜页面开发(RightContent逻辑开发)
2 b1 Q! v+ x4 i: V: A% s' E7-7 详情页点菜页面开发(ShopBar UI和样式开发)" M5 l1 P, ]. w, w7 }
7-8 详情页点菜页面开发(ShopBar 逻辑开发)/ @, {" u% x$ t; }$ B3 [, A1 Y7 t$ M
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）9 L+ p) G* g3 D, Q
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
& o; L4 V8 P6 z( I/ F7-11 详情页评论页面开发(顶部Header开发)+ P% A) f7 H0 l5 o1 ~
7-12 详情页评论页面开发(列表List 数据绑定)( ] D$ I0 N& k6 m* r
7-13 详情页评论页面开发(列表List UI开发)
; }" t4 A! x; Q# u1 Z2 t7-14 详情页评论页面开发(列表List样式逻辑开发)
% w1 J( k& i9 j a7-15 详情页商家页面开发(UI开发)4 A# X- ~; J& Z2 T
7-16 详情页商家页面开发(样式开发)$ v/ H6 p9 m* b+ c$ h
1 f2 Q! h& E! w5 _第8章 美团APP—回顾与性能优化
& q. u2 ^: p/ F( T. Z: \6 V通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。..." Y3 a: a9 \: n. Q! u
8-1 懒加载性能优化
; o) P4 O) O3 a- W8-2 JS和CSS公共文件抽离优化
1 q' l. t! F3 L8-3 编写后台server读取真实数据5 W- R6 H3 Z5 V8 J: M
8-4 多Tab 页切换与滚动数据加载优化
% q5 U, | C+ h( A. A) h* ?1 {/ f8-5 项目打包* k3 d: A3 h& T
8-6 项目发布- }! P1 R$ G0 x n v
( a. H# r$ w \: x. _0 s$ T: t
第9章 美团APP与hybrid深度结合5 g0 p; w" j1 d
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。' v7 W2 ?" Z2 S* Q) t& b0 p4 K
9-1 JS bridge 原理 试看
4 n- n8 k) h$ }2 h9-2 iOS webview + JS API接口+iOS APP集成
2 G! n9 `' G( z% N! C. |" m! h- N; |# a) R. H# D, j/ T. c
第10章 课程总结. F# g( Y0 W% v* ]" @1 P3 }
回顾和总结课程讲解内容，能更好的回归和归纳。
1 M- z( Q- j7 d10-1 课程总结9 \' _( W- x) a
! u% N3 k# P' x' x) a. ~; v7 W【下载地址】8 E) ^3 ^. l% Z4 l
E) r5 |- F$ _$ |) ^
) A6 |6 |) V) U N |
[复制链接]
