|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
) Z( f+ _* E" v; P1 k5 I课程目录：
3 A) N) H4 q4 H8 d( L0 c7 U% V/ N. O, i) z8 ]01导学 L: @% R0 X0 V" p
导学(12分钟)
1 e' K- P! B2 M6 ^0 A. e) G$ K } 学前必看！补充课：接口调用参数补充(6分钟) |- V* u: s. S1 c# r) c+ b% W4 z6 |
基础框架NextHelloWorld(rar，513.7KB)
6 ~$ [, v& F, e/ q8 k 超英预告最新源码(rar，8.7MB)4 Z) |* b: ~5 G) |/ k0 K9 ?5 a
linux工具与ngxin安装(rar，37.3MB)( Z% g( \$ _0 v, P- K* z4 N. c
logo素材制作(rar，730.3KB)
* m. l6 h F" u5 z5 ]" j7 I* z02课程介绍
1 |; ~) S3 r8 e* K% e8 ? 什么是 uni-app(4分钟)
) Q5 W( n0 x5 T9 F 为什么要使用 uni-app(8分钟) X: }" F% B3 i3 y7 y; h4 ]2 V
app多端发布效果展示(7分钟)
; A( y9 `! P- F, F* z( \' N: {( R 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)& _- f3 T3 w9 Y
微信、支付宝小程序开发工具调试(7分钟)
- s+ t# A* X2 `# m 在Mac上使用Simulator进行调试(5分钟)0 ?' v' B% D) j; |. a
03框架基础-上
' r. ?$ Z! T2 f$ F" M, V2 p/ w' ~ 简述MVC模式(9分钟)/ s' O, t. V1 D
图说MVVM模式(5分钟)
5 j1 f% Q" m: B. c6 U0 b# @ 通过代码阐述MVVM与双向绑定(12分钟), S0 e" j* E9 d8 q6 D: l$ e
JSON对象和数组的渲染(4分钟)7 s2 ` f$ ^9 c3 V# {" l: A
页面路由以及标题配置(11分钟)" N' k7 c [! g8 y V) m( L! ?
宏观讲解项目配置文件(16分钟)
3 X7 _* g& w; |, `: H 应用的生命周期(11分钟)! p" Z5 c& e7 Y6 m t7 M
页面的生命周期(14分钟)
: d2 j( s' _1 T5 ` 固定像素px与响应式像素upx(12分钟)
. t4 r ^ c' S8 f2 L. @* H 在页面里使用{{}}表达式(7分钟)3 t3 J4 R" ?5 T% Y# P
04框架基础-下
8 L* O9 r* j1 V5 L u. e$ e v-bind指令对属性的数据绑定(7分钟)
# z: u+ r' R1 U' ?, f 事件基础(22分钟)
& M5 w$ U2 B. Z K1 F j 条件渲染 v-if与v-show(7分钟)
* E/ E) V9 [* c& x% @( A 条件渲染 三元运算(4分钟)
4 s& i% W7 K* d4 {% n' m, X 列表渲染v-for的使用(13分钟)7 g% m( J4 f' Y2 a3 O
指令key实现for循环的组件唯一性(12分钟)1 |9 G1 X; [" u+ f3 F& Y! c
嵌套循环的下标定义(4分钟)! U/ p: c( N$ I+ s/ b5 U8 ^
条件编译 - 上(10分钟), y4 J M$ x/ l
条件编译 - 下(7分钟)
% K; A* n! ^; O( u5 G05样式与flex布局-上
* D# V# R5 V% D9 F2 G6 w8 W flex布局介绍与模型(8分钟)3 I d0 k4 k8 O; }
flex-direction 元素的排列4种方向(10分钟); v/ p, X( C6 W% Z$ O
导入外部css样式(4分钟)$ S0 ?6 U# r4 L6 \
flex-wrap 元素的换行(12分钟)
& X: \9 d) Z" m) B }9 P6 X! j* C5 T justify-content 元素在主轴的对齐方式(14分钟)3 |6 B( @7 v1 Z; K7 [ H3 W7 o, q
align-items 元素在交叉轴的对齐方式(12分钟)& \, y/ z8 S6 y
06样式与flex布局-下
$ G- c8 T' V# ?9 K8 A align-content 多轴线的对齐方式(13分钟)
6 q' T U4 o. ?9 V3 X& N( F$ { flex成员项的属性 - order(4分钟)
7 o. I) ?) A# v0 j flex成员项的属性 - flex-grow(4分钟)2 @7 Z. ]4 o3 Q
flex成员项的属性 - flex-shrink(6分钟)8 @8 D @7 u: ]" d) L
flex成员项的属性 - flex-basis(4分钟)
# h4 E2 ~3 r. X, \5 h# u& t, C flex成员项的属性 - align-self(6分钟)
* ?! I) ]7 Q J) \6 m( e6 r07开发首页-上
3 l9 F6 P: w9 r/ e 创建项目，构建基础页面(8分钟) 免费试学
5 V' S. K! c+ d/ Q 构建tabbar(13分钟) 免费试学
2 @# {. k4 ?( R 设置全局page，简述view组件(6分钟) 免费试学
. t) O' d8 O# o2 o 使用轮播图组件(11分钟) 免费试学6 }. j8 D: Z( N
禁用原生导航栏达到页面全屏化(6分钟) 免费试学3 ^. D: n% c# C$ W' N: o0 I
在线文档的使用(8分钟) 免费试学
# X s9 o0 C+ Q7 {2 @* s1 b7 V request网络请求api讲解(5分钟)
& O& D& `# u" M! R o uni.request动态获得轮播图数据(9分钟) _$ m" S& u/ k2 |/ t
箭头函数 this 作用域(4分钟)
/ f x* M; T# T6 O! U$ t* G% d( K& F2 w, `$ ] 渲染并且展示轮播图(5分钟)4 o5 E$ m) N4 k* `6 l. V
08开发首页-中
& k# v# o$ @: p2 F: J3 ^% x 引入组件实现全局变量(7分钟)6 d5 ?$ w0 `$ i# r9 Q
使用挂载实现全局变量(4分钟)- M$ h" ]& O* U( s) _3 a; D
在手机端进行微信小程序真机预览(6分钟)
7 q$ ]0 q" \' a/ j) D! V9 E 微信小程序https使用事项(7分钟)
& i. B& c, S1 Q$ M' b& ]8 U 开发热门超英 - 标题(9分钟)
4 S: N; O, x* c! R- }! c8 F* } 开发热门超英 - 简述scroll-view(4分钟)& S0 D, l- U) ]; U# v
开发热门超英-使用scroll-view实现横向滚动(3分钟)' i( D( U9 h) o+ @5 O+ [& H
开发热门超英 - 海报与标题(8分钟)
# N' W, g% h# q 开发热门超英 - 评分(6分钟)
2 R$ W& K- f; a( m w 开发热门超英 - 动态渲染数据(8分钟)5 \. ~* K+ I; M% v, ^' S
09开发首页-下5 Q3 b# L9 Y: C, c# `
开发自定义组件(7分钟)3 ~/ i. Z6 f4 X! G3 K/ v$ D$ i/ F
父组件向自定义组件传入值(6分钟)* E( R2 ~' ^+ t# {5 g* p
完成评分自定义组件(22分钟)6 t) z1 h- J& p5 f( x
视频组件video讲解(9分钟)
6 m I( z' k# y9 z 获取预告片数据(3分钟)9 Z0 f, j4 x$ ^2 Q
动态渲染预告片(10分钟)
+ N; J" a/ `+ ^ 猜你喜欢 - flex布局嵌套编写(18分钟)1 o( T' p' l" _
猜你喜欢 - 编写点赞css(7分钟)
' B1 O/ H& I2 ]; B/ l 猜你喜欢 - 实现点赞动画效果(14分钟)1 w3 u7 K- G x, q
猜你喜欢 - 还原动画(5分钟)
1 V$ Y) g5 ~6 @6 p, I10开发首页-终6 e# z1 f- |/ f% u: {
猜你喜欢 - 动态渲染列表(6分钟)
' ]3 T b2 ?8 e* S5 u 猜你喜欢 - 实现动画数组(7分钟)
# Q5 p# Y2 f1 i2 e 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)" C1 X9 e9 B. I( g- X! P, s
猜你喜欢 - 开启下拉刷新(5分钟)
/ ~' r& e0 _5 a! D% H i 猜你喜欢 - loading交互api(8分钟)
^0 R r3 t* v4 [% S11构建搜索页-上* `4 i9 l! ]0 ~7 `' m0 x" `# \
搜索页面 - 编写搜索栏(19分钟)9 U( s0 a: m. b* N: K4 e
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)5 x4 J4 B$ B% C
搜索页面 - 动态获取最新预告并且渲染(9分钟)
7 i& {2 D/ Z) V( N* w 搜索页面 - 分页接口api讲解(4分钟)
1 ?- k6 }3 b( S1 j 搜索页面 - 搜索前置准备(6分钟)
. V; r' K9 g# U; D 搜索页面 - 执行搜索动态渲染(8分钟)
. r; X4 ?: ^( y( N( K 搜索页面 - 监听下拉实现分页功能(8分钟)
3 e8 R: n2 m, D4 G3 } 页面路由api与传参(13分钟)# a1 K! `6 S# [2 j; S' z8 U# v
页面跳转组件的使用(7分钟)3 t4 U) _$ ]0 ^8 g
详情页 - 查询详情与视频渲染(8分钟)
) k: V. a( K+ i# Y7 M12构建搜索页-下
7 D, n6 }+ J. r. b: k0 F; V# }9 J3 l 构建预告片基本信息(16分钟)
& U- I+ V7 e# q3 F 构建评分快与阴影效果(15分钟)
+ z+ h$ m% S$ a 解决错误数据绑定undefined(5分钟)
/ g9 n2 r s; _( B' W, o 编写分割线以及剧情介绍(8分钟)* f& O) b, n) }% Z6 K1 c
构建剧照与演职人员数据列表(10分钟)% |/ i5 v) j, O. c
渲染剧照列表(8分钟)
3 }0 ~! t+ Q i L( o: t2 _ 双拼数组构建演职人员列表(12分钟): }3 f6 { T! |' { @" d) d. @
渐进式导航栏设置(6分钟)
m2 O0 V% h, X 通过预览api实现剧照预览(7分钟)
0 E2 E3 }1 ]2 e M5 L% V 演职人员数组拼接预览(8分钟)* s& P. V5 d; W" u4 ?4 A$ H. |
13电影详情页构建
$ g' m7 y2 N# b! D1 E. h 自定义预览封面图(13分钟) Q1 ^; A' q3 |# w6 r, f
actionSheet接口api使用(6分钟)
3 u1 v" M. e( H) T2 z. I 下载以及保存图片(15分钟)
2 ?2 A/ C4 R) e# {* t) h u 配置https下载合法域名(5分钟), j4 r1 l3 ]; f" V1 j9 N
实现小程序中的分享转发功能(9分钟)
' }; V9 G2 O; `7 W 自定义导航栏按钮(11分钟) y) z2 s. [3 U, y Q2 N e9 q
分享到朋友圈(9分钟)+ T, E* C9 r0 g, T. i
微信开放平台简单介绍(6分钟)
& i# `# J: D9 A4 y1 I 操作视频对象，提高用户体验(8分钟)
$ K; H& _+ l3 P3 h 优化首页视频体验(13分钟)8 |0 M% X _, g K+ |. U) D
14我的页面（上）1 [. E$ d- N+ Q( H
开发个人页面-header与导航栏设置(9分钟)
4 \$ r. O& V$ y 发个人页面-用户未登录和已登录的页面展示(9分钟)
3 J& U$ _8 ?; a. B, V 构建注册登录页面(8分钟)+ A; R ?' h2 ?9 x! ], g6 c
button与form组件讲解(6分钟)/ j; m U( G5 g; U0 p
实现一键注册登录(12分钟)# A$ b" @: d1 v N% C# |( z& O% ~
通过缓存切换是否登录状态(9分钟)
! l. M, w2 P& u3 C 构建用户账号页面(9分钟)
m* M. y. w `( S9 W$ I 清理所有缓存api(4分钟)
/ t5 |9 w4 Y+ U+ Z Q0 W# F2 I 用户登录错误提示与方法挂载(7分钟)( N8 q7 w) n1 f( e
渲染用户信息数据(6分钟)
$ r& d3 L% `9 N) l7 u0 D# U) `15我的页面（中）
8 O3 ^6 O4 `- |6 s) D* E 用户退出登录(6分钟)% ^0 ]; q5 ?% s0 J# Y R
第三方登录讲解与页面构建(16分钟)# H' z7 |- p& a) H0 T/ K
第三方登录-小程序端实现微信登录(15分钟)
5 Z/ X9 Z) e/ U" W7 q# R- b 第三方登录-后端登录业务梳理（辅助理解）(10分钟)4 ?! U9 O: P; i8 r
第三方登录-app端授权登录(8分钟)
$ W O1 q! Z. W: e! S# c& f 第三方登录-app端获取用户唯一id及信息(12分钟)% H7 @/ q5 N& x% A- A9 A7 j: _
第三方登录-app端执行一键注册登录(7分钟)1 q! k; q+ I" R8 j7 a
查看预览用户头像(7分钟)
: o. O) k6 Z8 P. Z; Q- g8 I# f 选择用户头像(11分钟)
0 K' |; w0 u8 l. q+ X( s 重新选择头像(3分钟)# s' U# k: m) S4 t3 K
16我的页面（下）
, c6 \$ \; j3 P 文件上传api与后端接口讲解(5分钟)
$ x% B8 }4 H1 H/ r. Q S4 g token令牌讲解、实现头像上传(23分钟)1 z. h1 g8 L; C% o' I
引入图片剪裁实现头像上传(7分钟)
& K. h3 X- ?( i! U* [! X. l; ]8 N 用户修改昵称(18分钟)% Q$ U1 e+ p! F/ ~, B
用户修改生日(17分钟)+ G) v( C& _8 Q% E
用户修改性别(15分钟)
. i c0 x! \( z2 Q7 O* t+ d! V) d% x17项目发布与上线' @( m# X# U6 X# |
打包H5 web应用(5分钟)
- @. f5 R# \$ [ E R9 P0 n 购买云服务与简介(6分钟)
9 {. |) J7 h1 T) {3 P+ i0 |$ O) }) T 配置安全组，重置密码，上传nginx，配置ssh(14分钟)
6 n* @1 G8 \& m. ] 安装nginx(9分钟) t" c8 u* W, X; ], A3 }, U7 u% D- W2 ~
成功发布H5端web应用(14分钟)
1 F1 B! B, ^3 q 微信小程序上传审核流程讲解(8分钟)5 ^& O8 }% K% R, o3 \ w# n
打包安卓apk(8分钟)
8 R9 G/ B7 D' i 简述ios打包(8分钟)5 P9 v$ H6 V$ y5 B9 @8 a
18课程总结
6 `9 Y" e; f' j' w+ q0 s5 c: L 课程总结与展望(9分钟)2 O. {' V" k) c( L! o3 i
) X! ~$ u" w p
: n& {9 f+ `; X( D. E
5 m! d _8 P7 J5 g0 z; x
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
