9 |0 `$ r5 M2 g1 i; M' `
: a# v3 s+ i4 c" Z8 ~: B: q【课程简介】
* b8 K/ v B6 U% C" r' K本课程带领大家一步步开发及结合Hybrid将美团外卖实战项目打造成完整的移动Web APP，理解并掌握移动Web开发的基本技能，开发过程中也会讲解到移动web的技巧和遇到问题时解决方法和针对不同场景技术的选型。从而提升对移动端适配以及React 全家桶和组件化开发实战技能，本课程还覆盖了工作中常见移动Web开发问题，并且可以通过课程学习找到对应的技术解决方案。5 q" x3 j# I9 n0 w8 s; w" A
0 d0 t1 |3 b2 w/ k$ r1 F/ V
【课程目录】3 H, Z, W; A6 m$ S# h( a2 U; i; I
第1章 课程介绍6 L; P" h" M3 L! w) W
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。
a/ @0 v8 g1 | N; v1-1 课程导学 试看
/ q6 R' ]0 Q5 K) ~/ e8 m3 k
2 a/ P% ~6 C3 D9 l第2章 移动web硬知识点
" g! \" n, K! L+ M. K! @& d( p本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。 b/ c( `0 N$ m/ t, y/ F
2-1 移动web开发概述# g4 Z8 N, D: t8 k% r$ o4 T
2-2 移动web开发调试
% I2 J7 G# y. V. l2-3 移动web适配概述
4 D& o* e: u/ j7 i2-4 viewport视窗概念
& L# E9 @' S/ C! \ {6 t2-5 css3之flex布局+ H6 |0 c# h/ M) D2 `' X
2-6 响应式布局和MediaQuery
: \4 N1 O6 f+ R2 }* G. y2-7 rem,vw布局与适配+ j: N+ _1 [2 i4 p
2-8 移动端touch事件详解! G) f2 d! d$ Z$ g- K4 ]- f5 m
0 x! G6 F$ ]+ |2 n) Z) U( g& `
第3章 移动web软技能' N2 G; t0 |9 t3 c# z; y5 s. P6 n
本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。... P7 c8 q+ h- r( b6 T
3-1 代码管理工具&项目构建工具简介& z' D0 r V8 O" C4 A
3-2 webpack工具使用介绍
( v9 e" {8 u0 `3-3 Sass预处理工具使用介绍
2 ~5 o: C& _, q/ _ q3-4 React组件化思想 试看
4 l6 r) s8 Z! z6 S/ d( [' T7 b2 ~
第4章 项目开发构建环境搭建6 h9 W, e1 w& P; }, Q/ g F
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。
, X- H) h3 l& U; ?5 y5 @# M4-1 项目和技术栈介绍5 i/ u2 p9 P: W( K1 _+ e
4-2 项目演示
& @; a3 E# z; I. {3 E& m$ ?4-3 构建环境搭建（1）
n% D$ V# _" o# G/ p( k0 B4-4 构建环境搭建（2）) h- D: D0 T ^& q6 u
4-5 构建环境搭建（3）
# Y0 k; m4 I: ~! V w# F* k7 H4-6 构建环境搭建（4）# w5 S" t( h2 C* n b7 p- }
4-7 redux-react使用介绍（1）% T3 U* N: E1 Q: I5 z
4-8 redux-react使用介绍（2）
# |7 {: n; s% b5 Y/ |$ z9 l
6 c9 p" c( a% Q9 z第5章 美团APP—首页开发/ r! n/ X" Y1 c# L7 f' a1 c: J9 I
开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。6 W7 B/ Y4 W2 I, D& o0 f9 C
5-1 底部tab按钮开发(webpack-dev-server配置)
2 @9 Z& c2 ^- O/ U2 y7 u5-2 底部tab按钮开发-UI逻辑编写（1）
% E7 v9 L# U* ]9 O1 T: q. V; s5-3 底部tab按钮开发-UI逻辑编写（2）& t/ l/ y0 i" Z7 n# j0 E' |
5-4 底部tab按钮开发(rem配置)
v6 _7 T5 i& m2 A T& I5-5 底部tab按钮开发(集成ESlint)- ^+ t k$ K' x: l( t& s! r" R
5-6 底部tab按钮开发(集成HMR)9 n+ [" b6 z, o8 F7 R& r3 m: ?
5-7 首页页面开发Header模块开发: ?4 }3 ~: R$ @5 _- H
5-8 首页页面开发SearchBar模块开发
( Q! k4 I7 H; k$ s/ T0 L" X, N9 k5-9 首页页面开发-Category模块开发（1）
4 o+ N" x8 L! U5-10 首页页面开发-Category模块开发（2）
1 y$ T7 w" N3 N8 r5-11 首页页面开发(ContentList模块开发)
3 O6 p" V3 M8 E" d- z. Y5-12 首页页面开发-ListItem模块UI开发' p, y6 `2 }' w0 d7 _
5-13 首页页面开发-ListItem模块样式开发
9 ]5 R. w! W, P, W5-14 首页页面开发-ListItem模块数据渲染开发（1）
# O7 `% k! h6 Y0 R1 q8 `' T9 n- q; q" |- J5-15 首页页面开发-ListItem模块数据渲染开发( 2 )
' D3 c: E! n0 ]5-16 首页页面开发(滚动加载逻辑实现)6 K7 U* G4 m9 ?8 a1 {
5-17 订单页面开发(List模块开发)( O* L' Z7 [; F5 Z
5-18 订单页面开发(OrderItem模块开发)（1）
6 N, t/ m5 Z2 A. U5-19 订单页面开发(OrderItem模块开发)（2）
) c7 ^: S3 z. N1 o8 H! r: o6 G5-20 订单页面开发(公共ScrollView模块开发)
, T- P! |% k6 @5 R% H5-21 我的页面UI开发
' i( w2 z2 @# X' ^7 ] C5 M# c5-22 我的页面样式开发
/ x) E2 _- `8 n b% l; O5-23 集成react-router) i `( T& I) d* Q/ K% W9 _
% n% w! v k$ t9 q; N
第6章 美团APP—评价和分类页开发* e2 U+ E7 }+ l: h5 Z1 a
开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。2 A; w& o* H6 }
6-1 分类页面开发(顶部NavHeader模块开发)) B6 O5 S$ w4 n% g' d" I
6-2 分类页面开发(顶部Header tab 模块UI开发)
; I+ Z+ {# m. V" m6 z6-3 分类页面开发(顶部Header模块样式和逻辑开发)6 q) [+ Q2 ^2 t" |! B% g- U8 D1 J, U
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)( }' O# N/ z6 }! M; h, E+ c5 p
6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现$ B5 j5 q, T' i" }" p5 F
6-6 分类页面开发(Filter面板模块样式开发)3 \. U4 O, u1 ?) G- K# g
6-7 分类页面开发(Filter面板模块item逻辑实现)0 K% }0 W& }% h& n2 r
6-8 分类页面开发(列表List模块开发)0 {: L: W. ?2 `2 y
6-9 评价页面开发(UI开发) K0 n( z& r) m& ^( w) G
6-10 评价页面开发(样式开发). _1 ~ q" I4 r3 s* W& A4 v" J, m
6-11 评价页面开发(交互逻辑开发) l5 i ^8 n* o- N) }+ S1 Y# v1 X
/ D' L$ ^; h% `! L; }6 n第7章 美团APP—详情页开发
& ?* {+ V$ `( q* w+ h% Y开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。
. ~# T+ j: C* e5 k5 O7-1 详情页顶部tab开发(UI开发)2 ^5 z3 D3 |! H8 |# V1 l# K6 o6 a- B7 B) X7 b
7-2 详情页顶部tab开发(样式交互逻辑开发)1 ]0 F0 f! r( |
7-3 详情页点菜页面开发(LeftBarUI开发)" `" N$ E% Y7 V/ N/ z
7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)6 A: i7 @/ k8 M. E. p/ ^
7-5 详情页点菜页面开发(RightContent UI和样式开发)2 s6 K/ j5 L" z
7-6 详情页点菜页面开发(RightContent逻辑开发)& ~; A; C) t: g- b0 D
7-7 详情页点菜页面开发(ShopBar UI和样式开发)' H" q# X. z) w
7-8 详情页点菜页面开发(ShopBar 逻辑开发)& P$ q* F3 i" K, k+ p! h7 j+ t
7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）
" U) S- Z2 }4 ?) u( G- U7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）& t; U2 u3 W& u; t- J" {
7-11 详情页评论页面开发(顶部Header开发)
5 ]8 V; @0 c- Z, b7-12 详情页评论页面开发(列表List 数据绑定)% @$ z J ~$ k# a/ U1 _5 c
7-13 详情页评论页面开发(列表List UI开发)
, U! E3 Q* Q9 u/ [% ^1 i1 S7-14 详情页评论页面开发(列表List样式逻辑开发)! a) |- @+ @7 ]- F" a/ K
7-15 详情页商家页面开发(UI开发)
- N9 g* p2 \: ^8 N5 {7-16 详情页商家页面开发(样式开发). n' ^; k) _. t0 [8 s- o" O7 N
. _" d, v. k* U/ P! N! K x第8章 美团APP—回顾与性能优化/ [$ Z$ L( L. U/ U& R& y3 h
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...0 m4 L. R! B% r! w# L! l Q$ l
8-1 懒加载性能优化
) {7 h) P9 I! F+ Q8-2 JS和CSS公共文件抽离优化
7 J1 F( V4 Z( ?% H* x8-3 编写后台server读取真实数据
5 X8 {# a% @+ g8-4 多Tab 页切换与滚动数据加载优化
& `. N% N$ H' q2 A- i% e. n$ t6 u3 b4 _8-5 项目打包
+ G9 i; _5 e) e5 E& m, z# M, D8-6 项目发布% l& @0 p0 B* w! [/ \
2 y2 ^4 y0 b) \- c; V9 I
第9章 美团APP与hybrid深度结合
$ ^" K W' ?& r/ ]% H' k6 Z; E本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。9 x9 L) g# r F' C" k" _7 x7 ^1 C; Z
9-1 JS bridge 原理 试看9 F, ?6 b3 t, X. N' I: y1 I8 x
9-2 iOS webview + JS API接口+iOS APP集成( y4 C( v9 {% N2 W3 z
0 @; |* [) _7 t# t) C6 n6 J% l5 A
第10章 课程总结
) K+ H9 u0 Y$ t8 h$ |回顾和总结课程讲解内容，能更好的回归和归纳。
: K6 e! q) C8 f- r4 \10-1 课程总结
8 ^' a: Y }8 R. p3 T+ b
# J* j1 I- K. }% @9 Q# f7 ]3 S【下载地址】. x6 |6 H, q1 N3 n N, A; \' l% S. ?
- N" N( U/ a) @# N% y, V% H- z! L
" r1 _( g$ l1 a6 A |
[复制链接]
