2 h9 {6 P% z2 ?( ~4 o# t4 [
0 D1 W/ F9 ?4 A; H8 F- ~
【课程简介】
. u r8 ^% Q8 j* x. ~5 h本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。3 \8 q0 o3 A0 i" T( `5 Y" }: q
& \4 s4 u$ @. B6 l9 R2 G2 S) o" q【课程目录】% G- |- R) V* \3 u) x6 B
第1章 课程介绍
. i3 d( t2 V7 d通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。- X. U: \; y& u6 I
1-1 课程导学 试看
' c* ]3 l# X! ]; z9 u2 u2 t3 t U' ?
第2章 移动web硬知识点
5 F |) e5 N' W本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。- X8 C/ W2 N: c* j" B2 f
2-1 移动web开发概述
; [$ m- ~! C5 E& N* p' `2-2 移动web开发调试
8 ~. _+ U- r2 {0 N0 a! V) m+ V/ v) h2-3 移动web适配概述
0 u2 N! s* O- q& D% U) D2-4 viewport视窗概念! F- G, n( ]: \! o
2-5 css3之flex布局
/ {/ W( o/ ~8 k% c2-6 响应式布局和MediaQuery
) d: D# {' }8 V8 F% y& K$ C! t j8 d2-7 rem,vw布局与适配
, r4 j; S: e6 V' u2-8 移动端touch事件详解
L( w7 ~7 \, _
4 Z. U& h% t7 ^' f, X- i' n第3章 移动web软技能
4 B5 L+ s ~; n- E5 L9 ?本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...* `+ R( }( V! k2 s3 \& {
3-1 代码管理工具&项目构建工具简介
: ]3 P& a- n9 r3-2 webpack工具使用介绍& v" O6 k- T. a6 F3 m
3-3 Sass预处理工具使用介绍, i1 K6 C1 W0 \# { W
3-4 React组件化思想 试看. J5 B- m5 w) t: o
% s- ~, l9 ~2 H! T1 u* m1 ?第4章 项目开发构建环境搭建
! x" E* g' q0 N) u0 B) n本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
* g" |0 J& U7 @5 D. Q# s# T4-1 项目和技术栈介绍/ T: w4 ?9 S3 F1 V7 z; x7 R) {+ W
4-2 项目演示
) G! F9 S+ C# {- z) Q4-3 构建环境搭建（1）# q5 w+ E' n$ ^ O' B* E/ L
4-4 构建环境搭建（2）" d s# _- n5 X
4-5 构建环境搭建（3）3 p4 m1 z( }0 c* K* I' G
4-6 构建环境搭建（4）
+ h* x1 v$ W8 a X+ ^" R& X4-7 redux-react使用介绍（1）8 A' W* B: }8 D5 w: |
4-8 redux-react使用介绍（2）
$ a* l( r3 ~; \# r0 t2 ?) I6 n7 d- P, d6 w: R Q8 r+ a' s
第5章 美团APP—首页开发2 f% Q- H5 L8 r$ y2 L
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。( X: _ U0 i2 f
5-1 底部tab按钮开发(webpack-dev-server配置)% G/ @, M3 C v
5-2 底部tab按钮开发-UI逻辑编写（1）
5 x+ ^+ [& y1 D4 x, f5-3 底部tab按钮开发-UI逻辑编写（2）* q/ Z+ L" I( _7 R) j
5-4 底部tab按钮开发(rem配置)! m: ~7 U: v( G( K8 w
5-5 底部tab按钮开发(集成ESlint). B0 n8 ]* T6 W2 \; L3 N( U
5-6 底部tab按钮开发(集成HMR)
! q+ Z/ Y! f" |5-7 首页页面开发Header模块开发9 Q% D9 q F4 w
5-8 首页页面开发SearchBar模块开发
* Y1 L5 z" H; X. r" i6 K5-9 首页页面开发-Category模块开发（1）0 w% x7 ~$ s+ t- l
5-10 首页页面开发-Category模块开发（2）# t' V# `. r& r
5-11 首页页面开发(ContentList模块开发)
+ l- e5 D l/ P2 j' A T7 S' T5-12 首页页面开发-ListItem模块UI开发9 s- n( G. H) p, ?- O" d. b; _
5-13 首页页面开发-ListItem模块样式开发
( _9 x9 m% H) h$ k$ a2 c5-14 首页页面开发-ListItem模块数据渲染开发（1）' k4 @* a6 `* M v/ a" a
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
9 h9 d* o/ ~+ l5 F; ^5-16 首页页面开发(滚动加载逻辑实现)! y; h" L/ N4 E$ h9 _* \
5-17 订单页面开发(List模块开发)
2 i* F* i, n/ E5-18 订单页面开发(OrderItem模块开发)（1）
, \9 ^7 k8 b1 u7 @! H/ m5 f7 I5-19 订单页面开发(OrderItem模块开发)（2）
' A6 n) }1 z' f! R2 ~5-20 订单页面开发(公共ScrollView模块开发): @, y# m3 V8 ?- i
5-21 我的页面UI开发
9 C( J& v, e* R) C6 \% t5 `' S: ^5-22 我的页面样式开发
; N3 v8 f1 e6 F) x0 O" P7 @5-23 集成react-router# j5 t1 }- C6 W& N" A! u% B; T4 ]
) `! G6 t8 P" X# k9 r% E- p第6章 美团APP—评价和分类页开发& U3 G; d9 `5 n% O4 a. y: r! \+ R
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
1 s% g% i r+ ]# p6-1 分类页面开发(顶部NavHeader模块开发)
: c5 _) @# \; H2 K- E4 f6-2 分类页面开发(顶部Header tab 模块UI开发)
. K+ G4 Y0 K6 b# P* h' D+ u6-3 分类页面开发(顶部Header模块样式和逻辑开发)
C& P0 R, N+ W$ d( A4 s9 ~/ L6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)$ p3 y! ?6 j. @6 T8 k! s: k
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现" b' I/ @5 w+ t2 e& _5 G @) @
6-6 分类页面开发(Filter面板模块样式开发)3 C; V) f* d* @" \! E$ b
6-7 分类页面开发(Filter面板模块item逻辑实现)
/ h% A( I4 W6 V: X6-8 分类页面开发(列表List模块开发)1 h3 ?: t$ a# h: w& {
6-9 评价页面开发(UI开发)
5 c* ?+ T2 `3 E, |9 ?' E6-10 评价页面开发(样式开发)0 k6 |: y! ]" T: g& e- X2 e
6-11 评价页面开发(交互逻辑开发), O0 H; Y$ b0 a, c8 W
]1 a! H& g! }1 @" r) U2 z
第7章 美团APP—详情页开发
' p$ `4 w2 c% B$ q3 J开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。- l) C/ A8 d# D- Y9 i: }
7-1 详情页顶部tab开发(UI开发)% T- o h) h9 t3 @
7-2 详情页顶部tab开发(样式交互逻辑开发)
# u& t, A* c- [ K7-3 详情页点菜页面开发(LeftBarUI开发)
8 t8 r5 y4 ]! @2 j7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
! d" x4 k4 `1 e7 i; ^7-5 详情页点菜页面开发(RightContent UI和样式开发)
3 Z) S6 b3 X# |. S0 _/ x7-6 详情页点菜页面开发(RightContent逻辑开发)
/ E% K0 J. B( s0 J) v7-7 详情页点菜页面开发(ShopBar UI和样式开发)( A2 C+ j1 l8 s3 M( j$ Q% x p
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
q( h$ D, U# f* Y) W7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
! }# Y2 D$ l$ }0 {$ P7 s7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
+ S# w/ f% X5 s0 G7-11 详情页评论页面开发(顶部Header开发)
: R1 o5 H0 q0 }. O7-12 详情页评论页面开发(列表List 数据绑定)
4 ?: z- `+ A1 L2 g+ ^$ s7 u6 X7-13 详情页评论页面开发(列表List UI开发)
: D, Y0 `2 d4 M1 E9 Z: |7-14 详情页评论页面开发(列表List样式逻辑开发)
3 Y$ f( }* }' K) ]. T9 e( l5 ^! p& Z7-15 详情页商家页面开发(UI开发)
$ A0 q- {: u9 H5 m7-16 详情页商家页面开发(样式开发)
6 X0 y( V6 j- d C; F% `6 U! n4 `& n/ q2 j: k, T+ s
第8章 美团APP—回顾与性能优化% ?- | a7 k) W) T; o* R3 t" `0 R
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
6 d8 F6 a/ D) R$ q" Y+ y; k. m3 p8-1 懒加载性能优化
4 m4 R2 J$ U+ ]1 F1 M+ K8-2 JS和CSS公共文件抽离优化
/ G) B; M, Y4 y7 E8-3 编写后台server读取真实数据6 v1 O0 L7 C8 E6 Z3 `: V
8-4 多Tab 页切换与滚动数据加载优化
& x U4 t9 j8 T; Q+ V( c0 o. K+ ?8-5 项目打包
: z1 R' b) i: b" s- s$ H) B" _+ z8-6 项目发布% b# [5 b/ S- P5 ?/ {& ]
1 J8 {! `8 V8 N, o. ]& u( a
第9章 美团APP与hybrid深度结合1 ^/ C& t& D% b$ h6 {
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。! r+ p, E$ g5 }$ E5 V
9-1 JS bridge 原理 试看# q+ b7 I7 R" U$ l# R
9-2 iOS webview + JS API接口+iOS APP集成
: i F! `- h1 [ i2 ~2 y9 O* w& ]3 f
第10章 课程总结
& K# x. s6 t* d3 Q$ n: u1 e回顾和总结课程讲解内容，能更好的回归和归纳。
7 } O {6 O/ X10-1 课程总结
% v% S8 L& a, Z. F2 Y
+ d" o. {0 R" I# ~* e+ r# |【下载地址】" Z6 z ~+ Z) e# j# x1 t
0 b. G6 s, i% Z8 M# X( F. k, @+ d6 e7 @
|
[复制链接]
