; d W5 s ~& z; a' A& W! w
# G9 ^1 w# h+ D& F Y5 M% h/ m
【课程简介】) d5 [5 `/ ~% ^- _) O
本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。* F5 P% t# i4 m) O+ n- o
1 V- q8 e1 G. z3 d; X【课程目录】
' }+ I, Z# N2 ~$ `2 v/ c9 `5 s4 W第1章 课程介绍% A0 L, z8 n4 Y6 u! V
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
3 l, F5 Y( r/ @+ }2 K, ~1-1 课程导学 试看# b- }, t' i7 }/ U* @8 Z# {
# k$ U) e* g Y; ~% U9 Q/ l第2章 移动web硬知识点, i* k f7 V- B# i( L! f
本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。5 o! A" W. t$ V% z. V
2-1 移动web开发概述
2 y" H: u* { ?; z1 v4 B0 [+ C2-2 移动web开发调试
7 N" q! P3 M0 c6 B2-3 移动web适配概述
( v, W' ^8 H- _9 z+ R, J1 ?4 m" ]2-4 viewport视窗概念
/ d& v) r: z3 V l) X2-5 css3之flex布局
; X+ _4 i. \2 ]* R9 x( \9 L8 Y' h2-6 响应式布局和MediaQuery, C- U$ Q d1 N
2-7 rem,vw布局与适配. ^6 y$ l6 A+ _
2-8 移动端touch事件详解7 W0 D4 @2 ^9 { _, \, y1 b0 `+ M* @
2 k: A* C' _6 Z: b
第3章 移动web软技能* G- G/ i/ \/ ?1 H
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。...& @0 Z z3 j6 b4 o! t& ~
3-1 代码管理工具&项目构建工具简介
( I3 }7 J' B# H/ c1 H3 g* j! i3-2 webpack工具使用介绍) U/ J( M$ E, s
3-3 Sass预处理工具使用介绍2 A7 T7 W7 N( b: p
3-4 React组件化思想 试看) k, Y0 Z2 j- L, Z4 ~
% u. X6 ]$ N$ G/ L' R
第4章 项目开发构建环境搭建
$ O! F! I! a) o+ |本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
) S- i' ~: z/ T' G8 {: s9 c2 b( t4-1 项目和技术栈介绍( s( g- G& ^2 Z# Q: l5 K
4-2 项目演示, ^/ M4 j @: h, u8 N
4-3 构建环境搭建（1）
7 v( J2 H0 t/ o, C# x% C) m4-4 构建环境搭建（2）
7 @ x- |% d. n4-5 构建环境搭建（3）% V! ^& t% H& }/ {* T
4-6 构建环境搭建（4）- U$ u/ e% x$ \7 A/ E8 y) b2 T
4-7 redux-react使用介绍（1）1 y& |5 R& i2 a. ~ Q$ [
4-8 redux-react使用介绍（2）
8 @* X" z0 n; a: B, f6 L& a" B, s4 X T; T& |
第5章 美团APP—首页开发0 X2 b0 h" k5 F0 p
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。2 u1 O2 ]4 Q; b* R
5-1 底部tab按钮开发(webpack-dev-server配置), ]4 P" |1 d/ U! B/ F9 G
5-2 底部tab按钮开发-UI逻辑编写（1）
_' |2 \4 Z! r7 O" n8 j5-3 底部tab按钮开发-UI逻辑编写（2）- k" A& B2 Z+ w4 z9 H
5-4 底部tab按钮开发(rem配置): y2 G j& x' u1 D) w
5-5 底部tab按钮开发(集成ESlint)% L; d+ s) D+ y8 l! T
5-6 底部tab按钮开发(集成HMR)
& n5 s2 v0 p4 x+ r( O5-7 首页页面开发Header模块开发
" h0 R7 X3 m7 d J0 |* G5-8 首页页面开发SearchBar模块开发% A( d! b. _/ m2 o" l& T, \# e6 o( P
5-9 首页页面开发-Category模块开发（1）
) y2 o' `+ s9 [' f# ~% Z5-10 首页页面开发-Category模块开发（2）
$ B% G: F; x: U4 n5-11 首页页面开发(ContentList模块开发)
( H& q: A) j7 Z) }6 j' ~7 U. I9 X3 K5-12 首页页面开发-ListItem模块UI开发
( P/ ]3 P) I6 K; P! P% B5 s1 Z5-13 首页页面开发-ListItem模块样式开发
, X4 w$ i9 z' X* d, K0 \4 S5-14 首页页面开发-ListItem模块数据渲染开发（1）
! J% v; d# h3 M. B- K5-15 首页页面开发-ListItem模块数据渲染开发( 2 )2 A2 G$ v3 c! P) {/ h5 C8 l& r- J
5-16 首页页面开发(滚动加载逻辑实现)6 J5 s0 N' Y4 e1 l4 I4 P- Y
5-17 订单页面开发(List模块开发) y6 u$ t; L \, Z. }( y; e
5-18 订单页面开发(OrderItem模块开发)（1）; y$ c* V+ `+ q
5-19 订单页面开发(OrderItem模块开发)（2）; }& @; h5 x2 E( Q1 v6 z
5-20 订单页面开发(公共ScrollView模块开发)
7 _! P* ^5 b) r+ }6 C5-21 我的页面UI开发! y! J2 y1 _/ B9 y& F- J( n# D; s
5-22 我的页面样式开发2 M D. m8 e- g9 k, b& _0 S8 T
5-23 集成react-router
$ ~* p/ ^# A, \( s" ]
; v/ `- e( a) U% S" z$ s第6章 美团APP—评价和分类页开发
% N2 R& z2 j& j6 O& u开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。 \9 D: K0 d* S* n: |# M2 D, j
6-1 分类页面开发(顶部NavHeader模块开发)' s! h1 t& y7 ~; F5 }3 M5 }
6-2 分类页面开发(顶部Header tab 模块UI开发)/ g; G* P3 ~) p9 s0 c1 r/ E
6-3 分类页面开发(顶部Header模块样式和逻辑开发)$ a. `3 b* \5 t" }) K1 f- c
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)3 } y. z" f2 o L$ p3 l
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现
# _8 T/ [# r- C# y6-6 分类页面开发(Filter面板模块样式开发)
- e- t n9 d% W4 m6-7 分类页面开发(Filter面板模块item逻辑实现)
, C) ~# }. ^9 ` O3 c$ s6-8 分类页面开发(列表List模块开发)' y$ V, t) \& W& x+ B' e- N- H2 k
6-9 评价页面开发(UI开发)
$ k* z, j% Z7 m7 P G7 n% D1 V1 U6-10 评价页面开发(样式开发)6 V% R. j1 j# x. s, `& n/ @
6-11 评价页面开发(交互逻辑开发)5 Q4 Y$ p j5 t6 T! t
! ? C M( ?' q. @/ E第7章 美团APP—详情页开发+ u, g1 B/ F: v1 I% y% t4 }
开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。" L% A8 F$ N; t$ ^- h
7-1 详情页顶部tab开发(UI开发)
: i. q; O# |0 L7-2 详情页顶部tab开发(样式交互逻辑开发)
, s4 y( ? Q$ c s' C! |2 |3 q, }7-3 详情页点菜页面开发(LeftBarUI开发)
% Z* ^/ S7 n! l" Y3 E# |, H7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)# M% E" |) P" D
7-5 详情页点菜页面开发(RightContent UI和样式开发)
. ~1 @# |" \: a% M u8 P+ K9 w7-6 详情页点菜页面开发(RightContent逻辑开发)6 J$ |' E/ U3 N
7-7 详情页点菜页面开发(ShopBar UI和样式开发)7 X4 }" s. M" ~* a
7-8 详情页点菜页面开发(ShopBar 逻辑开发)
! f' v9 C) E* C7 f& c2 P$ D; r7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）" |! `1 n1 M0 j2 t. @2 {
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）1 T& o! Z; I I) K k0 d5 N
7-11 详情页评论页面开发(顶部Header开发)( T4 S+ \! u% x' r" f: \, ^
7-12 详情页评论页面开发(列表List 数据绑定)
1 n# S+ Q) J1 T: G% x; I) D7-13 详情页评论页面开发(列表List UI开发)' u6 ?" [1 w8 b. E1 t# F( }$ L
7-14 详情页评论页面开发(列表List样式逻辑开发) j/ s! `9 X6 K2 X# _* i ^ g
7-15 详情页商家页面开发(UI开发)% v7 x# Q4 Y7 F, r* X$ E' v
7-16 详情页商家页面开发(样式开发)
, v" @) S; w4 u6 V+ O
3 X+ d" |+ C5 G# |7 t第8章 美团APP—回顾与性能优化" d8 a1 J/ j1 o8 c
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...: T0 K' ~2 \$ j& o; z
8-1 懒加载性能优化7 M- z* l; ^' H0 U; y( v4 G$ x
8-2 JS和CSS公共文件抽离优化) T. ]. S8 X" B# N7 J" b
8-3 编写后台server读取真实数据
0 M; C8 N; G) M P5 W8-4 多Tab 页切换与滚动数据加载优化
1 P$ s! l' C5 R, R2 P1 J8-5 项目打包
, t5 |2 B, @- Z& l* _8-6 项目发布
" v9 |- D) o1 Z( L$ x- D$ G: W. }% n" i( p
第9章 美团APP与hybrid深度结合$ k' Q5 ]- Y: ]0 S) a
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。
9 T2 u; D- h/ a! h9-1 JS bridge 原理 试看1 Y+ D2 a: s7 m( `3 \/ x4 z
9-2 iOS webview + JS API接口+iOS APP集成, Z* G2 e3 |3 @, k5 d
5 w* Z4 Q7 n1 f0 y6 J8 X% `4 |
第10章 课程总结' V. K0 s" X( P, N
回顾和总结课程讲解内容，能更好的回归和归纳。# w0 P x: s2 {9 T- p
10-1 课程总结
9 E1 i( g" _) ?) @2 | ^. k3 Q8 u- V2 |# ]
【下载地址】
# p# d* L& |0 Z6 }) D' F
! J, U; v5 Q9 b3 L0 n" [/ x! _/ Z0 E) g" J- O& B
|
[复制链接]
