|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
" A2 ~: a" v4 X1 q课程目录：# x" r% W! b$ C0 |6 i
01导学
( \ }! n* {0 N5 Z- F! s" ~. ]: C 导学(12分钟)
" S3 L1 t" K9 K8 w& T 学前必看！补充课：接口调用参数补充(6分钟)
' Q- U. d* n, x/ y4 ?- a 基础框架NextHelloWorld(rar，513.7KB)
5 N. F. F2 d, a" F6 V( j 超英预告最新源码(rar，8.7MB)1 s, G4 y& K2 O9 ]) G) \6 H
linux工具与ngxin安装(rar，37.3MB)
) @3 W4 x5 X/ }- r n: }4 E) x logo素材制作(rar，730.3KB)
T+ O, }$ S- {* v02课程介绍, Z. q% K- P, P) y( }
什么是 uni-app(4分钟)
; ~6 M. X3 |2 S2 Q 为什么要使用 uni-app(8分钟)
; x5 {" _" A; M: A* S" l; k app多端发布效果展示(7分钟)* q) k3 T2 e% G" D/ ^& P( C
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
' x; Y& U" e6 P* G' y3 W, E 微信、支付宝小程序开发工具调试(7分钟)2 T [2 W& i7 n
在Mac上使用Simulator进行调试(5分钟)! U1 t1 ~% H" I* m0 x, s
03框架基础-上
/ w$ h8 W6 u/ ~; ? \" w2 ] 简述MVC模式(9分钟)
R5 g8 a' b; R) W* p( j( F 图说MVVM模式(5分钟)' R$ d# o! i+ x
通过代码阐述MVVM与双向绑定(12分钟)
% a5 y: N3 \; {% \; t3 G9 @ JSON对象和数组的渲染(4分钟)1 }: y$ c+ c6 \' r, z) S( w
页面路由以及标题配置(11分钟)0 h d8 B; I0 w: A' ^7 W7 m: Z
宏观讲解项目配置文件(16分钟)% d' r$ R8 H, y/ Q, ~1 _
应用的生命周期(11分钟)4 e1 n0 Y9 _9 J! b+ a4 Q
页面的生命周期(14分钟)
. v' t+ M+ ~; O 固定像素px与响应式像素upx(12分钟)
3 B- J! J, W/ o% b) u; f z8 M 在页面里使用{{}}表达式(7分钟)
( c1 L+ y: {8 Q( [0 W04框架基础-下* B/ p" r- D8 H& h9 x* e+ M
v-bind指令对属性的数据绑定(7分钟)
9 a$ m5 p- b& N5 [0 w7 x }5 I 事件基础(22分钟)
. ^& L! C8 f* X( k" O 条件渲染 v-if与v-show(7分钟)
8 b) A5 E) v! G, Q, | T! ? 条件渲染 三元运算(4分钟)( V- N L7 ` [4 `4 Q2 y8 p B+ f
列表渲染v-for的使用(13分钟)
8 w% n9 W+ B/ J- q 指令key实现for循环的组件唯一性(12分钟)( g6 [, Y! C4 x- L) q4 u
嵌套循环的下标定义(4分钟)
3 {( f' v) [- M, k, \+ o; Q 条件编译 - 上(10分钟)3 q! `# u( s" D1 c
条件编译 - 下(7分钟)* R2 c+ T, L, n9 P$ b- a+ l
05样式与flex布局-上
8 E8 {0 _' e: R& u% b flex布局介绍与模型(8分钟)
9 |# U3 U* z* t0 v flex-direction 元素的排列4种方向(10分钟)4 ?+ M7 u' A' x
导入外部css样式(4分钟)( z$ c* _ d# ]) E
flex-wrap 元素的换行(12分钟)$ D. o- z" ^4 J( o7 u, P* _5 B, ~
justify-content 元素在主轴的对齐方式(14分钟)- y; Q5 Y% L$ Z$ a; E) b& F
align-items 元素在交叉轴的对齐方式(12分钟)
& u+ x' F+ S# Z7 F06样式与flex布局-下
* V; f3 ?" o( D0 B- h! n' I align-content 多轴线的对齐方式(13分钟)1 f6 o" M. j" i6 R* E& {3 {* o
flex成员项的属性 - order(4分钟). v9 }9 h. S+ R7 U5 E
flex成员项的属性 - flex-grow(4分钟)3 w y4 }0 J; ]( S
flex成员项的属性 - flex-shrink(6分钟) e7 @1 w+ e: F# U: H, L9 A
flex成员项的属性 - flex-basis(4分钟)! m8 s3 z3 J2 [5 o; n
flex成员项的属性 - align-self(6分钟)
7 Z: e1 N, v5 q- O07开发首页-上
g: o. g& n( G d 创建项目，构建基础页面(8分钟) 免费试学
; F* H+ \* ^" [! R$ R 构建tabbar(13分钟) 免费试学' `/ J. H- J; Z+ w: Y$ M
设置全局page，简述view组件(6分钟) 免费试学
( i5 Y3 e* [8 v3 m8 p: ~6 K 使用轮播图组件(11分钟) 免费试学$ L+ ?5 R6 K% H, c2 a* L4 M+ D
禁用原生导航栏达到页面全屏化(6分钟) 免费试学4 n) m8 [( H# k$ k0 G: ?/ `
在线文档的使用(8分钟) 免费试学
7 d9 Z/ k) p' \ request网络请求api讲解(5分钟)
0 j6 {1 r' P5 D6 k# X# g* O, q4 c uni.request动态获得轮播图数据(9分钟)" L. q8 y* p8 ^. C" n( l
箭头函数 this 作用域(4分钟)
4 n; b+ _% ~. y# K7 P, P ` 渲染并且展示轮播图(5分钟)! }7 r- E3 o3 C* }# {7 _/ w
08开发首页-中2 y" g p% t0 d% N% J& H( p
引入组件实现全局变量(7分钟)* r% f/ `7 c+ y/ o/ |
使用挂载实现全局变量(4分钟)
1 Q# {" T$ D3 q 在手机端进行微信小程序真机预览(6分钟)
* Q8 @; K3 s: Q Q 微信小程序https使用事项(7分钟)' D% s$ h2 n/ c q
开发热门超英 - 标题(9分钟); |' Z$ f, @. x% ]& N/ Z$ @8 t
开发热门超英 - 简述scroll-view(4分钟)
$ O; k7 i4 G6 ]# x1 [4 T# A. R$ S 开发热门超英-使用scroll-view实现横向滚动(3分钟)) `! e4 ?* j, b
开发热门超英 - 海报与标题(8分钟)
! g0 k# ]; v. ^: h9 w 开发热门超英 - 评分(6分钟)
" ^; N/ T; A0 G: K0 I2 z 开发热门超英 - 动态渲染数据(8分钟)) }' O: v. a$ }2 K% D
09开发首页-下* F( o, C' Q- O1 P7 _7 a" E2 z/ X
开发自定义组件(7分钟)
) e2 o7 d( {9 ]1 F0 w& ` 父组件向自定义组件传入值(6分钟)
4 O9 w2 G, {% X0 ?5 }" ~' p7 N 完成评分自定义组件(22分钟)$ p; w/ t" A( X$ [& j( G
视频组件video讲解(9分钟)
. w4 ^, G; N' m9 n2 @ 获取预告片数据(3分钟)
1 o- t, @9 R _5 m- r0 `- ] 动态渲染预告片(10分钟)
0 j3 r) b* @8 t8 C* ?" {, { 猜你喜欢 - flex布局嵌套编写(18分钟)% H: A. B2 \; }% H# C: Y
猜你喜欢 - 编写点赞css(7分钟)8 `# s) R9 L/ M2 c
猜你喜欢 - 实现点赞动画效果(14分钟)
u, u* E8 A5 G0 ]4 G9 z 猜你喜欢 - 还原动画(5分钟) s0 s, S" I# m( m: P1 }. M0 s8 W
10开发首页-终
' |2 L5 y% q: _6 S L 猜你喜欢 - 动态渲染列表(6分钟) c( W0 B- j, b! B: e) ?$ r
猜你喜欢 - 实现动画数组(7分钟). Z; z- B f0 ^
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟) y$ W8 d {% s
猜你喜欢 - 开启下拉刷新(5分钟)9 v: U% h2 I( r" u+ M$ U/ w3 c4 P
猜你喜欢 - loading交互api(8分钟)! d: i$ r: M4 q) t6 q
11构建搜索页-上( p. u! K% O' E( r
搜索页面 - 编写搜索栏(19分钟)3 T3 X1 R8 l+ k/ r$ e
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)8 G) U- c* S1 e4 I5 n7 ]
搜索页面 - 动态获取最新预告并且渲染(9分钟)( h0 g' W u H/ T$ N
搜索页面 - 分页接口api讲解(4分钟)1 b9 o! o3 h% r
搜索页面 - 搜索前置准备(6分钟)
0 S7 C0 _) t) D 搜索页面 - 执行搜索动态渲染(8分钟)
/ F- o* z& [# d( ?. X& c 搜索页面 - 监听下拉实现分页功能(8分钟)
: t' ~; x! T) w' h- v ?2 Z 页面路由api与传参(13分钟)
# z4 P1 a+ \: k! j5 E$ w Y$ n 页面跳转组件的使用(7分钟)" u! H- k8 M8 V8 I! c2 H
详情页 - 查询详情与视频渲染(8分钟)
' Z2 H6 A. A' L12构建搜索页-下3 K/ G+ E/ ^* c: O& ^- Y
构建预告片基本信息(16分钟)7 U3 \5 S5 M, _
构建评分快与阴影效果(15分钟)5 Q# o8 s7 }6 ]; u8 i+ W) m6 j
解决错误数据绑定undefined(5分钟)9 u' N! J6 o2 f: B# H# l
编写分割线以及剧情介绍(8分钟)8 W& d e P+ K
构建剧照与演职人员数据列表(10分钟)
& Q* R& s7 S. u) {% Q 渲染剧照列表(8分钟)4 ]) t# e! S. h1 Q" l
双拼数组构建演职人员列表(12分钟)$ u) F/ i1 O- @3 I
渐进式导航栏设置(6分钟)
2 {5 y( n7 y8 D G 通过预览api实现剧照预览(7分钟)
* k; h. T; U8 d 演职人员数组拼接预览(8分钟)* e: G1 c3 O. P. s- d( b" I$ L U
13电影详情页构建
$ {; q4 r0 ~ e( k2 c8 X0 h! B5 Z 自定义预览封面图(13分钟)
9 |0 }$ q+ K, R9 F3 P h actionSheet接口api使用(6分钟)
* z7 T. D- I7 F" e8 z5 b 下载以及保存图片(15分钟). x& L6 g( g1 ]' t1 s
配置https下载合法域名(5分钟)
; ], |7 H2 {# ~6 Q 实现小程序中的分享转发功能(9分钟)" Z4 N8 Q3 y8 P
自定义导航栏按钮(11分钟)
7 d1 `: ~: T" s& \0 N+ d1 `1 R4 F% ` 分享到朋友圈(9分钟)
) ~5 {" f! K$ m( p: D4 i {! [$ g 微信开放平台简单介绍(6分钟)" D+ o8 U6 H& B) y& c3 l+ `
操作视频对象，提高用户体验(8分钟)* X- A6 s; V: F! i2 ?" |
优化首页视频体验(13分钟)
) h# [9 a0 Y; K14我的页面（上）
/ t, J" ~, L5 G2 [: m9 | 开发个人页面-header与导航栏设置(9分钟)
3 ^9 t2 ?; t: f. i 发个人页面-用户未登录和已登录的页面展示(9分钟)
* M4 e6 T6 }: q. `5 j 构建注册登录页面(8分钟)
# X+ v, { A2 Z- |# D$ I3 |9 ~ button与form组件讲解(6分钟)- d/ N; D6 T" z
实现一键注册登录(12分钟)& O: F5 s' x# C# b
通过缓存切换是否登录状态(9分钟)2 s/ f4 t# E$ E: t. o2 a, x
构建用户账号页面(9分钟)
8 ^9 f: M a6 Q! h+ ^+ N/ ]5 R 清理所有缓存api(4分钟)$ C( z" ^$ Y3 V
用户登录错误提示与方法挂载(7分钟)
- u+ t( p8 [, c g* A5 f6 n5 K 渲染用户信息数据(6分钟)1 o1 J# M. o* `2 _6 m8 W% V
15我的页面（中）' l, z$ U; n4 x
用户退出登录(6分钟)1 a( Y6 ?6 z; t8 o7 G; _
第三方登录讲解与页面构建(16分钟)) }3 q3 \( p" R, h* E* C
第三方登录-小程序端实现微信登录(15分钟)
3 O( u w Q7 [! ?% w* V 第三方登录-后端登录业务梳理（辅助理解）(10分钟)
) W, q3 g2 y' Q/ |9 W 第三方登录-app端授权登录(8分钟)4 [! a, e2 M+ d; W
第三方登录-app端获取用户唯一id及信息(12分钟)* T1 R( Q8 `5 ^% |% a9 s& \
第三方登录-app端执行一键注册登录(7分钟)2 \, c8 G- c* R }! X6 b
查看预览用户头像(7分钟); @- A5 t2 s$ E
选择用户头像(11分钟)
: u. \" \2 Y$ q7 q- ~9 \8 s 重新选择头像(3分钟)# h5 E0 B' c7 ?- V
16我的页面（下）
: [7 c! m% ], P8 {' O& u; D! o 文件上传api与后端接口讲解(5分钟)6 W. v4 P7 C8 Z$ b' P+ M
token令牌讲解、实现头像上传(23分钟)0 \3 e% s8 `' T2 }$ r8 d- D9 L( _/ d
引入图片剪裁实现头像上传(7分钟)" D8 J" I+ l; g3 V
用户修改昵称(18分钟)
4 h) U; X% t6 o 用户修改生日(17分钟). T9 C- u& V. W, A1 [; g
用户修改性别(15分钟)' P0 u/ z$ l+ \- i/ b
17项目发布与上线5 T, `0 w. A; G+ m3 I2 O. h! }$ }3 s
打包H5 web应用(5分钟) m5 z% q! q7 x0 e# b
购买云服务与简介(6分钟)
8 L4 t" @' Y( u3 i) y1 ]# D* ~$ D2 k 配置安全组，重置密码，上传nginx，配置ssh(14分钟)
5 F/ Q8 W9 U2 [7 L; Z: U6 D 安装nginx(9分钟)6 T9 ~- ?7 d) o& I0 C5 F8 l
成功发布H5端web应用(14分钟)
# Z$ G* o ]. b" k 微信小程序上传审核流程讲解(8分钟)
; B! w1 L7 a, ]9 j* ?* I/ T6 v 打包安卓apk(8分钟)
! H8 w6 T, v4 I2 I 简述ios打包(8分钟)
- D' V- G& l& R6 E' O3 O( b/ l; n9 d# J18课程总结4 c2 C: O. w( i% }% k5 W
课程总结与展望(9分钟)5 k. s6 W$ ], S# J# X: h
0 h* X& a8 n5 _! w U
# k- U; u4 \% R0 N$ W* U9 X0 Y
' m4 \, X2 q6 Y; v4 t
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
