: M% [. J9 E: O% v
+ E* l. Y! J0 l/ F4 ?0 l$ c
【课程简介】7 I3 i* ]3 U8 K; I5 \6 q
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。1 ~1 ?& O/ j0 ?4 Q _8 c
+ `: |4 x Y% s( g) W0 c& F
【课程目录】) y6 J, Z5 y7 b* P4 c1 W6 i- T" k
第1章 课程介绍0 ~( |- _& B8 g/ h: p7 t- f' t
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。: p1 s4 I! j1 [; `; I( b5 I
1-1 课程导学 试看, O8 x1 ~( R1 s+ G
- P) D' ^6 q5 ? [* k第2章 移动web硬知识点+ j& H/ j: ?' F$ I T
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。3 v) L, ]% H6 F9 n/ x8 k \- w$ J
2-1 移动web开发概述
& @- b: r1 ?; ?6 j: G) w% b2-2 移动web开发调试
$ G1 p/ w6 p. w7 k5 _- V2-3 移动web适配概述- q6 ~5 v$ x% H: [" b
2-4 viewport视窗概念
( e1 E$ T# |# ?3 J8 n* e" @; t9 H* B2-5 css3之flex布局$ @; n( x, M# ` i7 V2 Y P6 V
2-6 响应式布局和MediaQuery& W- O) A9 o0 O1 `7 S
2-7 rem,vw布局与适配/ V5 ?7 ]! h* R, U
2-8 移动端touch事件详解( ]! m2 r8 [" ~8 E# X+ J: v+ ^
" Q7 s- Q9 p" i0 j第3章 移动web软技能
8 x, `+ N3 O; u6 H本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。.... Q5 ]; b7 _: _ F
3-1 代码管理工具&项目构建工具简介
6 V" ^2 Q% O# ^) l% x3-2 webpack工具使用介绍. }- V p( I/ x* l6 |& J: D
3-3 Sass预处理工具使用介绍7 p: K% k9 _$ e# p7 Q: g7 A+ I
3-4 React组件化思想 试看( H7 s) ]9 J" e3 j7 \% N, D5 Y5 I
! G9 ~( ?0 X3 J+ b) _第4章 项目开发构建环境搭建
+ _ |; R# i5 Q; U* V' ]9 p本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。" u) _; Q/ M% R/ y
4-1 项目和技术栈介绍: v' L0 u1 g/ Y
4-2 项目演示
" A9 ? ^* n! t( {) ]9 c4-3 构建环境搭建（1）7 X. h+ f( H1 @
4-4 构建环境搭建（2） W8 A& c# F; Z- H& l
4-5 构建环境搭建（3）& I6 [. v# A$ g( p ? n
4-6 构建环境搭建（4）
6 y' t; t1 g- y4 u, P7 r9 ` I4-7 redux-react使用介绍（1）
- E! E0 _7 n2 [3 V$ r4-8 redux-react使用介绍（2）% y! J: g% G3 I; B
; |+ h0 ^* s" }& F9 w& y8 ]第5章 美团APP—首页开发
6 r# N$ K4 z1 C, i3 G7 {7 L开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。) j% z. ~7 [5 g+ A1 a
5-1 底部tab按钮开发(webpack-dev-server配置)7 G. {) g1 w' T; }0 x `0 j
5-2 底部tab按钮开发-UI逻辑编写（1）
& S& g" F1 Z$ ~5-3 底部tab按钮开发-UI逻辑编写（2）
8 G" ?0 T9 d) i7 d. }% ~5-4 底部tab按钮开发(rem配置)- B- p3 y/ Q0 l# V2 z( O* n
5-5 底部tab按钮开发(集成ESlint)2 g, d5 o( R4 g6 S1 B2 Q. b
5-6 底部tab按钮开发(集成HMR)
/ s7 Z4 C- p0 \0 ^+ J5-7 首页页面开发Header模块开发' a9 d/ ^: l2 Z4 ]8 [) {* D, m& y
5-8 首页页面开发SearchBar模块开发0 x2 {7 u& Q0 q q
5-9 首页页面开发-Category模块开发（1）) v- K. x0 S4 [/ T' e0 K
5-10 首页页面开发-Category模块开发（2）
) o& E4 k& o2 i" b5-11 首页页面开发(ContentList模块开发)
8 D0 d( [+ C7 l" y( L5-12 首页页面开发-ListItem模块UI开发
1 O0 u* }) y: i, a5-13 首页页面开发-ListItem模块样式开发7 H# E) s8 J* r7 Q' h
5-14 首页页面开发-ListItem模块数据渲染开发（1）, s7 w5 B- b, t" C
5-15 首页页面开发-ListItem模块数据渲染开发( 2 ) N: F0 ^5 E. x" s# M+ Q( b& J
5-16 首页页面开发(滚动加载逻辑实现)
, y. w4 h% T; s" M6 _6 r! [5-17 订单页面开发(List模块开发)
$ p% e/ r. F. V5-18 订单页面开发(OrderItem模块开发)（1）
8 _. {$ _% A9 A/ @! y5-19 订单页面开发(OrderItem模块开发)（2）) M/ `9 d6 G" V) I) a
5-20 订单页面开发(公共ScrollView模块开发)8 n/ p. p' N0 h |
5-21 我的页面UI开发6 v: m/ p: u5 K9 H3 B/ s! z
5-22 我的页面样式开发; C( [2 o3 C# s0 D
5-23 集成react-router3 b) a8 R, E ~! F# Y
0 p; M; Z$ K1 b4 e4 P0 ~- n第6章 美团APP—评价和分类页开发
: ` h6 `; |. O9 R: e% |4 G4 E/ |开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。: v0 E! K5 F! J6 K0 |, v
6-1 分类页面开发(顶部NavHeader模块开发)
% O" Y8 l8 J+ B# Q# `" u; Z6-2 分类页面开发(顶部Header tab 模块UI开发)3 a: ^" o0 ~/ s! O
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
% | t: P) n) u9 U7 f% s6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
: m+ n( v4 P* F2 M6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
, D" L1 e) h4 u/ ?. Z6-6 分类页面开发(Filter面板模块样式开发); _# U' L+ K- M3 |; ]& s2 d
6-7 分类页面开发(Filter面板模块item逻辑实现)
W0 ~) C# ?- N a/ B6-8 分类页面开发(列表List模块开发)
+ x( |+ I6 z5 B- h1 p7 V4 g6-9 评价页面开发(UI开发)# u) x ]) w- _. Y
6-10 评价页面开发(样式开发)
) m! D8 A! y3 _$ |6-11 评价页面开发(交互逻辑开发)
! o0 Z4 S ?0 Z- ]1 S. V. j, r: }8 ?' ?
4 d" C2 M4 o& X$ `1 C第7章 美团APP—详情页开发
) r+ K1 c' ^" L( x# s# n开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。# ?3 T$ k0 {1 E8 G
7-1 详情页顶部tab开发(UI开发)! e- K6 q+ g/ ]! Y) ^+ K- i! ~+ K
7-2 详情页顶部tab开发(样式交互逻辑开发)' b7 r; I, q% P, T5 q4 C" R+ t& ]
7-3 详情页点菜页面开发(LeftBarUI开发)/ z' C S- t$ e1 B
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
4 c# f! m9 Q7 R- H7-5 详情页点菜页面开发(RightContent UI和样式开发)( a; ^) B2 H) q0 X
7-6 详情页点菜页面开发(RightContent逻辑开发)
+ V- Y# f) h" [; U$ W7-7 详情页点菜页面开发(ShopBar UI和样式开发)
/ ]1 [% n/ g1 _; N/ \: {7-8 详情页点菜页面开发(ShopBar 逻辑开发)# u2 c, v$ E( W) l& z
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）0 v; `. t3 h$ w, O4 l
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
8 ]" H% H* E9 G+ H. u7-11 详情页评论页面开发(顶部Header开发)1 H4 T$ W% }! J2 ~4 G
7-12 详情页评论页面开发(列表List 数据绑定)
* c |) L% U7 `* s$ C9 h7-13 详情页评论页面开发(列表List UI开发)
" {' v' b6 Z# I8 K" G+ U7-14 详情页评论页面开发(列表List样式逻辑开发)
8 x z, f1 g5 T/ r" N" J0 C+ l3 T7-15 详情页商家页面开发(UI开发)6 L4 H. f$ R7 m/ l, }1 l' g
7-16 详情页商家页面开发(样式开发)3 m7 l( J9 M: A6 b, r/ Y
' e. A, {3 p! v' l8 I$ P* h* r' O第8章 美团APP—回顾与性能优化
2 `& B. U" L3 P _) G通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...+ r- t' o0 h ?( v7 O4 m1 C" y
8-1 懒加载性能优化; }! w H- l7 e6 `, g/ }+ @' |
8-2 JS和CSS公共文件抽离优化
/ P. i9 R' x- b. w4 t8-3 编写后台server读取真实数据0 b( H' c6 I0 u- z ]1 o
8-4 多Tab 页切换与滚动数据加载优化
. D9 B: w4 U/ t. `. e2 N8-5 项目打包
3 o+ \8 c: h9 ~ |0 I1 |8-6 项目发布. y7 h l, f5 }7 d- [, M/ Y
8 l1 p% f- A7 ?6 E& G: [0 y- _' _
第9章 美团APP与hybrid深度结合
: I, V% J, d5 O- D本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。% \% z& m# _, |) y3 G
9-1 JS bridge 原理 试看
A+ I; @! m( |# \9-2 iOS webview + JS API接口+iOS APP集成+ R6 Q2 K2 E" t% W
6 k5 [5 P: D/ U; T4 {$ p
第10章 课程总结, \/ G4 q* ] ]$ U
回顾和总结课程讲解内容，能更好的回归和归纳。( E5 L: l. d8 O5 F
10-1 课程总结" y# B, z3 ^" [' H# r( N5 U
3 W# X8 [/ C& @1 B1 D【下载地址】+ \6 p+ w% }: I* J# h! U8 h
; m2 \( [+ Q- Y4 f: U
4 M1 j+ j6 e; p' A+ b5 n ?- w! C |
[复制链接]
