|
|
$ ^, y1 E R: N
第1章 课程介绍- J) r- X' r7 n9 m' N
通过课程介绍，了解学习课程的必要性，所包含的知识点，课程安排，学习前提，课程收获，快速全面了解课程。0 p6 E" O8 \, M9 ^( c
Z1 f' ?' p& {8 V M3 `3 V1-1 课程导学
* e S) _+ r% r! I r3 y+ Y9 `第2章 移动web硬知识点
! i% Z! h5 P5 f! X T本章主要讲解移动web开发中必要掌握的基本知识，是进行后续学习的前提。从概述到开发调试方法，以及viewport视窗概念和原理的讲解，在到移动web开发关键布局技能和适配方案，最后讲解移动web中常用的touch事件。! i' B/ ~% }* }7 H2 k* m- Q; e
' k! F+ Y9 q. M6 H0 C) K
2-1 移动web开发概述, J# ?* B4 E. i
2-2 移动web开发调试
* E, t% {2 R% \9 D! e5 I2-3 移动web适配概述( r8 o) L; g9 Z7 E3 U) m( F. H' _$ l
2-4 viewport视窗概念
7 v% p6 y) Z% w$ L; u2-5 css3之flex布局( R* ]. Q9 n6 @- c4 K
2-6 响应式布局和MediaQuery
. Z! U# h) j4 J0 A) D. H% C/ H2-7 rem,vw布局与适配+ K+ k( }1 z0 w9 a
2-8 移动端touch事件详解
: @, V9 X4 x& m; G; o, E" F第3章 移动web软技能
* J6 b* P* ~0 J( y本章主要讲解移动web开发实战中用到的相关知识点。从基本代码工具的介绍到项目构建的基本概念，同时预先给大家介绍webpack和Sass的基本使用方法，帮助基础弱的同学以便于进行后续的学习，最后教大家如何使用React组件化思想开发页面。..., V C4 p% r a1 i7 D( I0 R- E+ x
: {9 Z, [1 l1 Y0 I3-1 代码管理工具&项目构建工具简介
; S" a+ H% J6 h" \5 e8 _! { u3-2 webpack工具使用介绍" b1 Q# p" Q* P$ S3 K7 J2 {
3-3 Sass预处理工具使用介绍
+ s9 x8 X6 B6 _, K3-4 React组件化思想8 {; H7 W, x' ?$ x- O/ k
第4章 项目开发构建环境搭建* f p, }5 N7 F b& [
本章主要讲解的内容都是为下章实战项目做准备工作的开发，包括项目的最终结果演示，同时会讲解如何使用webpack来从0搭建配置一个项目的构建环境和基本的Redux使用方法，以便于对Redux不熟悉的同学巩固一下相关知识。8 h# @) |+ `% ?
+ M; _- V- O6 _3 r- S' G
4-1 项目和技术栈介绍. Y- ]% ^. x/ O9 s4 x$ K, U/ w
4-2 项目演示4 e: e/ q/ x+ P5 n7 {" u
4-3 构建环境搭建（1）. { f9 H. [# x. h% T5 i( |
4-4 构建环境搭建（2）
( j9 d% g2 H/ J4 ~$ {: m4-5 构建环境搭建（3）
6 n: w6 ^' P- u( C2 P* n7 w }' ?4-6 构建环境搭建（4）
' ]6 v8 ^# g, i0 t9 H& r4-7 redux-react使用介绍（1）1 J6 o# l1 d) D, A
4-8 redux-react使用介绍（2）0 |" W- U$ b Q6 Y
第5章 美团APP—首页开发
l/ N) z$ z! J$ c; z开发首页，讲解通过React+Redux实现页面基本逻辑，使用flex进行页面布局，引入rem进行页面适配，实现tab切换，滚动加载逻辑，以及事件绑定逻辑。
- M( b* U7 F: u \7 A, s# M d1 P9 ~7 b5 X+ o7 ^1 O5 E
5-1 底部tab按钮开发(webpack-dev-server配置)7 G, ?' t- C& x5 ~, v
5-2 底部tab按钮开发-UI逻辑编写（1）
; [8 z; |: S" ^; X M5-3 底部tab按钮开发-UI逻辑编写（2）. r9 i) F/ G1 E9 G
5-4 底部tab按钮开发(rem配置)
' ^8 x3 G" C$ P5-5 底部tab按钮开发(集成ESlint)! G4 C, ]2 }! N9 I* H& |
5-6 底部tab按钮开发(集成HMR)
9 x1 `5 ?* ^; ^* F" {5-7 首页页面开发Header模块开发
8 D1 w" ?6 _( X6 k1 j/ P5-8 首页页面开发SearchBar模块开发
7 r/ l- P( x* X6 U1 M P, s5-9 首页页面开发-Category模块开发（1）+ ~% M6 |# S0 F# I
5-10 首页页面开发-Category模块开发（2）
8 j# b+ P7 E4 z3 e# o; a0 R5-11 首页页面开发(ContentList模块开发)
3 z: @$ m5 O) i5-12 首页页面开发-ListItem模块UI开发' A( g! T ?# q8 X
5-13 首页页面开发-ListItem模块样式开发5 q! ?5 T8 r( _& b/ ^
5-14 首页页面开发-ListItem模块数据渲染开发（1）6 K u a' K; G% x. R: C
5-15 首页页面开发-ListItem模块数据渲染开发( 2 )# k& @" i2 Q/ Z; ~
5-16 首页页面开发(滚动加载逻辑实现)
m; p) ~0 z4 O! q h5-17 订单页面开发(List模块开发)
( T" {1 E0 z2 s) ?, V5-18 订单页面开发(OrderItem模块开发)（1）
7 U* v& ]1 R* l. |5-19 订单页面开发(OrderItem模块开发)（2）
. |" i+ z( K* F8 w4 x4 o2 B+ R/ L5-20 订单页面开发(公共ScrollView模块开发)
; ]- \3 X. a# r2 o) a5-21 我的页面UI开发( z2 m$ a2 ]+ Z9 c
5-22 我的页面样式开发
4 E# u2 e0 r5 T+ s5-23 集成react-router0 m: _! n$ [3 L! G# _
第6章 美团APP—评价和分类页开发
0 f+ M4 N# f. Q5 Q! h开发评价页和分类页，讲解使用div+overflow实现局部滚动，移动端输入框相关使用技巧以及css伪类实现星型icon。! [0 Y9 a- F& J3 ~4 }0 m
! Q) @! |( l- F) Q, H
6-1 分类页面开发(顶部NavHeader模块开发)
( F; S. z5 H; {. P: X5 ?0 Y2 v, q3 M6-2 分类页面开发(顶部Header tab 模块UI开发)
( N* p" r8 {# n- E6-3 分类页面开发(顶部Header模块样式和逻辑开发)3 g% S& p& E# F% [2 m2 m* K
6-4 分类页面开发(Filter面板模块“全部分类”数据渲染开发)
$ K& U6 G. r% K7 w6 d- U6-5 分类页面开发(Filter面板模块“排序和筛选”数据渲染实现1 m9 W# {7 Y2 Q0 d( I) G9 T9 [. y
6-6 分类页面开发(Filter面板模块样式开发)& p) |& q9 z" y2 F
6-7 分类页面开发(Filter面板模块item逻辑实现); L' t7 p! N! n4 D6 c7 r: i
6-8 分类页面开发(列表List模块开发)2 {" f$ f: r1 ^ @" G1 B _6 a
6-9 评价页面开发(UI开发)8 s, N1 q$ ~7 I
6-10 评价页面开发(样式开发)0 L& z+ w4 M( p) ~' P* u! x: [
6-11 评价页面开发(交互逻辑开发)
! Y$ f. D2 q2 m) y+ p, ^" n/ H第7章 美团APP—详情页开发
& [! J \" |8 W* L& I开发详情页，讲解点菜选择器相关逻辑，通过React组件化对之前页面的公共组件进行抽离，通过封装scrollview实现评价tab的数据加载，以及使用css伪类实现1px边框。/ m9 D" x( e1 O, B
" @" f% A/ Q4 _ ` Y1 `- S
7-1 详情页顶部tab开发(UI开发): O- o/ a/ p7 Z5 q
7-2 详情页顶部tab开发(样式交互逻辑开发)
3 ^0 ]6 d C7 d$ b: w7-3 详情页点菜页面开发(LeftBarUI开发)
. {7 J9 {* j3 y0 j- I# \/ e2 U7-4 详情页点菜页面开发(LeftBar 样式和逻辑开发)1 z, V) o/ E, n# G! A7 X
7-5 详情页点菜页面开发(RightContent UI和样式开发)
' T' @5 w) g/ y0 O) J7-6 详情页点菜页面开发(RightContent逻辑开发)
7 ~9 r% r8 l! s% y7-7 详情页点菜页面开发(ShopBar UI和样式开发)
5 ~9 H: e' X0 D, W4 }$ @ X. q2 I7-8 详情页点菜页面开发(ShopBar 逻辑开发)
/ Y$ ?9 M' w, p3 l* c% J/ C3 ?% y' N7-9 详情页点菜页面开发(ShopBar-chooseList 交互开发)（1）$ X2 R# S/ m5 L& u. W. z
7-10 详情页点菜页面开发(ShopBar-chooseList 交互开发)（2）
' x* D* w7 C9 Z8 M" Z G7-11 详情页评论页面开发(顶部Header开发) L4 q, {( r3 o
7-12 详情页评论页面开发(列表List 数据绑定)- T! d4 V6 v; s7 \7 F Z
7-13 详情页评论页面开发(列表List UI开发)4 H0 x, ~, q* p( b: m* r0 a
7-14 详情页评论页面开发(列表List样式逻辑开发)
- ?$ T9 Y! n2 R7-15 详情页商家页面开发(UI开发)
, C+ R n- @, T4 w* N0 H7-16 详情页商家页面开发(样式开发): [: ~& E# O/ R/ g
第8章 美团APP—回顾与性能优化' G6 d7 d. Z4 D* h; [$ t" c# ?
通过nodejs和express实现后端数据的代理，通过设置cookie来实现对美团外卖真实数据的请求。对首面和详情页的tab加载逻辑进行懒加载和对之前的滚动加载逻辑优化，同时通过构建来完善页面请求资源的优化。打包并发布到腾讯云。...
+ Z* [7 [8 H2 A7 W( R% j; b1 j! ? F" k; k$ u* \
8-1 懒加载性能优化1 K5 I& u2 K2 r$ J3 m4 y
8-2 JS和CSS公共文件抽离优化) E0 a ]9 K4 R3 t
8-3 编写后台server读取真实数据
m& o/ { n7 b8-4 多Tab 页切换与滚动数据加载优化
$ p B- e) u: s; ?/ I" ]+ O( ~ _9 F8-5 项目打包+ V$ t' k6 `2 \/ x# B- h' O! D* j
8-6 项目发布
; o7 |9 A% _+ w6 ~2 i( W) J第9章 美团APP与hybrid深度结合, q( J( @( I4 f. i, b$ S3 G t$ o
本章主要围绕Hybrid进行讲解，使用OC代码带领大家开发一个简单的webview组件，同时讲解web和native之间的通信机制，并开发jsbridge接口完善美团外卖项目，让项目看起来更像是一个真正的APP。, C1 b/ O/ t1 ?. n2 G& q
* ] C+ g' f; L, \9-1 JS bridge 原理
- t+ w6 U; B6 |9-2 iOS webview + JS API接口+iOS APP集成; e7 B) c0 q% W9 R
第10章 课程总结$ ?$ {6 ] Q* v; n: ?; ]8 k) @
回顾和总结课程讲解内容，能更好的回归和归纳。
- X3 R' C) g2 _. N+ o$ D
+ T9 s, H1 B) e10-1 课程总结
+ Y; d6 Z' H( {# R9 z3 s0 G* j# j6 k v
# i, g8 }- ?' K. m2 M( H( c
. h2 |1 h; J( k i6 ?1 o6 L2 K) @下载地址：0 w" y8 p/ z' A% }3 _+ B3 Q3 y
& }2 f' N4 i$ ~ f( A" I, S
资源下载地址和密码（百度云盘）： [/hide] 百度网盘信息回帖可见
8 `' b% B/ E! N/ ]) q0 B
* G( d; l) |9 E1 ~& \/ O
/ G+ v6 I* E) _0 P" c. G) F
2 M3 z! F6 v5 E& }本资源由Java自学网收集整理【www.javazx.com】 |
|
发表于 2022-6-16 02:09:01
