$ m( W6 L8 {8 q! j& K9 N1 s' s
* X5 J) I( I3 G4 y) |2 G0 m
【课程简介】
# y. n+ r* N0 ^5 }, _7 v8 ]' e本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。, v* ], E; r; g* r9 e" b
, q. M. F( x/ j8 n8 A; C& }
【课程目录】
, z2 B* l% N( Y( D/ x' n0 j! }2 [第1章 课程介绍/ E7 V- L" y, Z$ S& H4 u
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
: U! W; X6 R' G$ S2 p! B1-1 课程导学 试看
7 i9 w. y2 @4 `# h3 }$ e# v* ?: T3 b+ p$ r$ r/ |* y
第2章 移动web硬知识点
K e6 B$ Q$ a! r. D( W/ E本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
- ^# H9 l* X- p' G2-1 移动web开发概述% l+ |; B; _8 j7 O- d
2-2 移动web开发调试& ?$ Y* b* D" T. d* n; D7 R3 ~
2-3 移动web适配概述4 V7 \' l5 ^/ t- @$ `
2-4 viewport视窗概念! f$ T G7 O( Q9 @: o
2-5 css3之flex布局
2 v2 q% a. `1 h, Q* |2-6 响应式布局和MediaQuery9 f6 k, q8 y) W5 [# I$ X
2-7 rem,vw布局与适配
. i' N, ?7 d3 G# f4 Z# B2-8 移动端touch事件详解' C# E& s' h* u8 H" G
! D1 ~& J0 |" U2 ]# u第3章 移动web软技能 U7 A( ^) }- L. W
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...5 H3 l7 m& m4 W3 Y
3-1 代码管理工具&项目构建工具简介
# K, c5 ?5 Q; R3-2 webpack工具使用介绍
: W# |: K8 A: m+ @! K7 [3 C3-3 Sass预处理工具使用介绍 E- m4 Y$ L. b: R+ D9 _2 y
3-4 React组件化思想 试看
# l/ |7 H1 {8 P' l- ]* u, ` q8 I& a# P! C& [2 r" K, s
第4章 项目开发构建环境搭建6 \( U7 s7 ^$ P1 t) ?
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
+ r" E" T$ H+ Y3 X4-1 项目和技术栈介绍
/ E x9 k' z8 U' Q4-2 项目演示
8 h) N6 N) R# ]4 G0 g6 I! Y4-3 构建环境搭建（1）. l2 ?! H ^; h) e) [: ~, m
4-4 构建环境搭建（2）- x1 `3 y) u$ Q" z; P8 n; N
4-5 构建环境搭建（3）4 b1 z! F- C |; W% n1 S
4-6 构建环境搭建（4）7 e* L( x+ |$ E* @* X& {+ q
4-7 redux-react使用介绍（1）
9 Y+ M( \0 ?1 Y9 j4-8 redux-react使用介绍（2）# b& B, ~* L6 _9 C+ s F% S; y$ G
9 c* A0 q+ s: ?2 ^" O6 _
第5章 美团APP—首页开发
% ~, k7 [/ U" b, s开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
# _% X" I# H+ {5-1 底部tab按钮开发(webpack-dev-server配置)( y4 ~/ A( {: f! z6 `
5-2 底部tab按钮开发-UI逻辑编写（1）
( `' ?- s: X1 t: n% e5-3 底部tab按钮开发-UI逻辑编写（2）
& N8 k" E# D. X' x1 c/ P6 J5-4 底部tab按钮开发(rem配置)
* s: ~/ L- e; X5-5 底部tab按钮开发(集成ESlint)1 C8 Q# Y2 W3 N, l) l9 K8 V2 C
5-6 底部tab按钮开发(集成HMR)
7 L+ K N- \; S! V4 w. w6 b/ p5-7 首页页面开发Header模块开发! M* H0 ]8 m$ I4 T
5-8 首页页面开发SearchBar模块开发
' C7 F% f. G( @* N! D5-9 首页页面开发-Category模块开发（1）2 l& H7 V4 K8 b8 b/ P! j
5-10 首页页面开发-Category模块开发（2）# p8 Y0 j) B' M: u) u, W0 N g
5-11 首页页面开发(ContentList模块开发)6 D8 q: W; H1 v* g
5-12 首页页面开发-ListItem模块UI开发
4 T3 J/ Y1 s" y A5-13 首页页面开发-ListItem模块样式开发
+ F4 W1 {3 o, I6 N! i9 T5-14 首页页面开发-ListItem模块数据渲染开发（1）
7 l/ c. k/ G- r" q: P# N8 k5 i5-15 首页页面开发-ListItem模块数据渲染开发( 2 )1 x1 |, }* V! I# }1 r) T5 K
5-16 首页页面开发(滚动加载逻辑实现)* T* j( S1 _2 h' [3 o1 w# ]1 A" y2 p* ?$ f
5-17 订单页面开发(List模块开发)
+ h' B/ H f( h5-18 订单页面开发(OrderItem模块开发)（1）
5 G) e5 w& ^5 b, o5-19 订单页面开发(OrderItem模块开发)（2）7 @: x, F$ L( L' A/ `" k1 l
5-20 订单页面开发(公共ScrollView模块开发)
6 A& U R2 V: k2 \; A$ e* E8 E5-21 我的页面UI开发* b- D' _+ R: j8 O( x
5-22 我的页面样式开发
& A5 l9 [4 Q1 c; [+ N: _# `5-23 集成react-router% n/ y# {6 d" ?7 W" |9 @
( f! G" q. J+ {6 D) X9 r a9 d
第6章 美团APP—评价和分类页开发1 ?, P: _" i |1 ^! C/ o1 E
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。6 [* ?9 f8 l* t8 u4 {* j
6-1 分类页面开发(顶部NavHeader模块开发)
, G4 O2 w* D r6-2 分类页面开发(顶部Header tab 模块UI开发)0 i6 g" F# m B' ?
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
5 `( ~5 ?* f4 | {0 j" E! K6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
. N% b1 t; b1 O! e6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
" l8 ]7 q, s: R2 t' K6-6 分类页面开发(Filter面板模块样式开发)/ l, s* }4 _) n. V- C4 g, h
6-7 分类页面开发(Filter面板模块item逻辑实现)
2 T9 _$ y9 e- k: K5 W; N6-8 分类页面开发(列表List模块开发)
" O( a, B# ]5 S" \! M4 L6-9 评价页面开发(UI开发)& a. h- K# t9 u# y# s% J
6-10 评价页面开发(样式开发)' b% H3 i, Y% `. Q( ~1 z6 |
6-11 评价页面开发(交互逻辑开发)' S5 Y+ @4 B1 j- @- |- M( d* x
: U. {( X. z' n6 q. g第7章 美团APP—详情页开发! [: u+ t* l% O3 S4 P7 | A7 a& C
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。# \* w: w4 L0 a1 Z z7 o
7-1 详情页顶部tab开发(UI开发)/ [6 E' Q/ o3 b
7-2 详情页顶部tab开发(样式交互逻辑开发)
, B+ A) x2 }9 a# o+ g7 M2 s7-3 详情页点菜页面开发(LeftBarUI开发)9 s3 K/ ?/ R% m% V' w6 a& a
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
8 R! j+ L1 _+ V2 B; J" Q7-5 详情页点菜页面开发(RightContent UI和样式开发); q) T! O: {5 H/ y$ E( \1 Q
7-6 详情页点菜页面开发(RightContent逻辑开发)& {5 i0 m+ _+ o6 P% w( C
7-7 详情页点菜页面开发(ShopBar UI和样式开发)5 P3 v* k' j8 G, O0 L+ g/ u
7-8 详情页点菜页面开发(ShopBar 逻辑开发)* ^/ r9 G5 L$ g/ H+ E
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
+ @7 M% Z# a: S3 a% q X7 I7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
; m; _- j1 d8 r' Y! `6 a* n7-11 详情页评论页面开发(顶部Header开发)
) p( Q C% P7 h$ v9 O5 g1 z7-12 详情页评论页面开发(列表List 数据绑定)
7 G3 z5 G7 J7 X5 X2 J8 _3 n8 p" e& B1 M7-13 详情页评论页面开发(列表List UI开发)$ ]1 C' T6 H* i
7-14 详情页评论页面开发(列表List样式逻辑开发)! g' t2 y$ X2 \0 W! n+ z
7-15 详情页商家页面开发(UI开发)7 ?* I7 a* p! a- n+ \* t7 k- k
7-16 详情页商家页面开发(样式开发)
" ^, f; o& P7 m" L3 L/ F& E
1 S) |; S- B) j7 H8 s2 Y( A/ n# x* @第8章 美团APP—回顾与性能优化, {9 k6 l, ^( i4 |& V! E
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
# f1 }. D7 _- |$ u8-1 懒加载性能优化
* F4 `& @" Q9 ]# [2 ]& [8-2 JS和CSS公共文件抽离优化
. ^+ `& j* Y- y+ b* Z8-3 编写后台server读取真实数据5 \& K: q# o, p& v) a8 |2 G" q4 K4 X
8-4 多Tab 页切换与滚动数据加载优化( I5 p* S/ ?: q* A! R
8-5 项目打包% C1 m2 ` V6 I
8-6 项目发布
?! `5 R" l0 G: Q. ]; Y, Z* s8 }6 r+ n$ S
第9章 美团APP与hybrid深度结合
) _( ^1 G, D- B. V) O2 K) G; _本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
0 B# M- v1 H6 k+ s) K2 g9-1 JS bridge 原理 试看
8 T! N" ]8 B; g9-2 iOS webview + JS API接口+iOS APP集成
8 x$ N/ k# _: @8 @& I- \( g. h2 v, ?, \2 y5 T+ k( B, ~
第10章 课程总结) s9 o8 _9 a1 ]/ r% Y4 h3 h1 [# A
回顾和总结课程讲解内容，能更好的回归和归纳。- M& ?* p3 s5 B+ I' M: @0 _
10-1 课程总结
3 p1 W) L/ A% E# V& [9 o' s2 K0 o9 \4 H! y3 |
【下载地址】' I' x4 z2 ?2 L# @: d
2 k- w. s/ |# \/ j/ M7 G' q9 L4 h! A, W4 T }
|
[复制链接]
