移动Web App开发之实战美团外卖

  [复制链接]
查看1363 | 回复6 | 2019-8-14 22:42:04 | 显示全部楼层 |阅读模式

# [: l% _- E$ w2 F. J5 A, h& W 360截图1843070797144143.png 1 o' L, C) X* J& k, E7 B9 y
【课程简介】
1 D; Z; B4 d  m! `1 @( F本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP,理解并掌握移动Web开发的基本技能,开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能,本课程还覆盖了工作中常见移动Web开发问题,并且可以通过课程学习找到对应的技术解决方案。9 n' k+ s8 |! L: ^

8 j* p3 l+ E# N! p" ?【课程目录】
4 C; @, M5 I! n  Z! t0 i第1章 课程介绍; S* x- F5 B, ?+ V) T7 R& y0 f
通过课程介绍,了解学习课程的必要性,所包含的知识点,课程安排,学习前提,课程收获,快速全面了解课程。
& u6 v- N( c2 x6 g3 Q1-1 课程导学 试看' h( y1 i# k. I6 A

$ L9 E1 f# p3 v# U/ w第2章 移动web硬知识点
" B. G' y' T) G, d本章主要讲解移动web开发中必要掌握的基本知识,是进行后续学习的前提。从概述到开发调试方法,以及viewport视窗概念和原理的讲解,在到移动web开发关键布局技能和适配方案,最后讲解移动web中常用的touch事件。
& |, O. g$ @! @/ }2-1 移动web开发概述8 R+ F) T+ M/ F2 |
2-2 移动web开发调试& u$ K* x' j5 D: `- z4 m; ?
2-3 移动web适配概述! H3 X# V" L: U4 C: P7 Y8 w% f
2-4 viewport视窗概念
, t7 B; T3 [* V: H0 b2-5 css3之flex布局; }. I0 {8 v9 r- P7 R6 g
2-6 响应式布局和MediaQuery
4 L  K6 ~7 \- o. S/ Z2-7 rem,vw布局与适配4 {; l- h* Z) i8 [% N1 c; ]
2-8 移动端touch事件详解
2 M' H4 h' N+ |( A
, l* l- }( j0 S第3章 移动web软技能  n4 t1 G$ L6 z  \- K, i
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念,同时预先给大家介绍webpack和Sass的基本使用方法,帮助基础弱的同学以便于进行后续的学习,最后教大家如何使用React组件化思想开发页面。...
+ i! C8 a- }$ n8 r0 Y1 [3-1 代码管理工具&项目构建工具简介; {3 a3 _* O9 T
3-2 webpack工具使用介绍
2 n. p2 A6 C, w  ~9 v* j: a/ j) N3-3 Sass预处理工具使用介绍9 F" {( I9 t9 w  b
3-4 React组件化思想 试看3 D; l* Q) r8 f1 l8 `& ^' s; _  S

. I! l" W2 X& E+ l第4章 项目开发构建环境搭建
9 y% D9 G, e( b1 s0 L本章主要讲解的内容都是为下章实战项目做准备工作的开发,包括项目的最终结果演示,同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法,以便于对Redux不熟悉的同学巩固一下相关知识。6 Y7 F8 J9 U9 o+ ~
4-1 项目和技术栈介绍
! Y* x& q' y$ G2 k. B& Y+ N4-2 项目演示* n* y8 \* [, V" t' `8 o0 f
4-3 构建环境搭建(1)
* ~2 E! u# [/ \9 d4-4 构建环境搭建(2); O; H( w: W# T3 q0 y/ u& ^" D% h
4-5 构建环境搭建(3)# Q& [8 m+ j- O% g/ l" g
4-6 构建环境搭建(4)
. e) w- Q+ a4 ~4-7 redux-react使用介绍(1)
3 M2 Y3 O9 x1 X# z& l4-8 redux-react使用介绍(2)
8 {1 Y- o+ t6 u/ l8 ]3 u
2 y9 E) W+ f' S/ f. {  K  U第5章 美团APP—首页开发
# B) P  Q$ j1 J) d! H* N开发首页,讲解通过React+Redux实现页面基本逻辑,使用flex进行页面布局,引入rem进行页面适配,实现tab切换,滚动加载逻辑,以及事件绑定逻辑。5 g3 ]( R' I9 X; ?) P+ N
5-1 底部tab按钮开发(webpack-dev-server配置)1 u% ^9 v( L* \" ], ^  D; G8 ?- X
5-2 底部tab按钮开发-UI逻辑编写(1)
' t; a7 o; g( y8 i! @7 ~5-3 底部tab按钮开发-UI逻辑编写(2)
7 I  n% s+ n' q* I. U5-4 底部tab按钮开发(rem配置)
; q* j& \. d+ }, E7 g6 m( g% x/ v! i5-5 底部tab按钮开发(集成ESlint)) Y/ [4 `8 Y3 u; ~7 Z
5-6 底部tab按钮开发(集成HMR)) [) Q7 _" \( M% J7 r
5-7 首页页面开发Header模块开发
. c3 q$ p2 f. o5-8 首页页面开发SearchBar模块开发' G8 T+ J* ?" a! J$ k- o& D
5-9 首页页面开发-Category模块开发(1)
: f3 j( \$ B0 _: x7 z! ?$ u* j5-10 首页页面开发-Category模块开发(2)) t$ b, Y' I2 i& S1 f. I! y
5-11 首页页面开发(ContentList模块开发)" B4 J! ?  d, T2 X$ C0 ~8 Q
5-12 首页页面开发-ListItem模块UI开发
+ `' B5 y0 u7 R. u! P5-13 首页页面开发-ListItem模块样式开发/ k/ Y1 A! L0 p. ]  y4 g+ J
5-14 首页页面开发-ListItem模块数据渲染开发(1)7 A! e2 |/ O; e( i& ~% l' l4 S1 g
5-15 首页页面开发-ListItem模块数据渲染开发( 2 ). j! @( Q  o0 B. q4 j
5-16 首页页面开发(滚动加载逻辑实现)
4 P% x6 W) w% w: x, C9 f6 f5-17 订单页面开发(List模块开发)
' s( z4 S) G% _/ Y5-18 订单页面开发(OrderItem模块开发)(1)& W9 z# M4 L" q( ]
5-19 订单页面开发(OrderItem模块开发)(2)
8 V. O( j, w$ Z  m" Q5-20 订单页面开发(公共ScrollView模块开发). t2 R+ _5 k. m5 t3 ]
5-21 我的页面UI开发! h/ k! o  p+ m+ u
5-22 我的页面样式开发
+ k; S  h: p& z9 Q" B# J+ y5-23 集成react-router4 t* k0 C+ S$ b7 P4 J2 f
, i% ~, i) J3 A7 m  f! c/ e
第6章 美团APP—评价和分类页开发5 p! s( j# Q4 n9 u9 T9 D" Q
开发评价页和分类页,讲解使用div+overflow实现局部滚动,移动端输入框相关使用技巧以及css伪类实现星型icon。$ y$ A, U9 D# p1 H$ t5 P! e9 Z
6-1 分类页面开发(顶部NavHeader模块开发)
& R: |0 J. T6 o2 a8 g/ e6 A6-2 分类页面开发(顶部Header tab 模块UI开发)# l) _7 L/ o- h* T; T
6-3 分类页面开发(顶部Header模块样式和逻辑开发)
6 H8 b2 f# w! [$ V. a2 k" Q( U6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
2 e' @+ G1 C  [: A& L5 v6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现0 _& M3 O1 u) L
6-6 分类页面开发(Filter面板模块样式开发)6 c" j! R7 j+ C, o. @+ M0 j$ L1 C
6-7 分类页面开发(Filter面板模块item逻辑实现)! Z+ w2 C" W) @' \7 a! K
6-8 分类页面开发(列表List模块开发)  l& q7 [5 T9 c
6-9 评价页面开发(UI开发)
9 L3 @! D5 m2 Y; ~! r6-10 评价页面开发(样式开发)
! u  x0 K4 b+ j: E6-11 评价页面开发(交互逻辑开发)# B+ f* P: h& q' E5 K

$ J. f- O' Z  W* y* T3 d" X' d第7章 美团APP—详情页开发$ s8 z; g) _/ d, {$ A3 G  E7 W
开发详情页,讲解点菜选择器相关逻辑,通过React组件化对之前页面的公共组件进行抽离,通过封装scrollview实现评价tab的数据加载,以及使用css伪类实现1px边框。+ W5 m7 Q  r3 X" |2 u7 W& W5 e
7-1 详情页顶部tab开发(UI开发)
  G" p4 q3 m+ v% |3 t  h2 |6 o7-2 详情页顶部tab开发(样式交互逻辑开发)
" n8 I6 Y; |/ @9 T. F- b7-3 详情页点菜页面开发(LeftBarUI开发)) e/ _" _' g8 m0 V
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)- z$ D) m; U2 N
7-5 详情页点菜页面开发(RightContent UI和样式开发)
5 F3 w( [5 K2 F1 n8 J4 ?3 Y+ b% W- t7-6 详情页点菜页面开发(RightContent逻辑开发)2 W% z- e. r- `! x7 u8 K
7-7 详情页点菜页面开发(ShopBar UI和样式开发): R, i4 X8 x% y
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
& }3 I9 _$ r" f8 e+ T3 S7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)(1)
. j5 g$ H' c( c. d: `7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)(2)3 \, v2 Y) P9 @. t6 H7 y
7-11 详情页评论页面开发(顶部Header开发)% e% M8 J! C5 I' a& f/ ?
7-12 详情页评论页面开发(列表List 数据绑定)
% e0 L' p7 c7 k/ s' g7-13 详情页评论页面开发(列表List UI开发)4 n8 ^5 Y7 N+ X% w
7-14 详情页评论页面开发(列表List样式逻辑开发)
" }0 y* B0 C6 f0 z; \* z5 [7 F' m7-15 详情页商家页面开发(UI开发)( ~2 t/ [" Y, d& P: g
7-16 详情页商家页面开发(样式开发)) N6 K( f- P/ }, f

+ _5 R4 P6 b% C& B' `( j第8章 美团APP—回顾与性能优化- A! P' t& R' K* Y. Y: i
通过nodejs和express实现后端数据的代理,通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化,同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
6 y; a" f4 p  w$ _  m  h! ]- J  e8-1 懒加载性能优化
; M+ r- Y' g1 m8-2 JS和CSS公共文件抽离优化3 }# x# }. p+ i
8-3 编写后台server读取真实数据
4 D- `+ j8 @( x0 m9 D3 Y5 K& e8-4 多Tab 页切换与滚动数据加载优化$ C- O- q" l; w1 }: j% i% G
8-5 项目打包0 p2 S1 d5 ]: h) O
8-6 项目发布
$ y9 y- s7 o- Z4 p; o- \6 w: C4 ^! r4 i1 V0 [
第9章 美团APP与hybrid深度结合
9 {  W( |, Z1 }6 r4 |% U- i本章主要围绕Hybrid进行讲解,使用OC代码带领大家开发一个简单的webview组件,同时讲解web和native之间的通信机制,并开发jsbridge接口完善美团外卖项目,让项目看起来更像是一个真正的APP。
2 y5 {7 v# I2 \' E, ^, X* B3 F9-1 JS bridge 原理 试看9 X8 l- D1 I& R( i8 a0 \% y
9-2 iOS webview + JS API接口+iOS APP集成% W( B6 D" T5 [4 T

" C( X# P6 ]) |' I第10章 课程总结* A/ l/ i5 J& n5 m1 d
回顾和总结课程讲解内容,能更好的回归和归纳。
! [  o$ c  a+ N. ?10-1 课程总结9 V, n5 Y! W' o
' H' V+ c2 @$ Y) Z
【下载地址】' q/ j6 q/ d; l: j
游客,如果您要查看本帖隐藏内容请回复
9 H+ U3 `# T2 V% A6 v
# F+ o7 E" T2 K
回复

使用道具 举报

brokenyouth92 | 2019-9-17 14:13:27 | 显示全部楼层
强烈支持楼主ing……
回复

使用道具 举报

小小码农 | 2020-6-17 18:19:36 | 显示全部楼层
支持楼主
回复

使用道具 举报

cyxjq | 2022-7-4 18:08:42 | 显示全部楼层
22222222222222222222222222222
回复

使用道具 举报

ustc1234 | 2022-7-4 20:44:31 | 显示全部楼层
移动Web App开发之实战美团外卖
回复

使用道具 举报

dj808 | 2022-7-14 05:30:16 | 显示全部楼层
88888888888888888
回复

使用道具 举报

xiaoyou | 2022-9-30 09:33:46 | 显示全部楼层
支持支持支持支持支持
回复

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则