|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。. `$ ^. @3 Y/ d8 f- K4 n
课程目录：; c) A, K ~3 ^/ S7 P
01导学1 u" v5 p; e0 Z# f
导学(12分钟) " i7 e7 K+ r& U& p/ |* r& R
学前必看！补充课：接口调用参数补充(6分钟)
6 ^" [$ N6 a+ o 基础框架NextHelloWorld(rar，513.7KB)
$ U' v t# _( i: o 超英预告最新源码(rar，8.7MB): X- w; I) q9 n# y3 }
linux工具与ngxin安装(rar，37.3MB)2 Q) k, M4 @- ~1 B/ W8 a& R
logo素材制作(rar，730.3KB) m6 O5 i6 v! b
02课程介绍" M: b) e/ _# Y, x2 d
什么是 uni-app(4分钟)' c# T! E/ N6 {7 w' N }3 y
为什么要使用 uni-app(8分钟)
) O4 O' x7 o! X7 f8 o app多端发布效果展示(7分钟)
" S2 y; P$ u: [$ A F0 Q! Y1 e 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
9 |- y$ e7 D6 u3 P& d$ h# ~ 微信、支付宝小程序开发工具调试(7分钟)
9 L! \/ Y$ P8 z. u 在Mac上使用Simulator进行调试(5分钟)1 N7 E: t D: r( v' d# v- k) { z* i
03框架基础-上
. ^ ~" _9 U3 [4 \ z* _$ H 简述MVC模式(9分钟)
" o6 x) V- ]5 o+ a7 X 图说MVVM模式(5分钟)
7 A2 _" r X- V* i7 G$ S 通过代码阐述MVVM与双向绑定(12分钟)
! e) W$ h+ H5 C JSON对象和数组的渲染(4分钟)
3 R ^9 O# A- ?- G" |' f 页面路由以及标题配置(11分钟)
/ y4 |! B& G$ y& X( w- T9 V+ J 宏观讲解项目配置文件(16分钟)* \! b P0 p: X5 V4 Z" c, Q# m
应用的生命周期(11分钟)
( s. p! Z1 ]. s) D: D7 J p 页面的生命周期(14分钟)
) R$ l9 _4 s5 ]! J7 U! h 固定像素px与响应式像素upx(12分钟) ?2 e7 w) N" ^- }/ C
在页面里使用{{}}表达式(7分钟)
" K5 L" i( {) a5 I7 M" _04框架基础-下; h: C$ j2 ^5 N5 T/ u2 g9 x9 U
v-bind指令对属性的数据绑定(7分钟)& Y, I/ o0 D, ^4 `! `
事件基础(22分钟)
) w0 M. _/ w! X) l. w6 h 条件渲染 v-if与v-show(7分钟)9 O8 ^' ~( O% E
条件渲染 三元运算(4分钟)
* J8 N) }3 v8 R0 B# c 列表渲染v-for的使用(13分钟)
9 ^- t9 ]9 V! ?' B U 指令key实现for循环的组件唯一性(12分钟) k$ i$ k# y5 `1 l
嵌套循环的下标定义(4分钟): ^5 a& _1 B/ q. p7 A' o
条件编译 - 上(10分钟)1 W. T- n. Q) ]2 e9 [9 S
条件编译 - 下(7分钟)% A, [1 E$ U& H9 @# b
05样式与flex布局-上
- O6 p3 r- x7 b6 m1 H Z9 ]7 R- T8 P flex布局介绍与模型(8分钟)
4 S: M7 @7 A: l5 W$ Q+ z flex-direction 元素的排列4种方向(10分钟)
" I& ^' c* g$ Z B2 @7 w 导入外部css样式(4分钟)
# L* p1 U/ d0 v flex-wrap 元素的换行(12分钟)
$ q" {! H2 f; p+ r# t9 ` justify-content 元素在主轴的对齐方式(14分钟)% i: X* Q/ t* K1 e. A2 x1 v2 f: p( ]
align-items 元素在交叉轴的对齐方式(12分钟)7 O/ l+ O4 g7 x( g0 v7 s# B4 y! K
06样式与flex布局-下+ ~ T' r. e) x% o) [% H1 {
align-content 多轴线的对齐方式(13分钟)3 r& U; U# O, x+ t$ _
flex成员项的属性 - order(4分钟)% F3 D4 R' o! k* {
flex成员项的属性 - flex-grow(4分钟)/ ?3 W+ g1 O& ?' X4 `; v: \0 V6 F
flex成员项的属性 - flex-shrink(6分钟). E, G5 n1 c( S2 e* c! x* [- X4 L
flex成员项的属性 - flex-basis(4分钟)
8 M% O0 W: u8 _# K& `3 K' Q flex成员项的属性 - align-self(6分钟)# L; e. K5 o( |! S$ E
07开发首页-上
" O2 p6 k, g* g i3 n1 ~ 创建项目，构建基础页面(8分钟) 免费试学3 a* w" Q2 T9 S' D }
构建tabbar(13分钟) 免费试学7 E5 G6 f# Y! e+ c6 P1 G$ Q" p. [! a
设置全局page，简述view组件(6分钟) 免费试学3 o- H+ l) z/ e3 o8 m! W$ ]
使用轮播图组件(11分钟) 免费试学4 i0 \7 `5 w- ^! C! P' q
禁用原生导航栏达到页面全屏化(6分钟) 免费试学# N; b- |( ]9 r1 l; d
在线文档的使用(8分钟) 免费试学
. m1 W2 B" l9 w7 R request网络请求api讲解(5分钟)9 j. H1 A5 a3 Q% ^! b$ w
uni.request动态获得轮播图数据(9分钟)+ {( A$ o) {: O2 B# t0 }
箭头函数 this 作用域(4分钟)5 w6 Y' E0 Y" _* o
渲染并且展示轮播图(5分钟)
2 _/ b7 f3 Y% o/ ]08开发首页-中
! ]6 s6 C- L5 }$ {% R- B 引入组件实现全局变量(7分钟)+ N" z5 @$ d+ l
使用挂载实现全局变量(4分钟)
1 t" t- }2 Q- A 在手机端进行微信小程序真机预览(6分钟)2 d; n! b& r# _; Y+ P' H
微信小程序https使用事项(7分钟)
# R2 i/ r+ s" X/ ?, {& A% q 开发热门超英 - 标题(9分钟)9 G: f+ e: i$ G
开发热门超英 - 简述scroll-view(4分钟)
$ Z: x( n- }0 V2 y2 c 开发热门超英-使用scroll-view实现横向滚动(3分钟)) @) \$ m, {* G) R! s' S1 \
开发热门超英 - 海报与标题(8分钟)4 s' R$ \6 g& Y: h$ p6 p- L
开发热门超英 - 评分(6分钟)* z5 M3 V7 U, y3 V0 Z6 R4 v& I9 o
开发热门超英 - 动态渲染数据(8分钟)
! S* e. \+ R9 c+ z! ^) C09开发首页-下! R" Z" U/ b; U' S" P; I: X) a
开发自定义组件(7分钟)7 z( X9 [9 N( b+ d: |3 A/ T$ z
父组件向自定义组件传入值(6分钟)
' ]$ B9 `3 \" ]* X 完成评分自定义组件(22分钟)2 |, Y3 `& V* v1 n! P
视频组件video讲解(9分钟)
- Q, V0 E2 W1 j [5 J 获取预告片数据(3分钟)
% c0 j6 c0 T7 c2 O 动态渲染预告片(10分钟); F2 ~5 b6 j0 r! ~/ t, }
猜你喜欢 - flex布局嵌套编写(18分钟)
# Z& J7 l6 t3 g3 ~2 A 猜你喜欢 - 编写点赞css(7分钟)8 ~% }. R$ l" b' z, f
猜你喜欢 - 实现点赞动画效果(14分钟)/ v+ i4 G* `+ n. C# Z& _; O. b
猜你喜欢 - 还原动画(5分钟)
9 t; R" \. Q! V$ r6 z; a10开发首页-终
6 ^+ V! I1 c- H: S 猜你喜欢 - 动态渲染列表(6分钟)
4 d. J0 z; E! W 猜你喜欢 - 实现动画数组(7分钟)4 F) P$ ^8 [. ~: M9 m4 A
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)* X' J+ y1 ^$ J) T8 j( ]
猜你喜欢 - 开启下拉刷新(5分钟)$ a) ~/ n, _5 ?7 U4 f5 g
猜你喜欢 - loading交互api(8分钟)
, A* q+ Z/ S. I; z, k* r+ i11构建搜索页-上" C/ v2 Z) g( s8 x
搜索页面 - 编写搜索栏(19分钟)
% H$ I6 ?9 N/ J" i6 l- X. A/ B 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
1 B) ?5 r# y% B 搜索页面 - 动态获取最新预告并且渲染(9分钟)
d8 c& t9 R7 A 搜索页面 - 分页接口api讲解(4分钟)
9 i4 [5 @; M" Q' M. d3 C 搜索页面 - 搜索前置准备(6分钟)
! m) m. R- ^) y+ x9 ? 搜索页面 - 执行搜索动态渲染(8分钟)
- }5 b: w% \5 ] 搜索页面 - 监听下拉实现分页功能(8分钟)9 E# K5 p$ V# z8 ?, \; K
页面路由api与传参(13分钟)6 L% |5 ?$ @( |& o
页面跳转组件的使用(7分钟)
! |+ ~* H3 k7 V; }; m, e 详情页 - 查询详情与视频渲染(8分钟)
3 D$ Z$ t% Q) a$ E" Q12构建搜索页-下
5 }3 g# @- j5 B% X% U 构建预告片基本信息(16分钟)
5 t7 G4 t9 X3 R7 T1 Z) x1 \ 构建评分快与阴影效果(15分钟)/ x0 q( ~' D- [; e
解决错误数据绑定undefined(5分钟)& ^% @3 q5 I6 X
编写分割线以及剧情介绍(8分钟)/ r& m& [7 d; Y% J( U4 M
构建剧照与演职人员数据列表(10分钟)4 n. V( O, ^5 p- W
渲染剧照列表(8分钟)+ g- i; s' o5 M; L6 n5 ^
双拼数组构建演职人员列表(12分钟)' T! ^. f& D/ D
渐进式导航栏设置(6分钟). N# P( [# O' g( P; ]. u( \* p
通过预览api实现剧照预览(7分钟)
/ R; J% \# i- V i" S1 B, C C 演职人员数组拼接预览(8分钟)
5 [- i& ^5 v3 C! \7 }' Z' e, y$ v13电影详情页构建9 l8 w' {0 N" O) P
自定义预览封面图(13分钟)
2 ~' t# R( ]4 c1 S* s, j actionSheet接口api使用(6分钟)
( g; n2 x3 M& @2 U; M! a* A$ o 下载以及保存图片(15分钟)
4 [; t. m2 i9 U6 Q4 A 配置https下载合法域名(5分钟)4 V: m5 D& u/ [0 r: C, D
实现小程序中的分享转发功能(9分钟)3 s7 V, _4 P1 z N2 F
自定义导航栏按钮(11分钟)
2 v. l5 c+ z7 j 分享到朋友圈(9分钟)
/ ^' w) c& W/ ~$ _3 ^" S B 微信开放平台简单介绍(6分钟)$ ]- b- m" S; I0 j& }
操作视频对象，提高用户体验(8分钟)
7 s8 D( k9 i& g5 @: i- B 优化首页视频体验(13分钟)
* p. a3 S3 `- B7 ~5 w; M- k14我的页面（上）, i( c- u# Y- c: a9 ~* B6 Z
开发个人页面-header与导航栏设置(9分钟)
4 ^& ?! N7 q m% z" j# X; ^/ |- B 发个人页面-用户未登录和已登录的页面展示(9分钟)" H; f) O$ J9 ^& n9 W: r$ Y7 G
构建注册登录页面(8分钟)2 s% g, D8 v' S6 N' l
button与form组件讲解(6分钟)
+ x2 p+ o1 {9 L- s( U# j 实现一键注册登录(12分钟)
2 t% d; @9 Y/ f" [/ T! e/ {( ]5 W: S! u 通过缓存切换是否登录状态(9分钟)
: Y1 k& g. z9 ^7 u* |7 v! h 构建用户账号页面(9分钟)
! }5 |# D& J( `2 ^! J/ R6 R" } 清理所有缓存api(4分钟)+ g8 r2 E9 {0 v6 d7 b
用户登录错误提示与方法挂载(7分钟)( |' E1 E4 p! O6 y
渲染用户信息数据(6分钟)
/ a ~! ^( K5 k4 l15我的页面（中）+ h# h9 g/ w) ?
用户退出登录(6分钟)
( Q7 G# Q) y3 `3 _! V 第三方登录讲解与页面构建(16分钟)
9 ?& c, n$ m' H% j 第三方登录-小程序端实现微信登录(15分钟)1 k! g3 K7 j0 q; y: ~+ ?
第三方登录-后端登录业务梳理（辅助理解）(10分钟)8 s! T) O( X$ x4 b2 {
第三方登录-app端授权登录(8分钟)
+ J2 @% i& O& X, F9 |. E# |! N 第三方登录-app端获取用户唯一id及信息(12分钟)
# m& \4 a, j0 d O1 f 第三方登录-app端执行一键注册登录(7分钟)9 z" S3 v# ~0 q) w2 U* ~; m
查看预览用户头像(7分钟)+ [; J0 N) P7 | V! Z7 M. ^' ^
选择用户头像(11分钟)7 a8 U0 I0 S6 W5 c
重新选择头像(3分钟)7 ^$ V6 d1 p1 w2 g, D
16我的页面（下）5 |& B7 x$ V$ G) `# C; T( f+ J6 ^
文件上传api与后端接口讲解(5分钟)! q2 t! r2 |* C! u; z0 \
token令牌讲解、实现头像上传(23分钟)# j5 a- Y0 x2 w6 c7 B) b$ c
引入图片剪裁实现头像上传(7分钟)
: F! B- ], o0 P \ 用户修改昵称(18分钟)9 V: @- G& \' d
用户修改生日(17分钟)
% ^ @% b' p/ h6 T5 r4 q6 t; \+ X6 w 用户修改性别(15分钟) d6 J1 m, C' T5 W% u" l, l
17项目发布与上线/ a8 g2 T0 v) [9 o7 I+ x
打包H5 web应用(5分钟)
- ~1 r( u& ~# Q 购买云服务与简介(6分钟)
# b0 V% ~) D" L 配置安全组，重置密码，上传nginx，配置ssh(14分钟)
5 F! D' D' f w: E- b9 R( w 安装nginx(9分钟)
8 e5 a8 m' U0 n 成功发布H5端web应用(14分钟)% x$ K3 T$ e. l! Z5 k* O
微信小程序上传审核流程讲解(8分钟)
9 v, C3 |+ b( X5 a3 _ k0 g) z 打包安卓apk(8分钟)
8 z, n2 z' {+ ~7 N 简述ios打包(8分钟)
% p. z% x" ?# @18课程总结5 K: E3 @" N" ?% l9 m% Z4 w* w
课程总结与展望(9分钟)
O, ]5 ^) x) i6 Y
) ~& W6 A8 ~4 n/ q! y# o/ C8 \ 4 a( U' \' ^$ m& ]0 q/ x. o
: o6 C. A6 z2 d) ^6 n |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
