- _, N2 E' A' t
" ~% N7 p9 k3 L【课程简介】
; x) _ N; r9 {/ i本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。
0 S S. D0 E) M. h, T$ O' J* J7 p K+ r* h
【课程目录】
" m6 [8 C. Q; G* {" p4 b# B, Y" L第1章 课程介绍9 R, z4 u8 j0 c/ j6 h+ \# w
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。4 Z2 A2 g7 K3 Q$ L( \
1-1 课程导学 试看7 C3 O0 S) b O1 d
( i9 m8 c9 ~( A- u; X第2章 移动web硬知识点
f% B4 B1 X# u/ f- G5 J本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。
: K( l& [4 z, l% v9 K5 l2-1 移动web开发概述+ H5 p; b8 t: ?8 @
2-2 移动web开发调试7 ~3 V% Q6 l) R1 w# B4 Y
2-3 移动web适配概述- [$ U' X7 m" c3 p3 `- e0 z( Z. [
2-4 viewport视窗概念
* `7 o# x6 i5 [8 ^2-5 css3之flex布局
4 X$ ^9 F, U" f2 i9 _9 g2-6 响应式布局和MediaQuery! m. l& [) L1 c7 W
2-7 rem,vw布局与适配( J, X$ k( A, A) m% M7 s" w
2-8 移动端touch事件详解
! n$ }3 n8 }3 `0 Q; n5 [ w& Q1 {: J# ~/ t# G
第3章 移动web软技能' [. U% h# W" T# h& j6 Y! O
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...
2 D0 J. t) C% w! I3-1 代码管理工具&项目构建工具简介
3 }) i! n6 c6 P6 h" X, E( g3-2 webpack工具使用介绍, M; m; n! U" g) k/ i% z9 A
3-3 Sass预处理工具使用介绍
9 ~ t# B: d7 @( E" m. \3-4 React组件化思想 试看
) _- H8 ]! i g. _
9 R @0 y1 V# k! y3 D4 I- t& v" S第4章 项目开发构建环境搭建
- z) n& V; }4 t5 e6 }+ e* M本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。6 r) J6 x, `# J# D
4-1 项目和技术栈介绍
. F h7 @) z# P; a9 s4-2 项目演示1 m' B2 d# S! b; G8 E0 R
4-3 构建环境搭建（1）5 o1 a2 J( l) ]
4-4 构建环境搭建（2）
4 y6 N- \5 t9 o5 e4-5 构建环境搭建（3）
7 j& Q8 D$ L, e# a4-6 构建环境搭建（4）
# X5 n" _4 a2 R% G8 T$ X" s4-7 redux-react使用介绍（1）# N& @1 f$ c6 U
4-8 redux-react使用介绍（2）
9 y3 \; S0 z4 h: ^( Q8 x# k+ m+ ^
3 w6 j$ H. I; r3 S8 ?- n第5章 美团APP—首页开发 G2 E; y! Y, a, t! h! g" E- y
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。" S3 R P. t: X2 p, o/ h Z+ d3 n/ [
5-1 底部tab按钮开发(webpack-dev-server配置)
8 W. A6 d% b. J6 C9 \2 V. A5-2 底部tab按钮开发-UI逻辑编写（1） s% P, _. E' {4 B6 T( n- ]3 Z
5-3 底部tab按钮开发-UI逻辑编写（2）
3 L& i6 V$ }. q5-4 底部tab按钮开发(rem配置)
' {; M+ i+ {! H1 T5 \* v5-5 底部tab按钮开发(集成ESlint)1 B0 I1 `1 X$ \* Q
5-6 底部tab按钮开发(集成HMR)
. W8 D+ ]. c; I/ B, o6 q" P5-7 首页页面开发Header模块开发' R" i# {; A' O+ S d
5-8 首页页面开发SearchBar模块开发; X6 P' [' z4 v4 }, o' T2 R% R
5-9 首页页面开发-Category模块开发（1）
% t* E+ x8 w x( V; m# M3 H5-10 首页页面开发-Category模块开发（2）- k1 C9 _1 Z( R! p: {
5-11 首页页面开发(ContentList模块开发)
' t/ E& T/ P% R# N2 m5 `5-12 首页页面开发-ListItem模块UI开发
; @, H; _ x! p5-13 首页页面开发-ListItem模块样式开发
6 b2 N* b/ ?1 Y. ]+ H( I3 Q5-14 首页页面开发-ListItem模块数据渲染开发（1）* _. Q$ w9 R; d# }# [
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
! W$ g) |* q' k2 S% k/ V5-16 首页页面开发(滚动加载逻辑实现)
5 o$ E2 V6 l* P$ m) w5-17 订单页面开发(List模块开发). \6 N; E7 z8 g6 X- I4 i0 G
5-18 订单页面开发(OrderItem模块开发)（1）
/ y2 l$ P) J% D0 Z# @5 R& E5-19 订单页面开发(OrderItem模块开发)（2）* ~) r( {, v+ w0 M8 G4 U
5-20 订单页面开发(公共ScrollView模块开发)
4 k8 ?4 B& c$ j5 u; A5-21 我的页面UI开发
0 m$ [; H5 h! o. F0 }, H3 e5-22 我的页面样式开发
4 ^3 w* e7 u+ m# \( A5-23 集成react-router, z. | t3 b0 z; ]# o' @
2 B4 N5 v3 j2 t- V8 f第6章 美团APP—评价和分类页开发& x, V2 R7 V% X9 c, C
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。
- I( d+ y9 \4 y' P5 x k6-1 分类页面开发(顶部NavHeader模块开发)
+ B# x' T. o& Y7 G9 N3 H( M) K6-2 分类页面开发(顶部Header tab 模块UI开发)7 m2 ^! c, N( `" R
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
7 G6 U9 w3 E* R- t# y% O* w2 Y4 y0 L6 v6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)/ S+ V' K. _) o- J& K$ R" H; H
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现% j4 w- g- _& l3 E0 H) Z
6-6 分类页面开发(Filter面板模块样式开发)# {( s6 {4 n' \: E8 D! @, Q, z
6-7 分类页面开发(Filter面板模块item逻辑实现)
! ^2 K) P; n! @; p9 B9 r8 d6-8 分类页面开发(列表List模块开发)
, k8 U. a0 b; Y6-9 评价页面开发(UI开发)9 j2 b0 @3 ^6 ~& s# j
6-10 评价页面开发(样式开发)
6 I( X9 `- w5 D: | A& k( {6-11 评价页面开发(交互逻辑开发)
8 e! F# b$ H4 D' `' \7 q4 e5 V9 Z1 D+ \; i
第7章 美团APP—详情页开发2 J# P3 }1 C/ B6 B8 R5 z
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
( ^0 Q8 H/ [4 y7-1 详情页顶部tab开发(UI开发)* Z. A" e5 ^! k1 p1 L q6 n X
7-2 详情页顶部tab开发(样式交互逻辑开发)
% J. m9 F% w- O3 G7-3 详情页点菜页面开发(LeftBarUI开发)
2 I3 ~! [5 G3 t7 V, i Z. P; z6 r0 f7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)
) ]! |; p% n6 @( w7 W. |; k7-5 详情页点菜页面开发(RightContent UI和样式开发)
& y: J1 ^8 @" ]; N! B0 I7-6 详情页点菜页面开发(RightContent逻辑开发)
, l* J( ^ l3 [1 W6 a7-7 详情页点菜页面开发(ShopBar UI和样式开发)
' [7 x( t; k, n6 l6 B7-8 详情页点菜页面开发(ShopBar 逻辑开发) p/ s7 F* {$ E. f+ |! U5 v
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）% Z, R( F) u& K* a- m. _5 c
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
' M" u& c. h$ ^; P& n$ w+ \& N: d7-11 详情页评论页面开发(顶部Header开发)
; ^6 [( y, k# R5 [+ z& g* B7-12 详情页评论页面开发(列表List 数据绑定)
4 g. t2 C5 N' o" L3 f7-13 详情页评论页面开发(列表List UI开发), P- ?" r1 u% R0 r
7-14 详情页评论页面开发(列表List样式逻辑开发)
7 s7 w7 C1 |" T! W/ t; G8 r7-15 详情页商家页面开发(UI开发)0 w" ~( U! U) o) R4 \4 g4 D' z
7-16 详情页商家页面开发(样式开发)! o/ `4 j7 x% p3 X, i7 C- g, }
* _/ X( F4 [9 P0 M第8章 美团APP—回顾与性能优化
9 C# e8 G& J1 \( y! l) s9 s8 A通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
+ r1 w( x2 r* K t" W$ a8-1 懒加载性能优化
/ ?% {$ M8 q4 g" l8-2 JS和CSS公共文件抽离优化
. s; g; `0 ]; k. p8-3 编写后台server读取真实数据$ h; R$ H( Q* @7 K/ B
8-4 多Tab 页切换与滚动数据加载优化 d1 A+ S% E1 g$ j7 A/ \) x/ }6 Z
8-5 项目打包
- T9 {5 a% ^; O, Q t: E8-6 项目发布; a/ o$ K2 Z# ~6 x# c9 @. z$ @
7 D: M- K3 A" o+ s
第9章 美团APP与hybrid深度结合 N! M ~9 X# o8 u7 ]- g, L$ D
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。& m& h/ x" f, j. n7 e$ \5 _& F. Z
9-1 JS bridge 原理 试看
2 t+ i* E" |, W3 K$ ]" @, g9-2 iOS webview + JS API接口+iOS APP集成
" ^9 q. y/ V% _& B/ D( |, j
" V/ U) T8 _/ P0 E& R# Y- E第10章 课程总结% S. o9 H# m- u9 E+ E
回顾和总结课程讲解内容，能更好的回归和归纳。- O0 a) V9 Q0 }$ q) G5 ^8 ?
10-1 课程总结: V) @% b1 J1 ?
: G# v! t, m8 y
【下载地址】 T, Z4 I* x+ I3 C& x
$ l4 B( H( h0 o" F3 B! J, X& m0 t4 y1 ?4 u4 ?
|
[复制链接]
