$ w- q" Q: x# x m. j9 @# H
" \4 b/ N4 {9 ?" I( H
【课程简介】
7 x t# Z) W6 b4 G& L0 Y% s0 _1 M本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。: I; \$ a! w. n' G( C1 f. ]8 v
5 u2 B; j6 t# r4 V- }
【课程目录】
" ?, X' _/ X7 R) t$ B, V9 k* i" v第1章 课程介绍
" `# d, [7 `2 x; a, h9 r通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
9 B" w. K. w' A* T6 s7 ~7 W- H1-1 课程导学 试看
( i J* Q& b- q. k+ v& p$ z# I$ P7 o
第2章 移动web硬知识点
8 G# |8 H: D5 L$ m' G) W6 k本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
" r3 D$ K/ [2 m0 R3 R2-1 移动web开发概述( M: P: n( e$ J1 S6 B
2-2 移动web开发调试$ \& S4 \. e! {. O1 s6 f
2-3 移动web适配概述
9 _+ i* s6 n/ j8 ?2-4 viewport视窗概念' [1 J9 ]' D' z! T
2-5 css3之flex布局
. }: e& I+ |' a1 b8 n2-6 响应式布局和MediaQuery+ C7 v- u7 J& t+ H9 I* y
2-7 rem,vw布局与适配- s& U" T5 n* Q, b L' O) H6 m
2-8 移动端touch事件详解 Q; L& u' m! M
7 ~# p8 J. O( n) z第3章 移动web软技能$ M1 l) k; f9 M, K% Q3 B' V
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
, j3 h6 r$ W" Z) V3 ?# {3-1 代码管理工具&项目构建工具简介
2 j0 M- R$ M' Y, C* T0 W6 q3-2 webpack工具使用介绍
3 @5 ^) d; o9 v$ u. t/ x& x7 l3-3 Sass预处理工具使用介绍
9 ]# y8 z* g4 I, A3-4 React组件化思想 试看' X k% V6 d2 ^
5 T w9 N) z# R8 u7 |
第4章 项目开发构建环境搭建
, b% u# d8 r7 ^( w! s G本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。( W/ w9 f/ C+ U9 F7 ]
4-1 项目和技术栈介绍
: ]2 \ `7 k9 W! w( W; [4-2 项目演示0 M) B& w( H* [% V5 }
4-3 构建环境搭建（1）
" F0 ?0 r" f! t1 T2 [% m k4-4 构建环境搭建（2）
. W5 n) y0 [! w. L8 x4-5 构建环境搭建（3）
1 p0 M. T3 Z, ~9 r* k- s4-6 构建环境搭建（4）
& Y, [. Q- G& k8 o4-7 redux-react使用介绍（1）
9 j) L2 K0 m/ G' a1 e) N( Z% Q4-8 redux-react使用介绍（2）% A% ^3 K; W2 X: {# O* d3 b
7 v1 l4 n( v$ m6 F) S) ]* `+ H第5章 美团APP—首页开发3 N& i f; K3 z& ~
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。, ~" R9 F2 G4 r/ K* D1 Y: r8 X
5-1 底部tab按钮开发(webpack-dev-server配置)2 a4 X7 R5 N: X5 w, X' q
5-2 底部tab按钮开发-UI逻辑编写（1）
+ S7 Q! K7 z9 E& _6 T4 s& q5-3 底部tab按钮开发-UI逻辑编写（2）
, I) \$ o* J- }5-4 底部tab按钮开发(rem配置)& q3 m' ?( a7 k! p
5-5 底部tab按钮开发(集成ESlint)) J/ L7 O0 @4 j5 A0 q
5-6 底部tab按钮开发(集成HMR)6 @& c: N# ]% F! A0 a9 T" K# k
5-7 首页页面开发Header模块开发
9 G* [" T. _9 {' {$ H5-8 首页页面开发SearchBar模块开发 \$ j6 W; @* z( i6 @% W
5-9 首页页面开发-Category模块开发（1）
. \! `+ L: m/ f; m" ]" Z% f2 v5-10 首页页面开发-Category模块开发（2）
4 c* x. W8 a& o) `! A5-11 首页页面开发(ContentList模块开发): a! `# Q: q/ X
5-12 首页页面开发-ListItem模块UI开发
9 ]4 N- k4 j$ M- {4 M5 K5-13 首页页面开发-ListItem模块样式开发2 U$ z3 W( g6 W9 g& J
5-14 首页页面开发-ListItem模块数据渲染开发（1）
, E& E. V6 S" K' q5-15 首页页面开发-ListItem模块数据渲染开发( 2 )9 Q9 R2 k- J3 j% ^: Q0 X
5-16 首页页面开发(滚动加载逻辑实现)
& J- J# {9 B N! @0 x5-17 订单页面开发(List模块开发)
7 y; B+ {) ?9 i# _2 Z5-18 订单页面开发(OrderItem模块开发)（1）
% D T# L4 A0 ]2 |& L5-19 订单页面开发(OrderItem模块开发)（2）
$ c8 o& F2 @" k+ c5-20 订单页面开发(公共ScrollView模块开发)& ]' X0 _; S5 t( `, \0 A4 y" i
5-21 我的页面UI开发2 O+ N8 L9 J1 P8 {6 o2 Y; ^
5-22 我的页面样式开发. J( O1 q- D" |, K1 t5 h
5-23 集成react-router5 _. O, B; K3 c& ^5 o! `# t6 B
/ b1 @; H [; k$ ]第6章 美团APP—评价和分类页开发. Y! A) i6 A+ j1 f6 G/ Y
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。8 `) c+ w9 }; E: @0 Y
6-1 分类页面开发(顶部NavHeader模块开发)
W% T$ J# F* x6-2 分类页面开发(顶部Header tab 模块UI开发)3 U! v: [ Q" w, Y3 {5 v! ?; u; c
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
4 F6 c+ I4 o) G& E6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
( S; H* x7 H2 v4 t) X {6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
b8 @' H9 ~( j7 v6-6 分类页面开发(Filter面板模块样式开发)
; U) h* I4 U m1 A6-7 分类页面开发(Filter面板模块item逻辑实现)$ ?+ P5 R M6 n8 X
6-8 分类页面开发(列表List模块开发)
G; O) a/ k, A* ]7 c- E4 b6-9 评价页面开发(UI开发)+ v. ^9 F2 Y K% s7 H8 ]' \
6-10 评价页面开发(样式开发)6 O" h2 l+ a3 `* {# L2 j) G3 T
6-11 评价页面开发(交互逻辑开发)4 \! ? P$ K" `1 q! d) f/ a
2 r/ m& d) T% `& i0 g5 F
第7章 美团APP—详情页开发& @5 o( w. n" Y4 A7 a- O
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
/ l( L+ I0 \+ R" ]5 w7-1 详情页顶部tab开发(UI开发)
& O3 B( L* q: A$ X7-2 详情页顶部tab开发(样式交互逻辑开发)
' ]! h6 ^+ V; p7-3 详情页点菜页面开发(LeftBarUI开发)
' R# f4 ~- m% R9 M+ Y. d% e7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)% V6 z; c1 M# Q# y9 i: }6 D
7-5 详情页点菜页面开发(RightContent UI和样式开发)
# \( N# S6 G( s2 Y; M: m7-6 详情页点菜页面开发(RightContent逻辑开发)
+ j" R' F7 \3 C* p2 K% z1 D, `" U5 C) Z7-7 详情页点菜页面开发(ShopBar UI和样式开发), t- a3 r$ V+ q3 W6 G
7-8 详情页点菜页面开发(ShopBar 逻辑开发)! y/ |' v/ A/ n& W
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）4 B3 `# Z% q& v! F
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）& c- D2 \, B# }+ J7 t
7-11 详情页评论页面开发(顶部Header开发)0 J0 ]3 R2 y1 ?& T1 G5 g5 y
7-12 详情页评论页面开发(列表List 数据绑定)
1 e7 f1 Z) \2 S% X! ~7-13 详情页评论页面开发(列表List UI开发)
! t4 L: n4 g- V8 @! Y3 T7-14 详情页评论页面开发(列表List样式逻辑开发)1 T+ \+ y& n4 _
7-15 详情页商家页面开发(UI开发)
6 c0 c w9 [1 F$ q, m+ |7-16 详情页商家页面开发(样式开发)
8 A) f7 K: H; ?. {
! [. G* s' ]& `2 t* j- `第8章 美团APP—回顾与性能优化& l1 p( l& T1 r* l
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
: @- w4 ^) y% K. z$ q) c3 a8-1 懒加载性能优化7 H+ P( m$ _; c1 R, Q' R
8-2 JS和CSS公共文件抽离优化
: g4 ^0 d' L) g; W |) a" Q$ B2 ]3 f8-3 编写后台server读取真实数据
( T; I# n2 k6 M- D8-4 多Tab 页切换与滚动数据加载优化1 J3 P3 r# l3 Z* D' f0 Y1 }' K
8-5 项目打包% t& y- c! n5 Z$ ~5 f, u8 n
8-6 项目发布- j5 c. f3 m$ x+ f) M. |1 g
) ~5 @5 ?( ?2 U6 d( M8 B, z; E
第9章 美团APP与hybrid深度结合
# t+ h! d0 Z" K; H* ], r本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。% Q: ]. `# E4 V
9-1 JS bridge 原理 试看# i& M7 p0 ~/ H- A/ `. w V
9-2 iOS webview + JS API接口+iOS APP集成% R( n$ {, |4 o2 S* _
: H7 x# {" J8 g2 V) b1 N: s, V第10章 课程总结 y$ D0 h. z* w5 ~* O& ]
回顾和总结课程讲解内容，能更好的回归和归纳。1 `2 \9 c$ ?) U$ c9 D
10-1 课程总结
: V; n/ i' f: ~ }$ `& \9 Z/ l# Z% ^" x
u' Y2 J1 X+ d7 P【下载地址】
1 X& t% R% G; I9 b5 Y# j5 P! o, x* a0 c
' t& i) e' P" v6 m
|
[复制链接]
