% o, ^1 ` p$ o& h) m6 q, |
6 O' l. b5 s9 Q% s- Y7 T# T& Q! m
【课程简介】2 F8 ~4 E( z6 _, |
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。$ X- x: {/ S, r6 {1 h
5 r6 R4 e# j: n2 O7 A' ], I+ p
【课程目录】
; ?. [( c: C- e: K8 c第1章 课程介绍0 k+ L# \$ `( b, k6 D( r$ Z
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
/ P- O& k# ~. J3 r" W P1-1 课程导学 试看7 W) c" L1 I8 i, S) p4 O% T
: l8 Q9 |3 A& w# }' a3 T第2章 移动web硬知识点+ b# w& `" H% O: Q# q% x: |
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
4 P+ Q h0 d$ M: m, u$ _0 q2-1 移动web开发概述
1 u& X7 l7 w" h1 l2-2 移动web开发调试
& N |8 c- a) D0 K/ m2-3 移动web适配概述
6 l2 s0 {- D; Z* r1 R2-4 viewport视窗概念
. l) }! T) h7 C, |! w9 r2-5 css3之flex布局
. ]/ T& z* T p& q& P2-6 响应式布局和MediaQuery
6 r& w8 z( W" I2-7 rem,vw布局与适配/ }3 B ?. i1 ] y& I- X( L
2-8 移动端touch事件详解
- v& _, _$ A9 E' v; r! `4 r1 ?! c
0 K8 B# L: A. v第3章 移动web软技能+ x3 ~# y7 O: c0 Q* |% k# u
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
5 j) R, q4 S' U: z3-1 代码管理工具&项目构建工具简介
- I9 G6 w+ E3 d% @+ {& X3-2 webpack工具使用介绍
9 |7 F. I% C2 _3-3 Sass预处理工具使用介绍5 O4 P! X. {; s0 _
3-4 React组件化思想 试看% W( r6 ~4 v2 M! j u
9 i/ p7 X! O+ X) @9 C
第4章 项目开发构建环境搭建
8 P" w! L' i8 @ w- A8 K本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
+ c$ |. ^# Z" c- i2 n7 M7 }. Z4-1 项目和技术栈介绍9 G9 F6 C5 j" b7 [& A' p& f9 x* S9 j
4-2 项目演示
4 @( r- F& I! ?4-3 构建环境搭建（1）
6 d# U( u1 w; y4-4 构建环境搭建（2）
; N3 }8 G E& V/ x: T4-5 构建环境搭建（3）+ i3 Z. ~/ o9 }( y; [/ s. B
4-6 构建环境搭建（4）0 C! H; e( |) B T! A
4-7 redux-react使用介绍（1）
! c4 ^- R/ G3 N+ f+ p$ N% y4-8 redux-react使用介绍（2）+ c/ G. n7 F( W1 t3 H w$ ?- q
6 N' k" S3 _& B& t6 m: n" A& D
第5章 美团APP—首页开发; E0 C- h5 z7 S. H: y0 m1 q
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。1 A" ]: {, d9 j" o
5-1 底部tab按钮开发(webpack-dev-server配置)
0 ]2 ?4 y s2 @! L. P5-2 底部tab按钮开发-UI逻辑编写（1）9 g2 b: z$ q( a4 m% T- z8 O
5-3 底部tab按钮开发-UI逻辑编写（2）3 L( T$ x7 A) o1 U0 X
5-4 底部tab按钮开发(rem配置) i$ b0 _/ f- J; Y
5-5 底部tab按钮开发(集成ESlint)) L! g6 z1 n, S5 \, [# M& d
5-6 底部tab按钮开发(集成HMR)5 e# G7 U, `; Q$ f/ y7 j
5-7 首页页面开发Header模块开发+ X7 v. p$ M5 u8 v! N( W
5-8 首页页面开发SearchBar模块开发3 G; S% B6 H- l9 a5 ?9 _: N4 \. s
5-9 首页页面开发-Category模块开发（1）
9 E& j: }3 B. s, V1 q ?5-10 首页页面开发-Category模块开发（2）# T* \2 _' |! B, I9 B
5-11 首页页面开发(ContentList模块开发)
: v- P$ M5 A m) x/ Q# `- I5-12 首页页面开发-ListItem模块UI开发! [, {& B" \+ G
5-13 首页页面开发-ListItem模块样式开发8 b4 c! V& w3 D% j) a
5-14 首页页面开发-ListItem模块数据渲染开发（1）" `8 `" i8 E! q) {% N4 `* c
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
2 ]" @" o- E" f" r1 z+ O5-16 首页页面开发(滚动加载逻辑实现)
2 k" R; G, |) M/ [5-17 订单页面开发(List模块开发)" c: W2 G3 R# }* n6 l( R0 z
5-18 订单页面开发(OrderItem模块开发)（1）
9 [) R, z" J7 |0 `% H5-19 订单页面开发(OrderItem模块开发)（2）
; Q5 h/ i0 f8 x' P0 r5-20 订单页面开发(公共ScrollView模块开发)
7 b5 {/ G; w j$ t, C5-21 我的页面UI开发% L+ M; r0 \/ w/ u- a
5-22 我的页面样式开发. o k; g% M- t5 q, S/ F0 h" {
5-23 集成react-router7 w% E7 ~1 Y( i1 v" D
) T% S1 f) m \. C. C第6章 美团APP—评价和分类页开发
% ^6 D5 s' k* O开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
1 d' T6 q+ z& L! q6-1 分类页面开发(顶部NavHeader模块开发)2 H; K9 W0 o7 w6 M/ t% W. t+ I6 \
6-2 分类页面开发(顶部Header tab 模块UI开发)
8 o; i( @/ J, V, g* y6 X6-3 分类页面开发(顶部Header模块样式和逻辑开发)
8 l W1 d5 d& Q6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
8 H F6 n2 R; ?2 B6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现8 @) E3 C# K& E# G: o
6-6 分类页面开发(Filter面板模块样式开发)
" B8 {0 j1 M4 `" B. ]: ?; `6-7 分类页面开发(Filter面板模块item逻辑实现)
# n2 a' F3 c/ W( e6-8 分类页面开发(列表List模块开发)
) ` D y" Z2 Z6-9 评价页面开发(UI开发)
5 o/ ^$ H, K8 F$ h6-10 评价页面开发(样式开发)' A9 ]/ o2 D: w6 M. J
6-11 评价页面开发(交互逻辑开发)
6 r6 C8 S- Y* A/ G7 e. e9 p3 x1 n6 ~ t$ o" X. a- ?) e
第7章 美团APP—详情页开发
* }; U H) a2 b9 j5 t7 T- Z" X开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。2 H& D4 ?3 u9 r3 }0 h4 g( d
7-1 详情页顶部tab开发(UI开发)! \: b3 h: [% T0 U
7-2 详情页顶部tab开发(样式交互逻辑开发); @: k$ }" ~. B9 h
7-3 详情页点菜页面开发(LeftBarUI开发)
$ w1 w) L/ n) i8 t: _7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
6 B4 B" L5 @: G6 e, _0 ^7-5 详情页点菜页面开发(RightContent UI和样式开发)
' K2 {9 e. C9 x! z7-6 详情页点菜页面开发(RightContent逻辑开发)
8 r6 u5 { n6 m- I7-7 详情页点菜页面开发(ShopBar UI和样式开发)
- K, Q. l' B& J4 `% e @7-8 详情页点菜页面开发(ShopBar 逻辑开发)
7 y. c/ P1 o; `5 {9 H+ [7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）6 W2 s/ a" k" R
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
- g/ D- g3 q3 m' A5 N0 V% L7-11 详情页评论页面开发(顶部Header开发)6 U( I+ K4 m/ o0 H% {! d( X6 i
7-12 详情页评论页面开发(列表List 数据绑定)
& m0 e. W& m2 v; h+ R2 U7-13 详情页评论页面开发(列表List UI开发)6 X! ^5 I3 P0 b$ p4 Y
7-14 详情页评论页面开发(列表List样式逻辑开发)7 g% }+ P( l" |7 x! J5 E5 `& e! Z
7-15 详情页商家页面开发(UI开发)9 |6 A; u/ U' c4 x/ Q% R4 }6 M
7-16 详情页商家页面开发(样式开发)
* V2 @, Y, M6 Y$ ~+ h5 U) q7 n: P% i& Y) S- h
第8章 美团APP—回顾与性能优化5 p V4 i# W, ~4 Q
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...6 J# R! }# g; d1 h
8-1 懒加载性能优化6 H" u- e' M0 o+ K7 c
8-2 JS和CSS公共文件抽离优化% P% Z0 b m! b
8-3 编写后台server读取真实数据% F. o0 w- K3 `
8-4 多Tab 页切换与滚动数据加载优化! }, t4 E: T: E( S6 _9 o6 o' Q- Q/ N
8-5 项目打包, [" a' ~/ n* D3 q. [# f! N* u
8-6 项目发布+ D! v9 ]0 a3 I
2 Q7 B2 _ r3 m7 E' I7 b# G: P第9章 美团APP与hybrid深度结合* `# C E8 D6 R# x P+ f
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。* W/ }! z' q) L& N* [& C
9-1 JS bridge 原理 试看
3 T$ l: {' n9 }6 ~- t" r: x0 c0 e9-2 iOS webview + JS API接口+iOS APP集成
$ l* {% Q4 a8 b: k! h6 C
0 Z; L% `" L- h' e第10章 课程总结, s$ G% U1 i# Q2 @2 [
回顾和总结课程讲解内容，能更好的回归和归纳。
5 [8 F% @7 h2 a10-1 课程总结
3 E& m/ N& m5 f9 b4 X. I" P- r' m; c, n! Y2 v, e
【下载地址】& L: l* z6 Q: t/ K2 L
" A5 k) i6 F1 f& r9 P2 i5 q; f. ^# [$ _& t* _* }- \* ^
|
[复制链接]
