|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。: O! X) o6 O8 |7 U9 x
课程目录：
3 R# q) u1 ?1 M01导学
0 q Y5 j4 M, j6 x/ n 导学(12分钟)
8 z2 @; W) P; H. f& f: @ z: ~ 学前必看！补充课：接口调用参数补充(6分钟). d T; r% x0 N% K
基础框架NextHelloWorld(rar，513.7KB)7 t$ F. j1 ~1 O& A) O9 T
超英预告最新源码(rar，8.7MB)( d" j# M% O8 c! v
linux工具与ngxin安装(rar，37.3MB)
% R! i0 C7 v4 W6 o- m6 L logo素材制作(rar，730.3KB)
2 _+ l5 N- T$ X' }; D$ _% ~2 j02课程介绍3 f, s2 @* W7 u9 ]7 N
什么是 uni-app(4分钟)5 [3 ]& Q/ D( g( Y
为什么要使用 uni-app(8分钟)
; E4 j& y V9 h+ a, Z. t6 ]( Z; h app多端发布效果展示(7分钟)
6 o$ ]' C7 m$ v( j* W 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)" v! V* h' H5 ^4 e: d2 \8 h5 q
微信、支付宝小程序开发工具调试(7分钟)
' b h. [0 z3 a+ s, I, } 在Mac上使用Simulator进行调试(5分钟)+ `, ?$ C/ O0 N9 {% h, i z
03框架基础-上
" h6 u3 [8 o4 o7 Z6 v: T( T t) Z 简述MVC模式(9分钟), g% M$ {# S/ T5 I/ h( p
图说MVVM模式(5分钟)
2 U: H7 E, i8 d1 H6 b4 q 通过代码阐述MVVM与双向绑定(12分钟)
8 Q9 `# Q8 v2 O; A0 G' V3 ^3 ~ JSON对象和数组的渲染(4分钟)4 v- [" t7 B( C% W% h9 w
页面路由以及标题配置(11分钟)# ^ ~/ d" P9 l
宏观讲解项目配置文件(16分钟)
2 z; ?, k$ g$ l7 D( z 应用的生命周期(11分钟)
. Z: Y( n- c) l 页面的生命周期(14分钟)
& n' c" p$ @4 a) U9 x 固定像素px与响应式像素upx(12分钟), o, x- C" |( p, |2 f6 M
在页面里使用{{}}表达式(7分钟)
& M; V+ F+ b+ j: Y8 _, f% n! U04框架基础-下( m: Y+ s$ o+ c m0 h
v-bind指令对属性的数据绑定(7分钟), M# b) S2 u5 |. J: N, F7 E" p) d& |
事件基础(22分钟)
$ i, w7 w3 H, I: E/ G8 a7 Z 条件渲染 v-if与v-show(7分钟)
9 Q( _* w8 h( Y. ~. z 条件渲染 三元运算(4分钟)1 S9 d' D5 ]( G" N* o
列表渲染v-for的使用(13分钟)
' Y/ u O6 B1 O2 U0 x6 {. E" ]1 w 指令key实现for循环的组件唯一性(12分钟)9 j% M/ ^& [9 k1 I, s( r
嵌套循环的下标定义(4分钟)
9 }, P/ ?9 }/ N0 X7 i" C 条件编译 - 上(10分钟)' A. f& P( O/ P- d1 v$ C! m/ @
条件编译 - 下(7分钟)
/ n2 c) T. ?: a05样式与flex布局-上" R ?9 B6 F# E, b/ s8 I( [" K# ?5 A
flex布局介绍与模型(8分钟)7 F8 ~2 C! K1 l/ ^9 e' W. v
flex-direction 元素的排列4种方向(10分钟)) q# N3 x( e2 s. W R9 Z
导入外部css样式(4分钟)# F+ z. } c* b y$ ]
flex-wrap 元素的换行(12分钟)
; G* p0 S1 M3 f8 }8 y t$ Q justify-content 元素在主轴的对齐方式(14分钟)0 e) B9 _+ Y! R2 w
align-items 元素在交叉轴的对齐方式(12分钟)
+ A/ r8 x/ z& j0 Q9 n0 M0 E( T06样式与flex布局-下/ T. W. F2 w f
align-content 多轴线的对齐方式(13分钟)
0 V8 |. x$ w! Y flex成员项的属性 - order(4分钟)
% }6 ?( Q- n3 o- G' }6 L flex成员项的属性 - flex-grow(4分钟)
" O2 N* W9 ^: J3 a& p# R flex成员项的属性 - flex-shrink(6分钟)# Z9 C$ m* x' ]6 O
flex成员项的属性 - flex-basis(4分钟): I( q) L' b: @& U9 g
flex成员项的属性 - align-self(6分钟)
- v3 c2 E0 K) L; H Y/ P3 p07开发首页-上
$ @- u" s/ z9 W3 p9 t/ O8 Z' c 创建项目，构建基础页面(8分钟) 免费试学, z2 Q% W9 r5 v3 q* B9 z
构建tabbar(13分钟) 免费试学
# V3 D* `% e7 S2 ?. G m 设置全局page，简述view组件(6分钟) 免费试学5 K5 a% l5 s3 }
使用轮播图组件(11分钟) 免费试学/ G/ L5 R U" `. ~
禁用原生导航栏达到页面全屏化(6分钟) 免费试学$ T Z4 W1 o( L2 `
在线文档的使用(8分钟) 免费试学
# k' w# ]2 k; \: ^1 z/ F1 D4 Q" [ request网络请求api讲解(5分钟)
# B$ E# _. R" ~# a" P uni.request动态获得轮播图数据(9分钟)
2 o1 {* u, J+ A 箭头函数 this 作用域(4分钟)" E& v$ D# ]) M8 G2 U
渲染并且展示轮播图(5分钟)
; g, c: w1 E" G08开发首页-中; y- S# U3 k' M, K
引入组件实现全局变量(7分钟)
- V) U. @7 W, _0 V' x 使用挂载实现全局变量(4分钟)
# k6 B2 [( V, S( A) ~* {. A 在手机端进行微信小程序真机预览(6分钟)
) c' n1 ~0 O5 U* D! C$ A( ?! B 微信小程序https使用事项(7分钟)
7 G. a X0 D* B 开发热门超英 - 标题(9分钟); T) s; q/ U1 }! `3 h# `4 a
开发热门超英 - 简述scroll-view(4分钟)4 F- {2 Y) q7 v. ]" z- L/ b5 R+ n" w
开发热门超英-使用scroll-view实现横向滚动(3分钟)
$ h. ~( N5 l0 N. w 开发热门超英 - 海报与标题(8分钟) F: {" s2 Z* O: v. h- H
开发热门超英 - 评分(6分钟)
, D' x" v: R! W6 b" H4 O 开发热门超英 - 动态渲染数据(8分钟)% ` ^" U: D2 G8 c6 {+ l% e) m
09开发首页-下
# M6 Y) p. N4 Z9 P; [ 开发自定义组件(7分钟)& l+ u8 h" d$ C9 x" j b
父组件向自定义组件传入值(6分钟)
+ z5 |, a8 _0 y) p, P. { 完成评分自定义组件(22分钟)
" I$ {, V2 I' e: |; f" X 视频组件video讲解(9分钟)6 G% ~2 a* {5 I. P# t( _2 D7 u
获取预告片数据(3分钟)7 u' x& V1 i8 _, B; C
动态渲染预告片(10分钟)
4 @0 y2 ]4 U8 u* }- E4 c& r 猜你喜欢 - flex布局嵌套编写(18分钟)
' n) i1 ^2 O6 |& N5 e 猜你喜欢 - 编写点赞css(7分钟)* e$ z( _' f F$ \( X9 c8 f; l
猜你喜欢 - 实现点赞动画效果(14分钟)
6 C0 U- Y5 A; j" c" r+ n9 k; T( s 猜你喜欢 - 还原动画(5分钟)
5 @% }$ ?4 p" h10开发首页-终
& j- `6 M+ T- U5 Z 猜你喜欢 - 动态渲染列表(6分钟) y }4 C1 x! G# _: e, H0 d6 n
猜你喜欢 - 实现动画数组(7分钟)8 {2 u; v6 Q9 c+ E Z/ ~; P
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
$ t$ Z8 f0 S4 C 猜你喜欢 - 开启下拉刷新(5分钟)
+ J6 T. e, b @2 ^5 H* } 猜你喜欢 - loading交互api(8分钟)
9 C" N0 Q' S5 W/ }11构建搜索页-上5 S; Z$ }0 ?* e& I" s" x& h
搜索页面 - 编写搜索栏(19分钟)
$ d. m. S; l" N" w3 B 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)2 F ^6 p6 S) C& ~' t5 x7 e
搜索页面 - 动态获取最新预告并且渲染(9分钟)) I3 [8 a7 U- G: @
搜索页面 - 分页接口api讲解(4分钟)8 ]+ j% j: A8 h* ]1 j3 b2 Z# r
搜索页面 - 搜索前置准备(6分钟)! q$ k" w1 F6 U E4 D1 f6 ]7 \ h' }
搜索页面 - 执行搜索动态渲染(8分钟). O, g |9 | e% v* h
搜索页面 - 监听下拉实现分页功能(8分钟)% [7 j* e4 o o
页面路由api与传参(13分钟)
9 M' f, O' n f 页面跳转组件的使用(7分钟)
* Y% g! \) ]: Q, P 详情页 - 查询详情与视频渲染(8分钟)
3 G4 j U' u& }, K: V* k12构建搜索页-下3 C( V/ O5 ]4 g1 ~# X
构建预告片基本信息(16分钟)
1 M( T' w4 @3 s1 k: _ 构建评分快与阴影效果(15分钟)( H+ ^# W) v3 R5 D C2 ?1 R
解决错误数据绑定undefined(5分钟)0 t: {9 y' C- D$ W. A+ k K
编写分割线以及剧情介绍(8分钟)
) K' K& P/ @0 G 构建剧照与演职人员数据列表(10分钟), W; d. p$ a* C
渲染剧照列表(8分钟)
, v" B4 T @8 r1 V | 双拼数组构建演职人员列表(12分钟)1 g6 T8 X3 f& \) {
渐进式导航栏设置(6分钟)- \: H7 o: ]. b# J
通过预览api实现剧照预览(7分钟)
8 o) f+ i8 T* {% ], ?- g8 O4 c 演职人员数组拼接预览(8分钟)
6 O4 x5 X! o( v" h* ^: U" ~8 J13电影详情页构建& `! C/ l3 N% _4 g
自定义预览封面图(13分钟)
- F3 p7 i6 g7 y" T$ b- [4 O5 O4 s actionSheet接口api使用(6分钟)
/ R# n5 @! w' k9 v6 E" J3 f i 下载以及保存图片(15分钟)# i! i( p5 ^8 t ?& Q* u% L4 _
配置https下载合法域名(5分钟)9 {- m! |+ j4 @8 @2 C
实现小程序中的分享转发功能(9分钟)5 N- Y) G! M, }0 B: Z9 a
自定义导航栏按钮(11分钟)) r& Y- K2 W$ h2 W
分享到朋友圈(9分钟)% N% Y, z$ C' E( p% ]5 X* e
微信开放平台简单介绍(6分钟)9 S1 v6 x9 L* }9 t$ P
操作视频对象，提高用户体验(8分钟)
% s: T3 k" v1 z) z 优化首页视频体验(13分钟)& t( [% u; @0 t6 t3 {" N
14我的页面（上）
2 @: [4 {$ s( z: n$ S5 {1 u# T. |' V, c 开发个人页面-header与导航栏设置(9分钟)
% g' W" O7 K4 ] 发个人页面-用户未登录和已登录的页面展示(9分钟)
2 J ^" J5 R* i. { 构建注册登录页面(8分钟)
, k0 r/ d7 t# p9 a( j8 H button与form组件讲解(6分钟)7 c. g* [! }5 ~/ W. K5 _
实现一键注册登录(12分钟)
+ C( b0 l# X. ], Z) ?4 H/ a2 L T' m1 ~ 通过缓存切换是否登录状态(9分钟). ^) G( |- C( N& |! A
构建用户账号页面(9分钟)
8 A( ]5 A" ?4 {3 }' o+ ~: @+ t7 F 清理所有缓存api(4分钟)* s0 v; D9 g/ g: O
用户登录错误提示与方法挂载(7分钟)
+ t7 Z+ K2 {( Z) C 渲染用户信息数据(6分钟)
& |' V2 |1 J# x% [4 l: u9 ~15我的页面（中）
3 B1 ^) C6 V( n% }7 ]8 C 用户退出登录(6分钟)0 g( e* H. p7 t
第三方登录讲解与页面构建(16分钟)
' ?7 \) g7 k8 {" C T0 Q 第三方登录-小程序端实现微信登录(15分钟): s0 O5 ^. J8 q2 i# A' t! ?+ t* J
第三方登录-后端登录业务梳理（辅助理解）(10分钟)+ b; x$ A( N: @& C
第三方登录-app端授权登录(8分钟)
3 X* j* i q2 D8 x7 p9 n7 }- @ 第三方登录-app端获取用户唯一id及信息(12分钟)
! Y& A8 m" B ] 第三方登录-app端执行一键注册登录(7分钟)4 t! _' W$ d6 \# |6 a- v: l. J8 N
查看预览用户头像(7分钟)
$ q5 b+ Z5 H o, H- S% R! H 选择用户头像(11分钟)
) J( |$ ]3 \( S" {, n/ {* ] 重新选择头像(3分钟)2 U9 {' L( D& U: Z, R2 b) h
16我的页面（下）& x2 [* F& R- h
文件上传api与后端接口讲解(5分钟)3 q7 a# }$ I5 ~7 O
token令牌讲解、实现头像上传(23分钟)* z/ }. ?' |+ M+ T2 r0 ]( T9 A* h- E
引入图片剪裁实现头像上传(7分钟)
6 N' @8 e9 z( W& t$ {/ i2 D# H2 P: F4 q 用户修改昵称(18分钟)2 b8 ^: h# \, e3 c
用户修改生日(17分钟)6 t0 S2 U- {% h/ ?0 ?5 h) ^
用户修改性别(15分钟)
# Z, `, L* A. ]9 g' Y17项目发布与上线) S0 F" W i ^
打包H5 web应用(5分钟)
@6 Y/ m8 w O+ j' t" W 购买云服务与简介(6分钟)
. o( F6 v! H9 { 配置安全组，重置密码，上传nginx，配置ssh(14分钟)+ m' E: ~# r6 F+ J J! F! a! d, ~/ v6 h- s
安装nginx(9分钟)3 n1 K' t# b* X; z1 @ \+ C) o
成功发布H5端web应用(14分钟)
, y% u# g, t* v2 W 微信小程序上传审核流程讲解(8分钟)5 Q1 G4 l- I8 z
打包安卓apk(8分钟)
2 `1 S6 K# u' H 简述ios打包(8分钟)
3 \9 B* [7 s C% a* w18课程总结
: W5 o' L2 y- W" Z# w" @. I7 q, u 课程总结与展望(9分钟)$ G& ^8 ^5 e' i
]6 q& h& _1 n! p2 f) Y 8 i4 H5 a: t/ O9 _) g
' d+ m% L+ S, B& n
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
