. k) N8 V7 k9 B4 j) E
. ^5 ]# C: V$ t2 c【课程简介】
% W R5 T8 u. Y; q' ?, }) d本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。4 ~6 U( ^, J& D" c* K& z, t
+ J" b* j) n- Q6 f* f【课程目录】
' }/ O2 n# N4 w$ _% a3 q- Y第1章 课程介绍! q- ^4 l9 A- W6 j9 k7 b
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
+ I! Y6 B2 ^2 B7 J, M1-1 课程导学 试看; p k4 o4 G( u# {
% F6 S- _. P- B- i. X
第2章 移动web硬知识点
6 T* \- O9 j p) U) d本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。7 o# b S2 q3 ^, h# i. C
2-1 移动web开发概述
6 h, ~3 J2 E; E3 ?6 p9 N2-2 移动web开发调试
" ]- c1 d' g) f2-3 移动web适配概述. |1 K' M& X/ ]# Z, e2 L, t$ s0 H- E
2-4 viewport视窗概念0 T. \. @ r+ [9 Y
2-5 css3之flex布局6 ~& k% S: f! b6 X: k1 g: H4 o, [. U
2-6 响应式布局和MediaQuery' H/ ^; V7 e& u$ U }
2-7 rem,vw布局与适配
- n+ N. T- Y0 f$ I2-8 移动端touch事件详解9 ?, t) ?2 k. p
1 o# a5 H( ?0 X2 b, Z7 R
第3章 移动web软技能: F" V" r" `8 [1 O; g" Z) t5 e2 [
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...' k' T3 F* N' j' g
3-1 代码管理工具&项目构建工具简介0 V' i: C6 Q4 G% e, G
3-2 webpack工具使用介绍
$ n+ Y! n+ K6 j3-3 Sass预处理工具使用介绍2 N6 \; A! f- q5 U9 o
3-4 React组件化思想 试看
7 @. o# r( c6 S8 ]! y, i: X8 Q( \
第4章 项目开发构建环境搭建
5 k' D2 e& V$ Q5 ]6 }5 r% A# u本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。3 ]# C7 ^$ g9 G# x6 N J% f
4-1 项目和技术栈介绍
% z7 P5 R" O9 | T9 f9 E2 p) O4-2 项目演示
* W7 a! {' x6 t) k4-3 构建环境搭建（1）
! t( L3 t$ q/ ^: T& v5 S' j( A4-4 构建环境搭建（2）
8 O- U* n7 Q* I) v; I* k6 J. B4-5 构建环境搭建（3）
6 q% x3 S, c4 k- o8 t+ ~4-6 构建环境搭建（4）
& P( M) U, p5 f; h4-7 redux-react使用介绍（1）0 w4 X. V9 |0 A6 y% J
4-8 redux-react使用介绍（2）
/ |9 U; G; A' j6 m+ @. W& N( K! E
第5章 美团APP—首页开发& m% F( ]! P- d
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
) c$ l6 `% \1 d) s$ w( a5-1 底部tab按钮开发(webpack-dev-server配置)
" t) h) H0 t( ~( j- u5-2 底部tab按钮开发-UI逻辑编写（1）* v* @/ ~! d/ k; a- `% H
5-3 底部tab按钮开发-UI逻辑编写（2）7 F, s0 [7 r. O! T
5-4 底部tab按钮开发(rem配置)# l6 J8 ^1 n% i0 `
5-5 底部tab按钮开发(集成ESlint)3 @6 p# G, i! H" R% v
5-6 底部tab按钮开发(集成HMR)
0 i# y# Y2 k- R7 z: ^2 [5-7 首页页面开发Header模块开发
' w5 B8 L8 F. v4 J2 ?5-8 首页页面开发SearchBar模块开发
7 n% @! ^; c# X& O5-9 首页页面开发-Category模块开发（1）
! }: b, [# `! d+ L! x3 p, Y' d5-10 首页页面开发-Category模块开发（2）
4 a9 g( L) w7 v& e0 h) T5 b5-11 首页页面开发(ContentList模块开发)
. r! g* [# P1 ~0 ^ q( J$ x% `+ z5-12 首页页面开发-ListItem模块UI开发# B' E1 r3 p+ c& r' t' d
5-13 首页页面开发-ListItem模块样式开发0 O) s* n3 Y% ^9 x( F s2 c2 z
5-14 首页页面开发-ListItem模块数据渲染开发（1）
# A5 p6 P4 t: c5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
, O* V4 M' i! _2 y5-16 首页页面开发(滚动加载逻辑实现)$ z9 w) N8 B/ e
5-17 订单页面开发(List模块开发)7 u- J# @# x3 d' T5 p5 \1 ?* `
5-18 订单页面开发(OrderItem模块开发)（1）
6 c5 I) t9 a. ~. k5-19 订单页面开发(OrderItem模块开发)（2）
- n- {$ Z$ i9 C! d5-20 订单页面开发(公共ScrollView模块开发)/ o9 v2 S$ {. x& i/ w
5-21 我的页面UI开发
( {$ P8 S+ J/ g" u* B) R4 J5-22 我的页面样式开发2 P$ g6 a3 L5 {: A5 S; @; V) x
5-23 集成react-router
" A& z/ Z5 T& _+ n3 {& S5 k) ^" |
5 ^5 Q% x0 Q3 b# ?6 l第6章 美团APP—评价和分类页开发! j' q* o5 {/ _3 u
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。 \0 ~! \" R) `: G1 r. x
6-1 分类页面开发(顶部NavHeader模块开发)
w, o* j0 y, `9 B& m" }) g3 l. @6-2 分类页面开发(顶部Header tab 模块UI开发)( a" I: z7 H5 }9 f } m
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
" D% l4 l5 P3 e, }. @6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
7 _6 M7 q, `7 D9 R, _: u1 ~. H6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
# I: g! Z( o3 M0 m& p8 }8 N) V6-6 分类页面开发(Filter面板模块样式开发)" i0 k0 D2 {, r$ x+ k# o
6-7 分类页面开发(Filter面板模块item逻辑实现)/ h9 e# X* c2 S
6-8 分类页面开发(列表List模块开发)% `, a0 T% X. j P
6-9 评价页面开发(UI开发)
) h$ G) j( i# ^3 A2 S6 A6-10 评价页面开发(样式开发)7 ^. o# Z+ A4 f1 u. \" N
6-11 评价页面开发(交互逻辑开发)
, a5 j# z* S2 T' y+ s9 l5 N' K9 F7 h3 ^) l2 `( }9 {: s
第7章 美团APP—详情页开发3 p u v. P, S) O' p5 E2 F! u
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
2 b: a- ^- V3 U" q& h7-1 详情页顶部tab开发(UI开发)* @6 ]; y$ t* F8 i6 P3 f
7-2 详情页顶部tab开发(样式交互逻辑开发)7 m0 l$ q6 ?0 T7 p! v* H
7-3 详情页点菜页面开发(LeftBarUI开发)
# ?7 D) N. K" a* c: ]% h* w7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发) N2 m. ]1 I& d$ }
7-5 详情页点菜页面开发(RightContent UI和样式开发): D7 P: u, d+ a$ R% j4 O
7-6 详情页点菜页面开发(RightContent逻辑开发); L9 t) n; O8 Q. }/ u5 b3 k& V
7-7 详情页点菜页面开发(ShopBar UI和样式开发)/ I; p2 o, ?5 @$ E$ @
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
; |4 f$ |% a! I b7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）0 f' h0 H. ~0 s2 R- E- c: n+ L; x6 P
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）7 }% F- d. p2 c% \
7-11 详情页评论页面开发(顶部Header开发)) J1 e; N0 G7 P" _
7-12 详情页评论页面开发(列表List 数据绑定)
" ]0 g: m) Q# l4 p* X* f5 @6 u7-13 详情页评论页面开发(列表List UI开发)# M7 W5 j% q+ \! J: v6 S7 a
7-14 详情页评论页面开发(列表List样式逻辑开发)# E! ^( p/ k, l, w0 R, x
7-15 详情页商家页面开发(UI开发)
- g3 O" M; q( F$ z7 I7 I: f/ B& ~7-16 详情页商家页面开发(样式开发)8 b3 a- u6 x$ Y; z7 W- N7 x
7 C* c2 J4 U3 m+ G# L! Y& [1 J
第8章 美团APP—回顾与性能优化: l, T# {) J. s9 @" H7 |8 @( o8 x; [
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...2 X4 ? H+ y+ B9 A+ e
8-1 懒加载性能优化
- e! q- d b" {. s8-2 JS和CSS公共文件抽离优化
6 Y- |% P% N$ s( |" I* Z8-3 编写后台server读取真实数据; F# F4 J7 A/ E; X3 l
8-4 多Tab 页切换与滚动数据加载优化
, E/ D4 O+ ?3 R) G, {8-5 项目打包 [4 E& H" J# @' y+ C% A
8-6 项目发布, M: Z) G7 c" ^- k4 E
9 D* Q, Y2 @; k- h1 L
第9章 美团APP与hybrid深度结合
- ~, b- l: b- K) G; t* o本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。: ~0 C8 u0 p3 K6 p" H2 s
9-1 JS bridge 原理 试看
( q5 k0 f5 J0 f8 p) \9-2 iOS webview + JS API接口+iOS APP集成5 V$ m* I! X" u* p
& L4 Y9 B/ \; q. ~' A第10章 课程总结
7 l) C2 I% d6 S回顾和总结课程讲解内容，能更好的回归和归纳。
9 o0 k% R/ x3 x9 X; E10-1 课程总结3 R" @* O) Q- q, I/ S1 Y! `- B
5 d/ ~ d1 @% w( e; N【下载地址】1 H* W9 ~6 ~/ X$ b; j5 I
) f- K6 _- [1 l1 P; x/ r( l/ F
1 Z: L5 ]; ]" [: i1 F |
[复制链接]
