6 w, L) T! A0 M7 O& |/ b+ Q
X9 V) @- D- Y X, B
【课程简介】
( @' \7 p/ R9 l, ~3 T( a本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。' A: H# |) B" ~5 V) v8 k
+ e& b/ S: y) n$ Q8 T1 v! ]" x1 [
【课程目录】
! h& d, g4 H9 X; `第1章 课程介绍7 \) ]. ?) z" k$ K0 Q1 E
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
! M0 w S! {; r; W. |' y0 O- l1-1 课程导学 试看
$ s# z" |1 c1 h3 ~+ X- u ?6 z) b" ^ |8 E
第2章 移动web硬知识点
' h$ p3 X* t' p9 ~4 i9 m0 A本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。% _0 P: @2 g" B) ?, I/ L
2-1 移动web开发概述
$ H8 S. f+ H! e7 N4 }2-2 移动web开发调试
5 s0 D1 f* x+ G0 p6 X; t2-3 移动web适配概述
0 L5 @* u. ?6 e% S0 V4 e1 ]2-4 viewport视窗概念
' G3 @1 x' B' \* v/ z2-5 css3之flex布局
N# w0 o% v7 y [% `2-6 响应式布局和MediaQuery# S: U" f9 c$ T$ A O3 w
2-7 rem,vw布局与适配
& h) r4 S4 p% k; [. c2-8 移动端touch事件详解; i( _! b" e3 S. ^- ]& @% o! c
/ W- ?2 J) l4 Z! \4 B1 @
第3章 移动web软技能
, ], I' d' |9 |本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
8 U7 }1 P/ t& u' \ x! T0 F+ `3-1 代码管理工具&项目构建工具简介
6 \) |; X8 y. w- p. d6 U+ `2 V3-2 webpack工具使用介绍* {( ~0 v! Z" d3 W
3-3 Sass预处理工具使用介绍6 g3 N5 n$ L3 ?2 O! v3 F6 A8 f
3-4 React组件化思想 试看
+ {2 D: E( _$ v- z a$ a/ H
6 M9 v t4 J% U/ q1 |第4章 项目开发构建环境搭建
$ X% i( V3 T/ d8 z. ~- _- P本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。# a; t+ P; O. L+ f; S5 y* k" p% l9 Q
4-1 项目和技术栈介绍7 F8 I- r# H/ y! u0 ~7 \6 _9 ?
4-2 项目演示
( ~' L; C% X7 W1 ?, [/ H; X0 y4-3 构建环境搭建（1）
% A1 x9 J; t" `7 \6 }" O4-4 构建环境搭建（2）3 Y( d! d# |- Z5 U; H! n# Y. b, a
4-5 构建环境搭建（3）
0 N. P( o) F* C1 x$ j! m. `( t( P4-6 构建环境搭建（4）
/ D, n0 T8 x# Z4-7 redux-react使用介绍（1）
1 R( O `9 ?" r; }. {5 V$ \& K/ u4-8 redux-react使用介绍（2）: x O1 f& s& ?8 p. o
$ `; R- q6 Q- f# x- W+ v/ G
第5章 美团APP—首页开发/ o& a0 Y, B @& w1 g' g D# F
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。3 ?+ c- A/ r; S$ D' s
5-1 底部tab按钮开发(webpack-dev-server配置)* c) W( l H" N1 v8 E6 E
5-2 底部tab按钮开发-UI逻辑编写（1）0 j9 U- d( T/ t/ u) C2 Q
5-3 底部tab按钮开发-UI逻辑编写（2）# a+ }: I+ v6 M; e# w
5-4 底部tab按钮开发(rem配置)
" V3 B5 S: \$ g- } s3 i' G8 K" J5-5 底部tab按钮开发(集成ESlint)' ~# g/ n7 o/ |0 U* v% l0 }* R8 T
5-6 底部tab按钮开发(集成HMR)2 s/ P( ], T" d7 [$ S
5-7 首页页面开发Header模块开发
4 O) j- F0 p; g' G+ B5-8 首页页面开发SearchBar模块开发
- P+ C. ^# p& m4 D0 q$ {2 U5-9 首页页面开发-Category模块开发（1）. P9 j& h/ d+ ~
5-10 首页页面开发-Category模块开发（2）" a5 ]0 D# \& n3 h- P
5-11 首页页面开发(ContentList模块开发)
. R* I R) f! c; d& V4 [# m1 D5-12 首页页面开发-ListItem模块UI开发
3 a/ z0 _ ~( t& A+ n5-13 首页页面开发-ListItem模块样式开发) l3 H: N# {; K$ C, v
5-14 首页页面开发-ListItem模块数据渲染开发（1）
/ m* f% W; D) q' w6 E5-15 首页页面开发-ListItem模块数据渲染开发( 2 )$ z- w9 r7 Q2 `/ F X
5-16 首页页面开发(滚动加载逻辑实现)6 {) H) G( R" x9 X1 Y
5-17 订单页面开发(List模块开发), ^& Z" c+ ^. ~3 Q
5-18 订单页面开发(OrderItem模块开发)（1）( H3 I/ ]1 m" x1 }
5-19 订单页面开发(OrderItem模块开发)（2）# n$ Q$ X/ ?/ K+ R/ h# d Q
5-20 订单页面开发(公共ScrollView模块开发)
4 v( ] H, ]0 \" \4 i* R+ K5-21 我的页面UI开发" y: L9 I! _! k
5-22 我的页面样式开发
2 ~# b- }1 D% ?( Y+ `& F! q% W0 I5-23 集成react-router
S. h. @" [8 x& y# Y3 ^9 E
% w# w0 P4 P. p Q% |$ _第6章 美团APP—评价和分类页开发
% k/ L9 s* v Q3 X" ^& H- Q开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
; X& Z/ T) V6 {# ~! p6-1 分类页面开发(顶部NavHeader模块开发)
$ n! L5 | C4 K: ~8 n4 v6-2 分类页面开发(顶部Header tab 模块UI开发)
; b" E9 f, x8 r6-3 分类页面开发(顶部Header模块样式和逻辑开发)
! ]8 X0 M; w$ a8 o) M6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
1 f0 l5 G. x) @: P; T/ T q$ m- L6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
: y9 ~" e( m. k: V7 ^! p6-6 分类页面开发(Filter面板模块样式开发)
. ~# G4 j% d+ |; T% l* `6-7 分类页面开发(Filter面板模块item逻辑实现)% @8 ^. M. k- B1 `& H% j3 o# a
6-8 分类页面开发(列表List模块开发)
) C6 c) V, t* a) `6-9 评价页面开发(UI开发)
+ Y$ u6 x5 Z/ G6 {2 ^3 |6-10 评价页面开发(样式开发)
8 Y8 t# ?3 w2 L! Z+ J9 I2 x6-11 评价页面开发(交互逻辑开发)
9 Q O& d: d/ j2 u# I4 P, n1 r3 B" _3 B; t
第7章 美团APP—详情页开发" b; e0 s d4 z$ a8 z& `8 C: ?
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。8 d$ v& R4 ]- B! K1 l+ G
7-1 详情页顶部tab开发(UI开发)
/ H1 y7 n" ^3 P7-2 详情页顶部tab开发(样式交互逻辑开发)+ J2 v" Y, {* N/ x
7-3 详情页点菜页面开发(LeftBarUI开发)
" a# k9 p, D- a: O$ z8 x7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发), \6 g1 L* `1 Y; x* F( U+ Z3 @
7-5 详情页点菜页面开发(RightContent UI和样式开发)
8 N! G% C* t; P* t7-6 详情页点菜页面开发(RightContent逻辑开发)( |4 m, Z6 {; E
7-7 详情页点菜页面开发(ShopBar UI和样式开发)* B1 Y1 M9 j' H2 T p N" x
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
; `9 ?( `8 |1 Z7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
( K+ e, L- P1 Y/ J j* p/ G7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）$ Y2 t5 ^& b' D; o7 c4 q. i) b
7-11 详情页评论页面开发(顶部Header开发)# ]! u, N: h4 \& o U1 _7 B* u$ e# b
7-12 详情页评论页面开发(列表List 数据绑定) Z0 z- o* N6 e1 Y+ d/ H1 R
7-13 详情页评论页面开发(列表List UI开发)0 D$ `3 g( I/ w' q
7-14 详情页评论页面开发(列表List样式逻辑开发)5 z7 p- T7 k6 o5 X7 u' w3 H2 M" k5 c
7-15 详情页商家页面开发(UI开发)
3 t* Z! [: S- Y3 x, ^0 r- b- v7-16 详情页商家页面开发(样式开发)- s8 @: h4 D% }- k' K: y
1 D; V, t. [- I6 j
第8章 美团APP—回顾与性能优化
3 C" s$ x' V- g0 q! O通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...! B0 o" `& `2 ?' i4 G3 b& o5 e; l4 f
8-1 懒加载性能优化
J b3 V8 J0 M9 _; z& l2 x6 C# |8-2 JS和CSS公共文件抽离优化9 o5 I9 Z6 i+ _ ` Q8 u
8-3 编写后台server读取真实数据
( i" }+ x$ |. K3 b G8-4 多Tab 页切换与滚动数据加载优化" O4 L" u5 O I+ W" [' h
8-5 项目打包
6 b% Q- w6 P8 T. {1 D8-6 项目发布
2 d4 S; y: B# n, r! S4 x
% u% n. h+ e7 e7 j9 o" o第9章 美团APP与hybrid深度结合7 Z8 b2 Z( ^ i5 Z4 F+ t0 g
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。2 ~* l, b( T' ?! B' n. \4 V. m
9-1 JS bridge 原理 试看
" q! v: g- f- x6 b. a) f+ \0 j* j6 y9-2 iOS webview + JS API接口+iOS APP集成
8 y3 n. p% p" c& i4 O- l
4 B, {. @; h9 J) G第10章 课程总结
# f2 a! H3 R5 i# B5 O; T" x# j7 B, e$ d回顾和总结课程讲解内容，能更好的回归和归纳。
/ U: M$ o0 \" X' _6 P$ r' Q6 F10-1 课程总结$ H' T Z+ p; e- Y4 X" Y3 }
7 z2 p% Y( ]! Q8 |6 {6 b
【下载地址】
; x& P& G7 V) x8 l0 S- E2 \6 x7 |6 B$ P4 L
/ w: V4 g6 G) L& [1 M
|
[复制链接]
