" O/ y4 i) [$ n/ D, l
; r, d1 V! {' D! {8 g# o【课程简介】) }% G) ]8 F+ z, c/ \
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。5 d/ Y# |6 l! n% b; ^3 f
9 t# C; s) D) Y/ A$ N
【课程目录】3 T6 G- _# \+ @ I
第1章 课程介绍) v* L1 P" N6 t
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
" l$ N% J( g: s6 Y; L3 t- ]/ V' e1-1 课程导学 试看" P) |- ?4 D9 [" p1 B- ]
0 _) L- _. z4 g第2章 移动web硬知识点8 V6 i( Z6 q9 G% Z0 u) i
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
) P j A4 h$ K" L2-1 移动web开发概述: S% m1 \8 b% s: H4 c
2-2 移动web开发调试! s3 Z/ z" J1 S0 ]6 `6 a% @+ ]# s @
2-3 移动web适配概述! `! i. z3 x) e
2-4 viewport视窗概念! D( U- d8 J4 [1 L: x# Q
2-5 css3之flex布局: S& U' x9 I0 A9 W) f
2-6 响应式布局和MediaQuery
t9 ]4 |9 U; q2-7 rem,vw布局与适配$ h" Z/ l( }, L! ~9 X, [0 E
2-8 移动端touch事件详解
0 w/ ^! D2 M8 b; S
# C, U3 w% h) K+ n/ } s第3章 移动web软技能& Q- c# L6 j& t9 d# b5 D
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...; G& x5 }- y4 P- Y5 x5 e/ S4 e
3-1 代码管理工具&项目构建工具简介. j6 |' D0 f6 h' J( N4 M: v
3-2 webpack工具使用介绍
" l& b5 r2 p W6 l3-3 Sass预处理工具使用介绍
$ j O9 B8 y& Z2 I5 P3-4 React组件化思想 试看" [% V- B: T* w& M( }0 c) j
- R7 c+ h- }4 `- D5 P, c6 {
第4章 项目开发构建环境搭建* N/ k$ p, B7 L( [. N
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
3 `) i# f) n- j' ]4-1 项目和技术栈介绍& Q3 H& I5 v6 c4 m- [' f
4-2 项目演示
. \" g0 C: N7 ]( r4-3 构建环境搭建（1）9 o/ R: ?9 e: v8 x7 C$ `1 z
4-4 构建环境搭建（2）
' `9 p x! e; n: ]. U4-5 构建环境搭建（3）
* P" ]- U' X6 i% F1 W' g9 N4-6 构建环境搭建（4）
( l$ ~" T3 ~6 J4-7 redux-react使用介绍（1）3 j* @' X' b# b1 o! h7 `, U# \) u
4-8 redux-react使用介绍（2）- q! `! D+ P2 Y) V; |; ]# U- _
" K) m. W, m0 X% I4 U& C2 c第5章 美团APP—首页开发
# _1 j6 T/ h# j* p- e4 [7 ~开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。0 r8 y: R# z6 [" ?, }$ u
5-1 底部tab按钮开发(webpack-dev-server配置)& O: u' ^! t# K) j1 B0 Q1 c3 U
5-2 底部tab按钮开发-UI逻辑编写（1）5 _' G3 h0 N( n5 u* e( Y( S) J" t
5-3 底部tab按钮开发-UI逻辑编写（2）, j0 D+ t( Q7 J: S. U! b9 n: r) K3 f4 _* _
5-4 底部tab按钮开发(rem配置). f* J, g) q6 T* e, s
5-5 底部tab按钮开发(集成ESlint) f( V! p4 D2 z9 V9 K2 Q/ q
5-6 底部tab按钮开发(集成HMR)/ U8 J U8 t3 K8 ~$ q
5-7 首页页面开发Header模块开发
4 G, d: U' j. x5-8 首页页面开发SearchBar模块开发3 B; O0 D$ I0 k( D+ V
5-9 首页页面开发-Category模块开发（1）
; [" u; z. j9 y% \+ t- }* q$ o1 Z. X5-10 首页页面开发-Category模块开发（2）
- S& G; p6 B/ {; d, M5-11 首页页面开发(ContentList模块开发)
4 D" f2 m3 B3 t' o6 G5-12 首页页面开发-ListItem模块UI开发3 i2 r7 ^9 k4 q+ \& T- g0 N! @/ \
5-13 首页页面开发-ListItem模块样式开发. h- d, z+ l5 [. [& V s
5-14 首页页面开发-ListItem模块数据渲染开发（1）6 S9 S$ ^5 H1 I( ?5 {
5-15 首页页面开发-ListItem模块数据渲染开发( 2 ) ?- O; Q4 T- t2 U% K: n
5-16 首页页面开发(滚动加载逻辑实现)
+ @9 N- y8 F7 h& D. a5-17 订单页面开发(List模块开发)" M4 y, m% k, ?+ [7 v: j
5-18 订单页面开发(OrderItem模块开发)（1）
Z5 @4 C; H! y9 q' A5-19 订单页面开发(OrderItem模块开发)（2）0 I( c' D- p, d
5-20 订单页面开发(公共ScrollView模块开发)0 s' W9 m0 p) N- k, ~7 S" o) I, ^
5-21 我的页面UI开发4 o. u9 o1 L- @' i4 w" I0 I
5-22 我的页面样式开发$ Y6 s3 ~" \2 z$ Y: U0 @; Q
5-23 集成react-router
! n# k& D& e. j% L0 P
8 y; ?/ U2 s1 U) T第6章 美团APP—评价和分类页开发" a0 i. [7 r/ N! A/ }9 ^' J
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
/ u5 b' m h# U3 p6-1 分类页面开发(顶部NavHeader模块开发)" h1 S- v. `. J/ S
6-2 分类页面开发(顶部Header tab 模块UI开发)
. n5 q* n" v9 {- \ [6-3 分类页面开发(顶部Header模块样式和逻辑开发)
& R0 M O: y, T. A+ N# ], H& K6 z6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)8 G/ L( S0 I" ^
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
. a& _0 \! Y& W' W! B1 x6 N+ P; u1 R$ C6-6 分类页面开发(Filter面板模块样式开发)
3 Q$ `' z' u; j/ C. S6-7 分类页面开发(Filter面板模块item逻辑实现)% i9 t7 ]9 E* ^& u/ }, W3 U/ n3 F* [
6-8 分类页面开发(列表List模块开发). u* L& N o8 x$ q0 j7 F
6-9 评价页面开发(UI开发)
/ J: @% Z; B' W; ?4 L- u6-10 评价页面开发(样式开发)2 T# G5 T6 B+ }5 K" e
6-11 评价页面开发(交互逻辑开发)
5 r/ J- k) h1 }8 K- b9 T" Z( b) q, K' c1 x
第7章 美团APP—详情页开发2 T* A& L/ T! S0 Y" E, m
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。- {9 P. C# m5 v/ c# {! `+ Z; x3 W6 O$ j
7-1 详情页顶部tab开发(UI开发) C& V0 n0 s- C
7-2 详情页顶部tab开发(样式交互逻辑开发)
6 _& d3 w1 V% w8 {9 w" h# Y# p7-3 详情页点菜页面开发(LeftBarUI开发)$ X) {; U7 v$ |, D' N
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
7 n9 U$ V! |- ~( J7-5 详情页点菜页面开发(RightContent UI和样式开发)
, [( r3 a3 |' o% ^# _9 K& g7-6 详情页点菜页面开发(RightContent逻辑开发)
( ]- ]2 L5 G$ U4 z: I3 o7-7 详情页点菜页面开发(ShopBar UI和样式开发)% c- p' [7 H9 |% F6 S, u+ Z
7-8 详情页点菜页面开发(ShopBar 逻辑开发)8 t8 d! n& C, Q8 [ j# Z
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
7 X( S- ~" j1 U8 m; Z' x3 J* e7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）6 b+ Z) x% J2 K$ u3 U# a7 u
7-11 详情页评论页面开发(顶部Header开发)$ c/ y# E7 K& j3 Y: R/ b
7-12 详情页评论页面开发(列表List 数据绑定)1 M& [* J' b5 K/ G f) B: H
7-13 详情页评论页面开发(列表List UI开发)
" S+ \; ], E; T" {5 \* |; \7-14 详情页评论页面开发(列表List样式逻辑开发)4 w4 f+ { q" K' e% ]: q
7-15 详情页商家页面开发(UI开发)
& j( u0 l+ }; {7-16 详情页商家页面开发(样式开发)# }+ L; l; x4 P4 q8 ]0 o# C
- H; p7 Y5 b5 ?1 U( T
第8章 美团APP—回顾与性能优化 m9 S8 _$ `; b+ T) ~
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
5 q* J& s1 q; a* d4 Z" H8-1 懒加载性能优化
4 J; F3 F$ U$ q- i8-2 JS和CSS公共文件抽离优化
% |& L# E6 e5 X4 ]5 `) z( e% P8-3 编写后台server读取真实数据* Q$ u: V% o7 U. r/ Z6 l! |
8-4 多Tab 页切换与滚动数据加载优化! F5 u7 K+ R& d7 s
8-5 项目打包
+ U- Q0 c+ P0 S: c9 m6 z/ \- A8-6 项目发布- b x" |; m1 Q# J% s) I. G
6 L5 b' Z3 U- X4 C$ D第9章 美团APP与hybrid深度结合
& u* Q& M0 u2 x4 l( g! d' s本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
E) d& m. U; U/ j! Y9-1 JS bridge 原理 试看% j: F, b) R$ C$ n g
9-2 iOS webview + JS API接口+iOS APP集成7 S. \$ I8 D+ J3 B& @! H
( N$ z* O/ P8 J* V0 ^第10章 课程总结
& B7 X* e S2 f! A& i. |回顾和总结课程讲解内容，能更好的回归和归纳。1 N# y+ d- o" C5 H5 G8 \5 e* | n
10-1 课程总结
. ?, t& s- ~3 Z6 C# F. @4 q1 o1 O' a0 Y8 a* W
【下载地址】4 `* A! V8 M, a! \% x
6 L* A2 a7 U- ~* \' {' G( S6 \# N8 P; Z& }% @- d4 c' T' J3 x
|
[复制链接]
