8 o. q( T% ^- g3 C% j
9 p% u& u7 [! ^1 q8 j: |8 R& n, k
【课程简介】/ W8 g& P% q0 Q: k! m7 e2 }8 B
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
5 o. V" Q( I$ V0 `( H3 u: a, M5 H( c- R# x# h' b& Y: @1 t- i
【课程目录】
( g0 F! ~. \8 [& ^/ u8 |第1章 课程介绍$ p# x& C) e$ @3 k, S& H
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。* \) e2 b' [4 h+ B
1-1 课程导学 试看
! D& T3 o. X. u% _
7 x9 ?- B- u4 d7 F& L第2章 移动web硬知识点/ f/ C" ^( N6 a1 R8 f
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。: J3 U1 p$ o9 c, `! d; |4 D
2-1 移动web开发概述0 @% C0 W" q3 ^+ L+ B* B0 H3 E/ R
2-2 移动web开发调试% c' v \3 J8 I, U+ b; Y' y
2-3 移动web适配概述6 f4 R9 S0 x8 Y! X- c! Y$ ]' I
2-4 viewport视窗概念
$ b, F3 @* p: D B2-5 css3之flex布局$ Z( b$ h) ~; M5 w/ f+ T8 {5 q
2-6 响应式布局和MediaQuery7 y& N+ D$ d; B" j# M1 J
2-7 rem,vw布局与适配
6 d x& x: j7 S1 H2 R. B2-8 移动端touch事件详解
. f: w8 K* ^* e0 G. a2 i8 _" }! O& r8 u6 ]6 v, O9 i
第3章 移动web软技能
5 f+ I8 T) ? }5 X0 {本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...8 Z! H- `9 C; }
3-1 代码管理工具&项目构建工具简介
: N1 d1 D; ~$ C3-2 webpack工具使用介绍/ @8 g" e( x/ x! b R7 I
3-3 Sass预处理工具使用介绍
8 a/ L) H( B' w; x: P8 K# g3-4 React组件化思想 试看* R' o, @ Y; w
' m) z) i& S0 T! _; p8 G8 j8 ]
第4章 项目开发构建环境搭建
) d f. g+ m2 j* E+ r# u3 Y+ C8 J! e本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
" `7 i8 v; U& [4-1 项目和技术栈介绍. F w$ \) c1 K8 O3 ]( K) e# T% j
4-2 项目演示
( l% a H2 r2 Y4-3 构建环境搭建（1）
) U4 G; v$ U2 k2 `+ c4-4 构建环境搭建（2）6 R! Q7 d; w! d
4-5 构建环境搭建（3）
1 f9 z8 [. g( @$ ?4-6 构建环境搭建（4）
' R+ |& Q& g! W- @5 ~6 ~4-7 redux-react使用介绍（1）
1 u. a1 g" O/ e+ L9 A4 L- q3 g* F4-8 redux-react使用介绍（2）
& [ k/ v7 Y( O9 [, v( [! J9 i2 E; `3 a, w/ g- s7 k
第5章 美团APP—首页开发
1 s& O: V2 m3 i: L! q, ?开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。$ M/ e& X# O5 w8 F% m9 ~5 a
5-1 底部tab按钮开发(webpack-dev-server配置)+ Y) C, @# R% f. b6 O) O
5-2 底部tab按钮开发-UI逻辑编写（1）# U3 c/ t4 N4 W: I, t
5-3 底部tab按钮开发-UI逻辑编写（2）
) f5 G j+ v: e5-4 底部tab按钮开发(rem配置)
8 Y2 V# A7 W8 ] H4 L; T5-5 底部tab按钮开发(集成ESlint)
% z j# x7 @/ D+ \! n5-6 底部tab按钮开发(集成HMR)& A- [' m# y4 m9 H: t9 m6 E
5-7 首页页面开发Header模块开发4 B5 Y j1 O' W v
5-8 首页页面开发SearchBar模块开发6 M& n s$ v. [) `* s8 s q
5-9 首页页面开发-Category模块开发（1）
1 Q V2 h- i4 J& C4 `5-10 首页页面开发-Category模块开发（2）
, u5 F" o9 M* f9 m" x3 B4 V5-11 首页页面开发(ContentList模块开发)
! l& i2 W& l a6 z! j5-12 首页页面开发-ListItem模块UI开发
% E u( P* I; P9 G, V: [5-13 首页页面开发-ListItem模块样式开发 `8 n i0 M: u6 S! @0 g1 C0 i
5-14 首页页面开发-ListItem模块数据渲染开发（1）
% f- l; ^3 e) \; ]1 L) T5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
+ e3 K( C3 b |5 p. K: X5-16 首页页面开发(滚动加载逻辑实现): ?7 V7 Y5 _5 {$ Y0 Z# z
5-17 订单页面开发(List模块开发)
$ g: o7 ^- X" o3 X5 c6 \; F- v5-18 订单页面开发(OrderItem模块开发)（1）
0 w# T8 Z) u" S! M- f5-19 订单页面开发(OrderItem模块开发)（2）# B2 C2 P% A! j# J5 J' ]% H
5-20 订单页面开发(公共ScrollView模块开发)
1 K5 T" o# S I- l7 ~. k; R; E5-21 我的页面UI开发" H, ?4 Z* W3 U. Y8 c* \" H
5-22 我的页面样式开发
* S$ O7 s0 {6 `; h( m Q: W) {# ~5-23 集成react-router# J/ D' v& H, v) |( n4 W: V9 V
& A0 o; P" \5 `8 Y5 L* {# |) H2 W- W
第6章 美团APP—评价和分类页开发
. r6 y2 I& f$ r; c# f5 I- q6 k开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。# I% }- c- |! ~3 A3 O
6-1 分类页面开发(顶部NavHeader模块开发)9 O3 U: v) a+ U9 r N
6-2 分类页面开发(顶部Header tab 模块UI开发)5 |8 T: z7 W' g; |( M* Z# P, l
6-3 分类页面开发(顶部Header模块样式和逻辑开发) L7 L, }5 W& `4 | `# Y
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)5 x! n% u' G1 Q% @: p ^+ V
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
( }4 o4 C7 c; @% E6-6 分类页面开发(Filter面板模块样式开发)
% {8 \2 \* ^/ H" L! t$ K( G6-7 分类页面开发(Filter面板模块item逻辑实现)
, d6 O U/ z4 y' y* h9 R1 ]6-8 分类页面开发(列表List模块开发)
5 a& F9 J. z8 ^; A1 {0 S3 a5 A: V6-9 评价页面开发(UI开发), M/ e/ s6 A$ [; R9 `# M
6-10 评价页面开发(样式开发)4 b s# j1 p, K3 c1 f
6-11 评价页面开发(交互逻辑开发)
; ?$ m9 a2 H+ `
" Y! G! O# L# G$ D3 D$ e第7章 美团APP—详情页开发
9 L1 O' C1 Q! T; {% B- }开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。) q6 b% L+ b7 ~" L1 L
7-1 详情页顶部tab开发(UI开发), r: M3 I2 M6 @0 \
7-2 详情页顶部tab开发(样式交互逻辑开发)7 w3 o; b; H# E+ o8 _9 ^; T) G
7-3 详情页点菜页面开发(LeftBarUI开发)
; H" ~" B. ]9 [! R7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
4 e6 u& Q4 p: Y6 e" E& K9 Z6 K7-5 详情页点菜页面开发(RightContent UI和样式开发)* v8 ]: ?9 o) E. r8 K5 P
7-6 详情页点菜页面开发(RightContent逻辑开发)& J% O1 g6 b3 O% ?4 w/ T! Z
7-7 详情页点菜页面开发(ShopBar UI和样式开发)
. K8 K# X3 c: z" [+ F7-8 详情页点菜页面开发(ShopBar 逻辑开发)
9 J8 y7 k- Q8 E" {" t/ `% ^7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）/ ?& B' j" e' j2 C' U
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）# J; ^& J) v/ A( j+ `7 X
7-11 详情页评论页面开发(顶部Header开发)" J7 e- H1 D0 ]1 l/ j
7-12 详情页评论页面开发(列表List 数据绑定)6 Q L1 B" `4 A7 C
7-13 详情页评论页面开发(列表List UI开发)
+ `7 `9 X- u5 A9 O7-14 详情页评论页面开发(列表List样式逻辑开发)& ]1 ^& N k7 U6 ?4 s
7-15 详情页商家页面开发(UI开发)5 ]* O# [, v8 A$ t3 }/ R2 S
7-16 详情页商家页面开发(样式开发)
" U1 h! a8 O9 Q% c: b3 P, { v) |, v+ h2 @7 F* |
第8章 美团APP—回顾与性能优化
9 i5 n u- i( O0 ^8 `/ b* v" p& o% T通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
2 Z/ s& \* n+ |" J' T$ N# T8-1 懒加载性能优化
( H# m+ d# Q" o! m8 K+ `; R8-2 JS和CSS公共文件抽离优化
@& z0 H" {9 T5 D4 p) l8-3 编写后台server读取真实数据6 v$ A1 A. ^4 t+ U
8-4 多Tab 页切换与滚动数据加载优化- P, L5 N) r( |: i3 h
8-5 项目打包9 S; |* i) l! n* C
8-6 项目发布, I C$ U4 D) S8 A! V* X K
/ E6 a k e3 e第9章 美团APP与hybrid深度结合7 F1 \# [; `( n/ Y+ ~
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
5 m: h" C6 z4 N8 Z9 X$ B0 a1 y9-1 JS bridge 原理 试看# j1 H' K' d$ P- v# E! c4 e
9-2 iOS webview + JS API接口+iOS APP集成
; U0 f5 _0 v2 `1 b9 x, c
! I/ ^$ T: X3 c: h' X6 Q2 V5 M第10章 课程总结2 d" r* I$ f$ ~! Q# V6 H. f
回顾和总结课程讲解内容，能更好的回归和归纳。; C! ]7 \+ L2 g# v0 r8 E& C2 {
10-1 课程总结* Q# B' D$ j2 T, s, y" ~* C
- ~( ]+ M$ r# h$ P2 h+ {! _【下载地址】
# R; a" G# l# s" T: [( x
+ F/ o( f3 v; ^) p9 \) Y# {. l" P2 j& \# T% A4 ] a
|
[复制链接]
