|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
' x, R' e+ V6 h7 |4 M7 y j课程目录：
0 l0 [) z/ O8 i- X01导学# ^" `: Z1 }4 h# i, T
导学(12分钟) * m; G G% Y# }' V. y* _
学前必看！补充课：接口调用参数补充(6分钟)2 ?" V+ L/ B8 n5 d+ C2 b1 X* F
基础框架NextHelloWorld(rar，513.7KB)8 \# u+ V8 _& y3 ?2 b
超英预告最新源码(rar，8.7MB)
! L% ?+ B/ Z7 y ?. g+ V/ D _6 d linux工具与ngxin安装(rar，37.3MB)
# Y1 ?! J6 `) I1 g9 V' l% Y logo素材制作(rar，730.3KB)
% ?: d B! f3 D w, i+ h02课程介绍
. i# Q* |, \. C# k8 K7 ~1 L" h 什么是 uni-app(4分钟)
: c9 i" _4 t$ P* c8 ` 为什么要使用 uni-app(8分钟)/ R% y5 M6 I3 r+ X' n
app多端发布效果展示(7分钟)
& k9 R h) @9 N S 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)6 g ~( @+ g8 t+ s# k
微信、支付宝小程序开发工具调试(7分钟)0 ^* a0 g" L$ c1 J' J1 I* {
在Mac上使用Simulator进行调试(5分钟)) k5 K2 ^4 X- ~# f& L
03框架基础-上
' @; E6 \. }6 p' F t9 I 简述MVC模式(9分钟)3 Q! Z, e! C4 F$ v6 g
图说MVVM模式(5分钟)" [9 c( R0 h4 o& E; S) P
通过代码阐述MVVM与双向绑定(12分钟). H. h( u: T7 B
JSON对象和数组的渲染(4分钟)
# V" y& D; v2 x1 L& c9 ^ 页面路由以及标题配置(11分钟)6 n" A" x; Q- V* I& g
宏观讲解项目配置文件(16分钟)
2 w# s8 Z& Y/ {/ g6 D+ _5 \7 } 应用的生命周期(11分钟)9 w( D2 q. l/ h* \5 F
页面的生命周期(14分钟)
) C% |2 a$ g1 {2 K; _9 { 固定像素px与响应式像素upx(12分钟)' e" O+ F. x3 W/ s* J) k0 r |& N
在页面里使用{{}}表达式(7分钟)
9 S) s: S# h' w4 ~1 i5 V% D+ H04框架基础-下
+ a' x% b- L' Y5 h/ g% N v-bind指令对属性的数据绑定(7分钟)
7 D2 t/ S2 I6 T, Z6 ? 事件基础(22分钟)
- V- q9 p- r" g: Z- } 条件渲染 v-if与v-show(7分钟)
4 ~- v M$ ?# L- l 条件渲染 三元运算(4分钟)& D1 h8 p( P! W) p3 g) V+ r8 ]
列表渲染v-for的使用(13分钟)
- p H) q, Q* J; x9 J 指令key实现for循环的组件唯一性(12分钟)
' p8 e, a. P2 Z3 G! P8 B 嵌套循环的下标定义(4分钟)
* y1 K, Q5 Q% Z8 N; L 条件编译 - 上(10分钟)" v& O5 O8 x" _1 y( _: X9 J
条件编译 - 下(7分钟)
) r) `2 h# M* v H05样式与flex布局-上# }/ E* I% \0 E m# q" I5 D
flex布局介绍与模型(8分钟)* X3 G# H* C7 v. S
flex-direction 元素的排列4种方向(10分钟)0 ]3 V; R+ ^' D& f4 D ]- ?
导入外部css样式(4分钟)" T7 S- ]4 @" } j3 _0 p* B/ v
flex-wrap 元素的换行(12分钟)3 f/ j& E1 W3 d: H, S3 Z* L- T
justify-content 元素在主轴的对齐方式(14分钟)
, {5 q7 j5 p+ D& ]7 G/ V! s align-items 元素在交叉轴的对齐方式(12分钟)
l4 a; s; f) q. a* b4 }06样式与flex布局-下: C; C' C" ~+ ?6 X' {% r. I' Q3 \
align-content 多轴线的对齐方式(13分钟)( u1 [! A* A2 C( h/ T! f
flex成员项的属性 - order(4分钟)
( j/ S& J& T( a flex成员项的属性 - flex-grow(4分钟)
8 o3 A; `5 e$ `- r" k5 m+ I2 J flex成员项的属性 - flex-shrink(6分钟)' Y' B# f; G# t! s: L, f
flex成员项的属性 - flex-basis(4分钟)
- c/ \1 d' Q+ L: R0 p6 H flex成员项的属性 - align-self(6分钟)) P M8 d: H: s
07开发首页-上
& E- T9 Y7 j9 V+ [% f) l 创建项目，构建基础页面(8分钟) 免费试学0 @- M% d5 ]5 j/ [! j
构建tabbar(13分钟) 免费试学1 w5 |, }0 g) S8 \: T& B$ ]
设置全局page，简述view组件(6分钟) 免费试学) L6 U4 J9 ~' G! [5 _ S
使用轮播图组件(11分钟) 免费试学5 N+ u8 \& I4 R& P) N& ]% e1 X
禁用原生导航栏达到页面全屏化(6分钟) 免费试学2 o, B* f& E% f3 n3 m, G$ o/ I
在线文档的使用(8分钟) 免费试学$ B4 k: i; O* n6 v7 X9 y7 Z: m
request网络请求api讲解(5分钟)
5 p, D" t5 y5 N$ r uni.request动态获得轮播图数据(9分钟)
2 i: v: ~, Z6 f/ m4 h 箭头函数 this 作用域(4分钟)- ?+ J$ B \7 H+ c0 Q. N
渲染并且展示轮播图(5分钟)" S$ N1 a# g* V: N6 Y3 D$ `# d+ u: d
08开发首页-中
6 t$ E# Z9 Z" x& |4 [ 引入组件实现全局变量(7分钟)
! A0 `6 z; l% z. b5 ^4 A 使用挂载实现全局变量(4分钟)4 s4 {5 k% n" d
在手机端进行微信小程序真机预览(6分钟)
/ U, y& S7 a& K" Y3 O. E 微信小程序https使用事项(7分钟)
$ C/ H& X4 W& t; W 开发热门超英 - 标题(9分钟)
+ v( S/ W y' E. i: Q6 Y 开发热门超英 - 简述scroll-view(4分钟). p0 c8 a/ P1 ^9 M4 L& N: E! H
开发热门超英-使用scroll-view实现横向滚动(3分钟)- Y) A8 ?: w7 w$ F1 m
开发热门超英 - 海报与标题(8分钟)9 ]5 i7 v1 I) B6 u
开发热门超英 - 评分(6分钟)
( Z) K4 b- }- }% r w! l, p 开发热门超英 - 动态渲染数据(8分钟)2 ?- s9 P# ?: \. a
09开发首页-下' T6 A- q6 P' G% B5 w) ^, i: j* e: b
开发自定义组件(7分钟)6 Z0 m8 `* v) e5 S* H$ `' [8 b
父组件向自定义组件传入值(6分钟)# {( G8 A: f: X
完成评分自定义组件(22分钟)8 K, B- l5 q+ Y9 O/ D1 o; i
视频组件video讲解(9分钟)3 t% G7 p) I ~' N) J
获取预告片数据(3分钟)
1 F3 I3 V5 t$ [; A/ @) k 动态渲染预告片(10分钟)( J# ?+ L& j- I3 q
猜你喜欢 - flex布局嵌套编写(18分钟)
6 i o! M- D( ~ 猜你喜欢 - 编写点赞css(7分钟)+ H9 y+ ?( Z- o: K( \5 ^
猜你喜欢 - 实现点赞动画效果(14分钟)
$ K& A) v, l( c! A 猜你喜欢 - 还原动画(5分钟)
/ y z9 J9 e% d4 ]0 Q7 D9 @10开发首页-终
7 B! ?5 R4 A& C 猜你喜欢 - 动态渲染列表(6分钟)
' f6 J: c1 l# X% p/ _8 ? 猜你喜欢 - 实现动画数组(7分钟)
3 W/ ^% N% x+ [2 c 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟) Q5 M9 }$ ]4 p* }: h' g/ ~
猜你喜欢 - 开启下拉刷新(5分钟)
2 K6 A& ?' J* y0 q2 D 猜你喜欢 - loading交互api(8分钟)
# v! r5 c# M2 _' d11构建搜索页-上
% @3 f5 X" [' e( m# q8 K4 G 搜索页面 - 编写搜索栏(19分钟)
5 X( V1 f% J+ z5 K5 } 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
& e% ^( S, [! o; X6 p* D 搜索页面 - 动态获取最新预告并且渲染(9分钟)
. {* ~. c. K: x6 r9 M4 h 搜索页面 - 分页接口api讲解(4分钟)' {$ I2 Q0 n, L' l& ~3 q4 N* b
搜索页面 - 搜索前置准备(6分钟)
4 ^0 w' o# [7 T5 \$ P- |: u* _9 [ 搜索页面 - 执行搜索动态渲染(8分钟)' h! R. Z5 L0 g2 m7 D9 N$ C* H
搜索页面 - 监听下拉实现分页功能(8分钟) r, s$ @4 P1 F
页面路由api与传参(13分钟)' u3 X) e8 J* S. Q
页面跳转组件的使用(7分钟)6 u! ]0 E2 z) d& o! y
详情页 - 查询详情与视频渲染(8分钟)2 M- Z! a- n! R* n/ Z
12构建搜索页-下
1 w% ^6 F6 a0 n7 F Q 构建预告片基本信息(16分钟): { _6 s: k6 f, v2 ^
构建评分快与阴影效果(15分钟)8 J, @/ G6 v' y& R' ? s* @
解决错误数据绑定undefined(5分钟)
) m. }( ^6 P4 @; l. {8 E 编写分割线以及剧情介绍(8分钟)
1 r# m7 I- t- R' V 构建剧照与演职人员数据列表(10分钟)
7 l2 P! l4 {! u9 w- j+ a 渲染剧照列表(8分钟)0 f9 m2 X6 O6 D5 o& E" D% D
双拼数组构建演职人员列表(12分钟)
q$ C$ r- r; T+ ~8 \ 渐进式导航栏设置(6分钟)8 c1 p) H% P2 f7 _$ A8 I
通过预览api实现剧照预览(7分钟)
, X8 Z* @5 T* d# o 演职人员数组拼接预览(8分钟)
8 j- n/ r7 Y1 ^$ a13电影详情页构建
, z9 H5 F) A* c5 t 自定义预览封面图(13分钟): c/ s/ q% h+ N. Z z0 y8 v
actionSheet接口api使用(6分钟); d: U* H# L" V" n* {/ Y" k
下载以及保存图片(15分钟)
0 a3 A* `) B. c( C 配置https下载合法域名(5分钟)' }# [! D/ r% N, W
实现小程序中的分享转发功能(9分钟)
% V+ h' L! M" [ e2 A9 s) m 自定义导航栏按钮(11分钟)0 l0 `' [- i( S% g1 }7 `$ @! `
分享到朋友圈(9分钟)
1 @% ]" q* X( t 微信开放平台简单介绍(6分钟) w$ l, C/ f$ a8 ^
操作视频对象，提高用户体验(8分钟). c0 q# S- B, T
优化首页视频体验(13分钟)
l8 S1 l5 T9 P14我的页面（上）
! F) @% G( L6 o2 d" t% j0 \ 开发个人页面-header与导航栏设置(9分钟)4 t8 a. M, N# v& v+ Z% W' j+ P
发个人页面-用户未登录和已登录的页面展示(9分钟)' E) C% n F. B! f2 k( N
构建注册登录页面(8分钟)/ {. {+ Y3 p: J, Z' r
button与form组件讲解(6分钟)) b f$ ?" G* e# b; Z2 V% ~; j I
实现一键注册登录(12分钟)
d, s. B# w# i" |- m 通过缓存切换是否登录状态(9分钟)
/ F5 W# O/ A0 ^. a 构建用户账号页面(9分钟)
$ O4 L2 O6 r) u0 F4 } 清理所有缓存api(4分钟)
2 k' Z. K+ o F' U4 _: f 用户登录错误提示与方法挂载(7分钟)5 V2 E( l; m. B( q1 g8 R
渲染用户信息数据(6分钟): K4 q* \; K) ~
15我的页面（中）& W a5 q( `7 ]
用户退出登录(6分钟)
0 |) m6 U) X }# q4 h5 V0 ^ 第三方登录讲解与页面构建(16分钟)7 F4 c8 e! [# E4 h, i& C- k, v
第三方登录-小程序端实现微信登录(15分钟)' L4 j! S9 L' k3 R( h; e V
第三方登录-后端登录业务梳理（辅助理解）(10分钟)) A9 s/ a2 T' s1 a/ Y; H
第三方登录-app端授权登录(8分钟)
2 n. r2 E( j/ U' J! T& I 第三方登录-app端获取用户唯一id及信息(12分钟)7 q: P$ J$ Q* q" ~- u( i! }
第三方登录-app端执行一键注册登录(7分钟)5 T9 k x) l+ e
查看预览用户头像(7分钟)
) V5 H8 e* P& E 选择用户头像(11分钟)# N8 o5 T' a( ?& ]0 \
重新选择头像(3分钟)
$ N/ F7 b7 \. h& t, X D( x( f16我的页面（下）
- |2 p# ~+ @! i 文件上传api与后端接口讲解(5分钟)' c& a2 u y4 [) I
token令牌讲解、实现头像上传(23分钟)$ o' J" k: v+ b6 f# C d n; Y/ N/ `
引入图片剪裁实现头像上传(7分钟)
& S5 K) o" |- l0 N. E6 O) V 用户修改昵称(18分钟), M% j; }! L) `( X; [
用户修改生日(17分钟)% T0 e1 l1 e& ~! [- q x1 t- s
用户修改性别(15分钟)
) _- f& d8 N. z+ x2 y: K3 s17项目发布与上线
* w9 A; s7 V) d; {0 |3 O; v 打包H5 web应用(5分钟)
; s/ j% D$ G# A& ?" P 购买云服务与简介(6分钟)( D2 p' W+ w* ]; H( G
配置安全组，重置密码，上传nginx，配置ssh(14分钟)
; e8 v0 h E, z+ a! t; [2 C 安装nginx(9分钟)! W) Q$ Y. a8 o7 V T: j
成功发布H5端web应用(14分钟)7 e9 | P* `$ `4 r B, P
微信小程序上传审核流程讲解(8分钟)0 z$ ~) a6 Y" o8 x+ k
打包安卓apk(8分钟)
3 R- {5 B$ ~. G) o 简述ios打包(8分钟)( G% q/ P) w1 P0 V0 c/ ~2 q$ w$ t8 q( X$ n
18课程总结
8 e z2 h0 }: \$ c8 L( q$ J 课程总结与展望(9分钟)
! y- h4 R3 w! m4 y8 z$ K: U: m5 u6 g
% {2 j6 V6 P6 n. I W
5 N: l1 G& d( X1 h6 _4 s1 X; Q# j |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
