, Y! A' n! E9 \* {
. i. ]; a. j+ C+ f$ A1 z
【课程简介】
8 P- ?; m6 @ `' p4 X9 |6 g本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
( B* y, ~0 ?8 F1 y7 O3 l$ r3 k2 U6 g% M w! N5 U' I
【课程目录】
( s. Q: m9 c1 [0 k& ~/ y第1章 课程介绍
+ [4 X: j+ k3 ~3 c4 M) Y通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。% _ }% K8 I' l. B( {0 p% [
1-1 课程导学 试看
5 b) | I9 f# R5 I( r7 N
& s& K3 \$ ~1 r1 U4 A/ T d+ J第2章 移动web硬知识点. [5 _, Q( \, g# F
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
& `- [- y" p: {3 l2-1 移动web开发概述
5 E% C2 D. p$ }9 I Q# `/ R& D2-2 移动web开发调试5 J, [: {! P, `
2-3 移动web适配概述
# y$ ~; |* [& d' ~9 l6 p% s; O1 S2-4 viewport视窗概念) R ^$ T# `8 U
2-5 css3之flex布局
$ A$ U6 @% r+ x3 n2-6 响应式布局和MediaQuery
' A# @$ v, M' @, m. w2-7 rem,vw布局与适配
- O$ o# S& {# O2-8 移动端touch事件详解) P& i1 j9 ^1 Y u. Q% ?
( k& s, M& _/ o) j4 A- D第3章 移动web软技能
) N% k/ R g6 V$ @$ M# O- z; y本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。.... m, d* r5 a+ U4 E8 Z; I+ f
3-1 代码管理工具&项目构建工具简介
+ F6 @9 c. G6 j& C. A `4 n5 }1 @- h3-2 webpack工具使用介绍
* k, p$ T) N% p. A3-3 Sass预处理工具使用介绍
* m% D: m; C3 @) @9 y9 i3-4 React组件化思想 试看9 W4 i+ W- ^. x' k8 P# U& {* r8 |
9 L: U% k+ B* g% \3 H% b* T# C+ n
第4章 项目开发构建环境搭建
) _ U& C/ X2 p) Z. W+ X* w0 F4 H本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
5 O) @! T$ e: [- [5 H2 k4 B5 n4-1 项目和技术栈介绍. J" e% S3 a' y4 Y# @% _: }# T+ O
4-2 项目演示8 o3 _5 b6 B( ^8 {/ R4 s
4-3 构建环境搭建（1）0 S# g( E# ~9 z- @" O4 ~5 w" L. q
4-4 构建环境搭建（2）+ p( A+ T5 d& @6 K$ m
4-5 构建环境搭建（3）2 C; @3 H. R8 M, B5 `) [3 G: |4 p
4-6 构建环境搭建（4）1 k/ v O, \5 y+ t% l
4-7 redux-react使用介绍（1）
; J/ y# l# {3 j+ z* R6 a/ E4-8 redux-react使用介绍（2）; C: Z2 C* R, Q
3 F: z3 U# U4 ~4 z
第5章 美团APP—首页开发8 K: E7 B4 O+ i! R
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。7 } Q {. F6 O( b9 b$ A+ M, C. J
5-1 底部tab按钮开发(webpack-dev-server配置)9 z' {; X: H9 y. F3 B2 O
5-2 底部tab按钮开发-UI逻辑编写（1）
2 M$ I" T; g8 H& b- P: u! O2 V5-3 底部tab按钮开发-UI逻辑编写（2）) G8 i& h+ |" c& e7 K" V
5-4 底部tab按钮开发(rem配置)
/ Z) r: c9 \0 E0 P5 Q1 x2 p5-5 底部tab按钮开发(集成ESlint)3 Z f0 ]" s) G* D2 I
5-6 底部tab按钮开发(集成HMR)
# }% r& `- Y- d2 X2 ]( z5-7 首页页面开发Header模块开发
; P/ G0 I- Q' }4 B2 \( w8 ?. B0 b5-8 首页页面开发SearchBar模块开发
1 |5 ~( }+ M+ o) ^) }5 A V, y2 V0 s5-9 首页页面开发-Category模块开发（1）1 s5 u/ L' a7 y% ^: w: m* O; d) N
5-10 首页页面开发-Category模块开发（2）
7 V' t" \% a6 D8 I5 ~, t5-11 首页页面开发(ContentList模块开发)$ h$ D3 k I* \+ ~7 _) o$ @
5-12 首页页面开发-ListItem模块UI开发: i/ J4 j) }! P7 O6 u7 T0 D5 z7 X
5-13 首页页面开发-ListItem模块样式开发
/ U0 x* S* J( J5 w3 U5-14 首页页面开发-ListItem模块数据渲染开发（1）: b2 m2 V+ ?* S! l! A5 M
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )& A' P- R9 f. _. U# \0 E
5-16 首页页面开发(滚动加载逻辑实现)
# a) i$ b4 c) t: }& c& j1 l5-17 订单页面开发(List模块开发)
& z8 X0 J3 }4 ]& \5-18 订单页面开发(OrderItem模块开发)（1）3 h1 l' U0 y! T' L% e$ r# [
5-19 订单页面开发(OrderItem模块开发)（2）2 E$ F% @- Q. U2 f k! D3 v
5-20 订单页面开发(公共ScrollView模块开发)$ u! P3 F! ]* m# u; T
5-21 我的页面UI开发5 W o6 |2 d, Y5 z( m$ L
5-22 我的页面样式开发: d* S- l8 o5 S
5-23 集成react-router& m$ L# R6 j% Z& E5 h
4 j+ Z4 x. n- N/ @第6章 美团APP—评价和分类页开发
2 a' A: W: \4 N) y2 @. I$ q开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
4 x, D5 A; m5 V" J/ z1 W6-1 分类页面开发(顶部NavHeader模块开发)6 d% x( b+ P( n( {2 |+ x; l0 t% F
6-2 分类页面开发(顶部Header tab 模块UI开发)7 M5 \2 K4 j7 n
6-3 分类页面开发(顶部Header模块样式和逻辑开发)' |8 ?; k% d$ N0 K$ {. S
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)2 ^, Q0 H0 l4 Y" ~. c5 Z p
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
U0 s/ n1 V# z' N. g" k6-6 分类页面开发(Filter面板模块样式开发)
0 M& H2 {* W8 y5 o1 F" D6-7 分类页面开发(Filter面板模块item逻辑实现)8 W5 a. ?5 r% M1 o) n( q& _. R
6-8 分类页面开发(列表List模块开发), ^3 d; T- N/ p& P$ G. ~& a
6-9 评价页面开发(UI开发)
- j( W$ m2 D! i0 a6-10 评价页面开发(样式开发)7 L6 G- @3 I1 a- _6 k6 c8 [
6-11 评价页面开发(交互逻辑开发), W! B a6 P8 F' R8 [
3 r) [6 ~* x0 Q# Q+ {
第7章 美团APP—详情页开发
9 d! N0 C" c: W4 E! e开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
# G2 q4 m7 h0 ]7 O7-1 详情页顶部tab开发(UI开发)
0 t I2 ~ Y' @- c7 c+ t8 q- }$ `7-2 详情页顶部tab开发(样式交互逻辑开发)
+ w; K/ V$ w# s8 Y, g7-3 详情页点菜页面开发(LeftBarUI开发)/ z; g& n2 l1 n. W9 R9 U
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
2 m$ Y3 l8 v0 Z5 R7-5 详情页点菜页面开发(RightContent UI和样式开发)6 k$ X" j: b8 \
7-6 详情页点菜页面开发(RightContent逻辑开发)8 a: x- z9 u" P1 D
7-7 详情页点菜页面开发(ShopBar UI和样式开发)
% |! ?) _7 n9 w- ~9 |8 p7-8 详情页点菜页面开发(ShopBar 逻辑开发)/ U7 x- {# h2 l: L* O1 H
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
1 S4 n6 h+ d# i& w7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）' @1 d/ _5 H$ p' H) O
7-11 详情页评论页面开发(顶部Header开发)
' Y; r! H& Y! d- B9 t7 l% ~4 P( _7-12 详情页评论页面开发(列表List 数据绑定): t, J- e; y! ~: ~
7-13 详情页评论页面开发(列表List UI开发)
* R B( `2 v" o5 ~9 L+ C# [1 _; Z7-14 详情页评论页面开发(列表List样式逻辑开发)( d$ J9 m4 J" n# h5 Y2 m) d
7-15 详情页商家页面开发(UI开发)
3 p& q1 R9 g$ e7-16 详情页商家页面开发(样式开发); `! W3 ?% e; }: r: L
* B3 E% n' t1 X- H9 M$ L0 U第8章 美团APP—回顾与性能优化 J7 D, z0 V% d+ m
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...0 }. a0 B t, V* t+ ?; A7 g7 i1 F
8-1 懒加载性能优化
3 C J6 |( c, \1 l$ r8 H) Y: O8-2 JS和CSS公共文件抽离优化
4 R2 R: n+ G7 k c/ x8 G3 a8-3 编写后台server读取真实数据) |# `. g9 \& E) m9 [) G+ W2 {2 D
8-4 多Tab 页切换与滚动数据加载优化, h* r/ K5 D d# L# G
8-5 项目打包/ D# X! o1 J G8 h! U
8-6 项目发布 o' U7 ~# J0 w- b% ^
8 u" |( Y1 F. R3 `2 i
第9章 美团APP与hybrid深度结合% J' m8 c$ [( Y! g/ M2 r6 }( s: G
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
9 l/ g( h1 j, [- {- w6 J9-1 JS bridge 原理 试看
$ O2 Y d- ^8 @- B& a; d4 e8 m9-2 iOS webview + JS API接口+iOS APP集成" W% ?4 _1 p ^% Q# I# Q7 U" [
3 {( I" O8 s! J# k' `& @
第10章 课程总结
/ _2 V" ~0 s( x8 e6 |. \回顾和总结课程讲解内容，能更好的回归和归纳。
$ ]. k1 d( w3 A10-1 课程总结
8 f" P, K# C+ }% Q7 d$ o2 _! X6 l" O9 q K1 H2 G
【下载地址】1 V1 F6 f! m5 p0 F" t# G8 B& V8 D
3 q) X3 k& t- p1 f( w1 e) Q" d2 ]2 l* e- `
|
[复制链接]
