|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。7 v( m5 `/ d- l( Q$ R
课程目录：! R" R: o8 `( u: f! \) }! W: g
01导学
' o( `) ^$ H3 h' j 导学(12分钟) 3 U: m; V: |' C
学前必看！补充课：接口调用参数补充(6分钟)( n4 J/ S, U* y# k3 V; k
基础框架NextHelloWorld(rar，513.7KB)9 ?% u Z# e& {, B. W
超英预告最新源码(rar，8.7MB)
0 b) g# \ R; t$ G3 |4 Y( ]' {' | linux工具与ngxin安装(rar，37.3MB)
2 }" j- t0 l1 C# g8 ~5 l logo素材制作(rar，730.3KB)
1 X, F. b; Z: n) Q# O: Q) ^02课程介绍
0 I+ _( j* n2 o. ~ 什么是 uni-app(4分钟)
4 ^; j6 h* {+ R( ~1 k 为什么要使用 uni-app(8分钟)6 J2 }+ e; c+ m
app多端发布效果展示(7分钟)
! p9 R8 u8 \& L6 T 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
& s5 h) s7 y+ k k0 q 微信、支付宝小程序开发工具调试(7分钟)
, |( T7 t, Z. k: ^6 [5 ]; y 在Mac上使用Simulator进行调试(5分钟)* U! s' p. ~' l) g
03框架基础-上( W% D- ~+ T& f) C2 ]0 O. m% |
简述MVC模式(9分钟): [( b& p ^4 f4 H
图说MVVM模式(5分钟)9 M" i5 B0 a- X9 f
通过代码阐述MVVM与双向绑定(12分钟)
: R! o. D" r( o" z B5 f2 g JSON对象和数组的渲染(4分钟)6 X7 i9 x+ ^' L- G: e5 u6 E
页面路由以及标题配置(11分钟), N/ R/ a) _2 g! r8 G9 N6 t
宏观讲解项目配置文件(16分钟)) r& E% `" V, _: l- h/ k) J
应用的生命周期(11分钟)
1 n. C4 y: C* n. d( _- ^7 V2 r. X8 ~ 页面的生命周期(14分钟)
, p3 F- v% ^$ ?: e9 N/ k: P' d& R0 K 固定像素px与响应式像素upx(12分钟)+ n7 u( h1 l+ k$ a* T* d2 {
在页面里使用{{}}表达式(7分钟)+ u; A# w: S) a& G; z2 P) l E
04框架基础-下
. r+ Y- b- \% Q* s* D4 {7 n% N1 D v-bind指令对属性的数据绑定(7分钟)* }- a! z& G. h
事件基础(22分钟)
. G E' Q( d: o) j 条件渲染 v-if与v-show(7分钟)3 u% ]0 T. b/ y7 g% a( D2 N: Z* v
条件渲染 三元运算(4分钟)
/ S' t6 ? O% ^$ u 列表渲染v-for的使用(13分钟)
) a$ M/ b3 t) W* R) ~ 指令key实现for循环的组件唯一性(12分钟): @5 p4 @ s+ |' ?
嵌套循环的下标定义(4分钟)8 O5 I" D; J: \; S4 M7 Z
条件编译 - 上(10分钟)
3 d% N, K* j0 ]" d3 P h 条件编译 - 下(7分钟)
/ Q. K3 I, V4 K. k, c- \" _# L3 e05样式与flex布局-上4 x5 u4 U; ?# ~, t( l
flex布局介绍与模型(8分钟)+ |/ E% F) G: @
flex-direction 元素的排列4种方向(10分钟)5 s9 s6 ~) F3 J' W0 A; { m/ l
导入外部css样式(4分钟)
# Q) ?- o. W& |3 g6 B. e flex-wrap 元素的换行(12分钟)8 W+ f G5 e9 q {# A+ q9 E( {
justify-content 元素在主轴的对齐方式(14分钟)
. f, X3 ~% q X# O) B/ C align-items 元素在交叉轴的对齐方式(12分钟)
6 m- u" C( ]5 [06样式与flex布局-下/ M c6 A* s, p
align-content 多轴线的对齐方式(13分钟)
" J4 j8 h! X+ E/ p/ E7 j4 e" o$ B) N" S flex成员项的属性 - order(4分钟)
! B# x: |5 w0 j- B! X- P ^ flex成员项的属性 - flex-grow(4分钟)
" i2 E! g. p6 O1 f! b flex成员项的属性 - flex-shrink(6分钟)
& ?# \7 B' q- B3 e E; R flex成员项的属性 - flex-basis(4分钟)% i: X& Q5 }% I+ n
flex成员项的属性 - align-self(6分钟)5 ~# v& b, i4 s. x
07开发首页-上
$ a# j& B% o4 T/ p0 @9 w! x 创建项目，构建基础页面(8分钟) 免费试学
3 B+ u3 g* W7 I# w! P7 h. J4 _ 构建tabbar(13分钟) 免费试学8 l$ T/ \5 T* z* s
设置全局page，简述view组件(6分钟) 免费试学
6 c) b' e3 O- U! N( v# f! ?2 t 使用轮播图组件(11分钟) 免费试学
7 L( R+ J& b. O3 t 禁用原生导航栏达到页面全屏化(6分钟) 免费试学
; r8 l# Z6 S% q5 V8 c, l% z 在线文档的使用(8分钟) 免费试学1 i# ^, {/ @: o& Q L
request网络请求api讲解(5分钟)6 \3 V" ?' n) B
uni.request动态获得轮播图数据(9分钟)
( O/ M9 p( P! e8 y+ [$ @5 \1 | 箭头函数 this 作用域(4分钟)
! A' g4 k1 ? p" K' B 渲染并且展示轮播图(5分钟)0 k) ~3 _0 u6 \1 v/ l2 f
08开发首页-中 M8 ^9 u. J8 c {
引入组件实现全局变量(7分钟)1 @# C5 W% ~$ i9 ~7 N& N: Q
使用挂载实现全局变量(4分钟)! ]4 C# _( V- Y" y5 j
在手机端进行微信小程序真机预览(6分钟)" g6 q( f9 W, @; F
微信小程序https使用事项(7分钟)
) K5 ~3 A) `3 @% K3 E. h 开发热门超英 - 标题(9分钟)9 S" [# z) t6 c6 D) G& K9 A" ~
开发热门超英 - 简述scroll-view(4分钟)- t7 q1 y6 Z5 e' a
开发热门超英-使用scroll-view实现横向滚动(3分钟), T t; V8 x3 s. Z7 Q
开发热门超英 - 海报与标题(8分钟)
& \" L6 S& {' X8 e& s 开发热门超英 - 评分(6分钟)8 q' v" G. N4 M
开发热门超英 - 动态渲染数据(8分钟)
, |! u/ s& o; S0 w3 j5 x! t3 B09开发首页-下; Q6 ~! ?" e1 i C, s% u2 J
开发自定义组件(7分钟)
! T4 j0 M J) O k$ `+ T 父组件向自定义组件传入值(6分钟)
3 e' i) \$ A" ~0 S1 M$ \% b 完成评分自定义组件(22分钟)/ @1 [& V9 `: e. D9 p
视频组件video讲解(9分钟)
# r5 H) l1 ^, M/ ^5 b% l 获取预告片数据(3分钟)
) b5 j0 R$ l! I" Q% Q+ H 动态渲染预告片(10分钟)
% }% E4 `) h# A- I 猜你喜欢 - flex布局嵌套编写(18分钟). d9 ^' B. Y: ?% [0 e9 g$ S
猜你喜欢 - 编写点赞css(7分钟)2 h) k3 ?$ x3 O0 t6 k5 V& Z
猜你喜欢 - 实现点赞动画效果(14分钟)
4 \0 p% w F& g& i* A+ c6 e8 |" g 猜你喜欢 - 还原动画(5分钟)
! r1 }8 L4 s8 S0 m) x2 [- K10开发首页-终1 y; l- J" G8 u- p' K
猜你喜欢 - 动态渲染列表(6分钟)
0 }+ a* D5 X. N" E) _" R; o! c4 _ 猜你喜欢 - 实现动画数组(7分钟)$ a, J* \* w% t5 z) w
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)4 I; p7 w( ~: P( Z* B& x; ^) |
猜你喜欢 - 开启下拉刷新(5分钟)8 c# b* Y, n) h0 B3 T
猜你喜欢 - loading交互api(8分钟)
+ Y |% c2 v3 m- Y! O# |$ @5 k! z11构建搜索页-上- n7 H. H& Y. M( o1 [
搜索页面 - 编写搜索栏(19分钟)% T( w5 g7 N$ Z5 h; o
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
5 P1 g; F# b) v, F6 A8 r4 R 搜索页面 - 动态获取最新预告并且渲染(9分钟)
& i# }* n9 f" I7 e7 M2 P 搜索页面 - 分页接口api讲解(4分钟)
s# E( N4 I% \. x& i) y 搜索页面 - 搜索前置准备(6分钟), ^) ]. @- t9 h; e u1 z/ x
搜索页面 - 执行搜索动态渲染(8分钟)
; C: K% s0 ]8 N$ w. ?4 p 搜索页面 - 监听下拉实现分页功能(8分钟)
7 j/ [4 }/ O4 ]/ T" w$ p# M8 U 页面路由api与传参(13分钟)
4 j: { A) A) \7 X0 C8 i 页面跳转组件的使用(7分钟)* K( B8 \1 ~7 `& ?& l
详情页 - 查询详情与视频渲染(8分钟)2 c. G5 u- z6 O* d! C
12构建搜索页-下: |0 E' i4 h( a8 O i- R/ j3 M
构建预告片基本信息(16分钟)# U( g6 @% J, l6 Q
构建评分快与阴影效果(15分钟)
" y' J9 c- a# w2 W8 j 解决错误数据绑定undefined(5分钟)
! u. n+ t7 i* z% E. I' h 编写分割线以及剧情介绍(8分钟)8 m- P$ T/ t# {
构建剧照与演职人员数据列表(10分钟)
9 l: g$ K& X2 R( M 渲染剧照列表(8分钟)2 a# k8 o! M6 g5 _
双拼数组构建演职人员列表(12分钟)% m2 S5 d+ k, S. Q4 r$ \2 V
渐进式导航栏设置(6分钟)$ p3 u1 p2 z. v0 H$ e
通过预览api实现剧照预览(7分钟)& n/ ?" `& u" D) ]& U% @9 ~
演职人员数组拼接预览(8分钟)
9 P0 O" r4 ~* l2 `13电影详情页构建) E/ w2 u6 B" B9 b2 u5 Q ?2 D" J: N
自定义预览封面图(13分钟)
% D4 s# u+ q3 y. f' z. w1 m' w7 @ actionSheet接口api使用(6分钟)
$ {" _1 V5 |) B5 F$ \ 下载以及保存图片(15分钟)3 L% U% \, m6 ]
配置https下载合法域名(5分钟)
% z r/ u% X& n! i' T 实现小程序中的分享转发功能(9分钟)0 u4 U) ]' v1 ^+ `. h, G! ^, _
自定义导航栏按钮(11分钟)
; p4 A2 Z( D# i- _3 X' o 分享到朋友圈(9分钟)
7 ?( t: g/ H" s a! d2 ` 微信开放平台简单介绍(6分钟)
+ }+ |! E# G/ a$ ` P 操作视频对象，提高用户体验(8分钟)
7 i' V* P0 s! M$ G3 b 优化首页视频体验(13分钟)# M: o1 Z% @/ |8 w- D
14我的页面（上）' q5 t, E3 h% k& Q/ |# B2 Y
开发个人页面-header与导航栏设置(9分钟)
- u( r. |+ E! p3 _# S2 s' ? 发个人页面-用户未登录和已登录的页面展示(9分钟)
" I4 _' `: t T8 A. J 构建注册登录页面(8分钟)
* g9 i& r/ K0 ~0 M button与form组件讲解(6分钟)& p7 a s9 ]7 c3 j7 i" r( M
实现一键注册登录(12分钟)
* h2 x3 w( a' x8 B( J" r% K0 V* G/ h 通过缓存切换是否登录状态(9分钟)
% l& S# q/ H { 构建用户账号页面(9分钟)
3 `1 i e a ^9 @: p( |& @ 清理所有缓存api(4分钟)
/ W) z C3 x5 _; ? 用户登录错误提示与方法挂载(7分钟)
/ k( @- e$ c5 C+ M# \ 渲染用户信息数据(6分钟)" Q6 x0 T% o6 I/ m$ b
15我的页面（中）/ G% }; [. n- G# n6 d) P, m
用户退出登录(6分钟)+ S: z2 H: u9 w. `1 A1 r
第三方登录讲解与页面构建(16分钟)
5 F& d N' U% n- J4 t' D, l8 S 第三方登录-小程序端实现微信登录(15分钟)/ |% ~) D- t/ ^
第三方登录-后端登录业务梳理（辅助理解）(10分钟)" D1 y, Z" a) ^& y1 x* l
第三方登录-app端授权登录(8分钟)
! w, z. E/ c: c, U, {, f; o( J( q2 Y 第三方登录-app端获取用户唯一id及信息(12分钟); M1 J5 C1 |9 D& V1 d( E2 o
第三方登录-app端执行一键注册登录(7分钟)
) `8 l0 I5 }& D! h% Y; j 查看预览用户头像(7分钟)
+ V% p6 ?& {) |9 P% N 选择用户头像(11分钟)+ U4 c2 b u- o2 @. r4 ^0 V6 u7 W
重新选择头像(3分钟)0 U( d5 @" a/ G( c0 x5 [8 S# s% ^
16我的页面（下）4 ^7 p# N/ q# u3 Q
文件上传api与后端接口讲解(5分钟)
/ H& w4 ]5 V+ s, [# {! b3 u _$ u token令牌讲解、实现头像上传(23分钟); E, G0 F& Q6 r. u! q4 H
引入图片剪裁实现头像上传(7分钟)
6 ~) G2 N6 i- Y3 R$ G: K 用户修改昵称(18分钟)2 l6 `0 y) F: @) T4 J
用户修改生日(17分钟)8 i' D, |% Q7 R7 f) ?) g) d9 c; A
用户修改性别(15分钟)" Q8 P$ u8 P7 n
17项目发布与上线7 q& U, X0 }. E
打包H5 web应用(5分钟)
7 x8 ]9 \4 v* V1 G2 {) L2 g* M' O g 购买云服务与简介(6分钟)' H! {6 [. b& z1 o/ t
配置安全组，重置密码，上传nginx，配置ssh(14分钟)
% p) e& d# y1 c3 K" m Y' M 安装nginx(9分钟)- j$ D- z7 f) [7 H8 R, a4 B
成功发布H5端web应用(14分钟)
1 J! L" B0 B7 D 微信小程序上传审核流程讲解(8分钟)
9 v/ u* A3 V, a/ u& |( T, V 打包安卓apk(8分钟)
$ T! k/ o$ {" K( F/ I" H5 @ 简述ios打包(8分钟)" b' I" N D! S. ?
18课程总结) ?2 {" e, c: i8 q( d+ G) O
课程总结与展望(9分钟)) S$ e n/ \4 X* l S& ?. f: v
* S1 K9 X+ c/ M: m0 h ( t/ E8 q. J" O- m8 y+ o7 Z
' m+ F9 N% |7 _0 {& n |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
