9 g/ W4 }% J5 M( M
# V& t& @* @. v
【课程简介】# h1 R$ B5 G% _7 ?) ?% A) V
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。' T* ]9 B: S9 [, u
$ C6 i2 t* W" |
【课程目录】7 F* ~; X J$ r& a7 q
第1章 课程介绍
9 \" M! W( m* M通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。9 A0 A. K9 [. e' L
1-1 课程导学 试看
1 S9 O* @" c& @2 u" U
) C n5 l# b5 n) K( d& R) R第2章 移动web硬知识点
* P! y" x9 R" S1 S) x4 N! s9 X: `本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
' i4 ?. O7 ]4 n2 |, C' ]2-1 移动web开发概述, D" n* ?+ D, |" C" t3 N- H
2-2 移动web开发调试 @3 X) ?( {2 N' |2 q( F+ o6 a
2-3 移动web适配概述
: Q; P- ^- ]9 ~$ S# \2-4 viewport视窗概念1 R" D6 X- \) D1 E
2-5 css3之flex布局8 ?: G( D3 c; l
2-6 响应式布局和MediaQuery2 w6 T) H' S7 F2 m/ p
2-7 rem,vw布局与适配
; @2 O' e3 t' P5 F5 t" c2-8 移动端touch事件详解# e; z/ |8 ]4 s2 \
/ d) t- c1 x, I- }7 F8 n/ G第3章 移动web软技能
! H" j e) G; c7 H0 M" f7 N+ Y本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
1 t5 j* w3 g4 ?' z9 I1 g. r$ B3-1 代码管理工具&项目构建工具简介7 Z5 J5 P/ b: E& J$ W3 Q0 B# g
3-2 webpack工具使用介绍; E% c5 q# H" q# v% j
3-3 Sass预处理工具使用介绍 }! [# w. U* B5 s
3-4 React组件化思想 试看! _" U1 m7 G' }, t' g
/ D8 w8 `( T0 ~& y( k( r, {9 B. L第4章 项目开发构建环境搭建
. }& u/ `* O2 ^1 j! D9 l本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。 U0 x; h/ t( a& D8 |6 B
4-1 项目和技术栈介绍
3 P+ {0 |; Q( Q' X4-2 项目演示; M- |5 S' |1 x' ]! [
4-3 构建环境搭建（1）; o2 w; W' {; r
4-4 构建环境搭建（2）. X. { T" X9 W# N/ g) l& r
4-5 构建环境搭建（3）, Q, n+ o2 V+ Z- {, x+ d3 ^) G1 B
4-6 构建环境搭建（4）1 g5 x& s( O) C# V9 \
4-7 redux-react使用介绍（1）
; j$ M5 ?& R$ q, w- Z4-8 redux-react使用介绍（2）
& F; z# A0 \# A$ C7 @
/ z) U% Z- a" v4 A4 A u第5章 美团APP—首页开发
, i3 B# u, U9 F8 V开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
* S: g2 N7 E+ S& ]5 h- F+ N7 F5-1 底部tab按钮开发(webpack-dev-server配置)0 \4 u. ^/ s+ e [1 J* p4 }( [
5-2 底部tab按钮开发-UI逻辑编写（1）
+ G" V. B/ D, D, l! A) U9 i5-3 底部tab按钮开发-UI逻辑编写（2）7 v& v6 C5 L2 ^9 V Q5 b
5-4 底部tab按钮开发(rem配置)
3 k% I* e1 s+ U& ?# x5-5 底部tab按钮开发(集成ESlint). |3 @% x* y, @$ u
5-6 底部tab按钮开发(集成HMR)
% |- R* W; I/ w4 L5-7 首页页面开发Header模块开发
% J+ d0 h. s, W2 i) f0 y* x( x& ~5-8 首页页面开发SearchBar模块开发$ \2 n4 N/ \* H( Z
5-9 首页页面开发-Category模块开发（1）
) I0 M/ _/ i1 {1 y$ v5-10 首页页面开发-Category模块开发（2）
% K3 u7 d! }0 Q Y2 F& B5-11 首页页面开发(ContentList模块开发)( t0 H4 |! \7 g8 ^- P$ D3 Z W
5-12 首页页面开发-ListItem模块UI开发
5 I: a' Q- N8 u5-13 首页页面开发-ListItem模块样式开发1 d2 [3 v) e5 y/ ]9 @! `6 }3 y
5-14 首页页面开发-ListItem模块数据渲染开发（1）
2 t+ u9 E7 O1 v9 h5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
; k0 N ?& X& k2 l; b' s5-16 首页页面开发(滚动加载逻辑实现)
7 _$ h( F4 z' M( d8 u5-17 订单页面开发(List模块开发)/ z* q; H4 P3 m/ w# O; o$ B" L
5-18 订单页面开发(OrderItem模块开发)（1）
8 d# T( E: d. t7 c( Y5-19 订单页面开发(OrderItem模块开发)（2）( ]8 i+ t+ V( ]) N
5-20 订单页面开发(公共ScrollView模块开发) W& M" c; x, E; u
5-21 我的页面UI开发
' g# j" M8 d: O5-22 我的页面样式开发
. s6 t V7 ^" N- T" r; a5-23 集成react-router% T! P/ [8 U* S3 q) u! i
5 K4 G# E* y+ o第6章 美团APP—评价和分类页开发
6 y( a6 r8 R' @# W- P5 i开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
9 R4 x$ v6 K7 w0 z# r3 q6-1 分类页面开发(顶部NavHeader模块开发)
4 y* [: E$ z' S3 G S" H6-2 分类页面开发(顶部Header tab 模块UI开发)1 B9 X, \1 y) D# j: U6 i" u3 k" J
6-3 分类页面开发(顶部Header模块样式和逻辑开发)/ M# }; J% B. e/ c+ [
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发) q& D6 s* x) A
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现7 _- c* g$ ~) q% m5 |2 N
6-6 分类页面开发(Filter面板模块样式开发)
0 ~) K3 P# N- }# [0 Y7 h! r7 h6-7 分类页面开发(Filter面板模块item逻辑实现)- S! z: }0 r7 N5 O0 r" r* i% Z
6-8 分类页面开发(列表List模块开发)8 u( j6 A$ @$ Q, v( X
6-9 评价页面开发(UI开发)
( L3 p5 j# V. X. A6 W6-10 评价页面开发(样式开发)8 f2 W% S5 }' c, d! c
6-11 评价页面开发(交互逻辑开发)6 W" k. W3 n6 p
& \, p% q$ s2 C% q# n& Q
第7章 美团APP—详情页开发0 N/ i: ? }( W3 D/ _8 r
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
; L; }& ]( I% F& `# l. N7-1 详情页顶部tab开发(UI开发)9 X' Z6 p; T; h" n
7-2 详情页顶部tab开发(样式交互逻辑开发)
# O0 _: B+ }/ ?7-3 详情页点菜页面开发(LeftBarUI开发): F% ?+ P) W- ?* g6 k/ Q0 q, z
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
; {7 ~. \3 s+ }) H; s4 k7-5 详情页点菜页面开发(RightContent UI和样式开发)" S8 |& s- ?+ R& [9 }
7-6 详情页点菜页面开发(RightContent逻辑开发)
% Z- b5 y1 z! V% H/ ^8 g7-7 详情页点菜页面开发(ShopBar UI和样式开发)' Z! X7 s2 k" c( e5 ?0 e
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
" J, a5 }2 ^3 H# l$ C# ^7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）% V' ?; [' C. z
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）+ R+ i% ^6 N. U" c
7-11 详情页评论页面开发(顶部Header开发)
U. ^# z9 n! h" r7-12 详情页评论页面开发(列表List 数据绑定)/ t1 z \* K, S' R$ H
7-13 详情页评论页面开发(列表List UI开发)9 s+ D& o/ @! n6 w
7-14 详情页评论页面开发(列表List样式逻辑开发)& X& u$ Q. s* ~) }8 x) }
7-15 详情页商家页面开发(UI开发)
- f z' p4 ?0 A$ n+ Z+ a/ x" }7-16 详情页商家页面开发(样式开发)4 n% [% o, v2 z
6 x4 Z& M& i# y# X第8章 美团APP—回顾与性能优化, s% {$ l8 x3 C' `% C6 l9 |
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...1 H7 U7 d1 B8 E4 n& F8 O
8-1 懒加载性能优化$ o4 u; s. J% T+ M% w
8-2 JS和CSS公共文件抽离优化
; B5 Q" S$ \! t- z3 O d1 Z1 z# ]8-3 编写后台server读取真实数据
4 @8 t0 P* w/ S+ g9 n. \" @" [8 \8 F8-4 多Tab 页切换与滚动数据加载优化. W2 j- R0 W% p8 I6 [0 c
8-5 项目打包8 }8 f& G- X u; R7 D C
8-6 项目发布
/ l$ j5 j8 q7 R2 Z0 I
/ h* O, C5 s0 F X第9章 美团APP与hybrid深度结合 h! l2 S0 K! Y _
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。. F' s i$ ~# }* G
9-1 JS bridge 原理 试看
r) M: ?- g- `+ U/ o9-2 iOS webview + JS API接口+iOS APP集成
x( E4 Z$ h2 a$ K& y
5 u3 g* O# w! b$ u* V3 Y第10章 课程总结, M, Y* R" _& P/ ^
回顾和总结课程讲解内容，能更好的回归和归纳。% `9 I" F/ {5 N+ f' S% J: J% g. a
10-1 课程总结
% K3 h! M- A8 _9 A5 G* r; R
( q ]6 K H- V% u( r9 F+ y3 H9 D% {【下载地址】* a5 F; g u4 o- I0 x
/ m7 R( y% ~% J3 j
' x& A5 a0 e9 L" a6 O7 [* } |
[复制链接]
