|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
( J+ _+ ^/ v% H$ v; s课程目录：
" |8 _4 e6 p" _3 i' x7 L; X0 I01导学) N5 F/ s+ d m8 d% J. b1 p* N
导学(12分钟)
7 y+ x$ u8 r& w 学前必看！补充课：接口调用参数补充(6分钟) y0 _& a! u6 w5 f+ t5 s
基础框架NextHelloWorld(rar，513.7KB)8 c0 Z, V# W6 a8 u
超英预告最新源码(rar，8.7MB)
$ \# T K5 F) E* c5 H: N! d6 o linux工具与ngxin安装(rar，37.3MB): B2 O/ Y# Q. C0 n) W
logo素材制作(rar，730.3KB)
1 c; F1 a2 l% q) y$ u% Z02课程介绍0 A& w D- O* w" D, A2 {0 ? }8 c
什么是 uni-app(4分钟)" d9 G$ G" L8 a! o, n$ A/ K# E p
为什么要使用 uni-app(8分钟)
( @2 x4 k8 R- P- a0 e9 Z app多端发布效果展示(7分钟)
( i. t: D. x0 R8 h 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
/ C9 W9 n0 ~2 g7 ^ 微信、支付宝小程序开发工具调试(7分钟)" g( y% Z2 c' x% F
在Mac上使用Simulator进行调试(5分钟)! a& q9 [4 m+ s! T) ?5 `+ Q
03框架基础-上
, e1 U; q4 w2 |! M% y 简述MVC模式(9分钟): d- r* c9 F* @3 Y' _
图说MVVM模式(5分钟)
: m! ]' q- `3 r! ~ 通过代码阐述MVVM与双向绑定(12分钟)% E6 w* ~6 E; G8 H, ]9 l% G
JSON对象和数组的渲染(4分钟)
( L4 p# h/ }2 K3 o2 e; } 页面路由以及标题配置(11分钟)
, |: |* K6 J3 L' S. G8 C0 a 宏观讲解项目配置文件(16分钟)/ H9 N8 _/ D/ l: p$ H$ n" c. w& a
应用的生命周期(11分钟)
! Q7 L; w; w) r& {' h* X8 O& h# a- }0 o 页面的生命周期(14分钟)9 R, n4 L; Q' |' M3 ~. H' M
固定像素px与响应式像素upx(12分钟)8 m, I* N( O0 }6 t( x# V& C' ]
在页面里使用{{}}表达式(7分钟)
" e2 Q& ]" I! c4 G04框架基础-下
% h, ?' v* k9 Y. j! a v-bind指令对属性的数据绑定(7分钟)
! N4 {5 g. t2 @" ]( n 事件基础(22分钟)
$ K5 n1 v* m8 I 条件渲染 v-if与v-show(7分钟)$ K" R3 U5 ?2 ]3 P' A$ T4 j% t
条件渲染 三元运算(4分钟)9 s1 v/ D# D( R( G: [
列表渲染v-for的使用(13分钟), g: D' Z$ }4 [
指令key实现for循环的组件唯一性(12分钟)' f, @( u0 O; Z, B
嵌套循环的下标定义(4分钟)
. [3 s. E& P" O2 ]: x I& \3 v2 x0 b 条件编译 - 上(10分钟)
5 D3 y6 @3 k( ?6 {, L8 f 条件编译 - 下(7分钟)( f; }) i& w a) [& K8 D1 c" a
05样式与flex布局-上
7 L3 S* n0 q% ]- @; z8 O+ Q# _- f flex布局介绍与模型(8分钟)& {6 A7 C% @2 W1 H3 G. H
flex-direction 元素的排列4种方向(10分钟)( r! p) s" `/ }
导入外部css样式(4分钟)
' j: |3 B1 ~ T flex-wrap 元素的换行(12分钟)
- v8 G0 i& [0 b: R0 b' M/ V( z7 q& A justify-content 元素在主轴的对齐方式(14分钟)
9 S" ~% m, B3 L6 t/ q, s( f7 [ align-items 元素在交叉轴的对齐方式(12分钟)& O- @# ~$ t; D/ |
06样式与flex布局-下7 S; g$ J( j$ h3 ~+ M* ^# K, E
align-content 多轴线的对齐方式(13分钟)6 T% {5 P! d4 ^5 b, O
flex成员项的属性 - order(4分钟)5 z7 G7 O' x, ^2 e
flex成员项的属性 - flex-grow(4分钟)
$ J1 p4 N# E; L9 h flex成员项的属性 - flex-shrink(6分钟)' h5 s6 m( `5 X
flex成员项的属性 - flex-basis(4分钟)" i0 B0 ^$ F0 e ?$ W! k
flex成员项的属性 - align-self(6分钟)1 u6 k7 i0 i. _ ^
07开发首页-上5 u0 a* I, B8 c2 Y% e2 a0 v+ J: o
创建项目，构建基础页面(8分钟) 免费试学5 i( c! z: v1 S, k# R8 h: Q5 F
构建tabbar(13分钟) 免费试学
5 O2 n7 L! @5 g0 H 设置全局page，简述view组件(6分钟) 免费试学
, X* }7 H$ V0 A4 {' f 使用轮播图组件(11分钟) 免费试学/ H& w* p. b E
禁用原生导航栏达到页面全屏化(6分钟) 免费试学' ?. ?' u2 i8 f7 V8 N
在线文档的使用(8分钟) 免费试学
$ ^7 H0 }5 k$ Q0 | request网络请求api讲解(5分钟)
5 x- u* t: V/ h uni.request动态获得轮播图数据(9分钟)
* j1 b. k7 M& e' ]8 m. h1 w; }" a 箭头函数 this 作用域(4分钟)- ~8 s$ d2 h, ]8 j% ^
渲染并且展示轮播图(5分钟) U5 m! a6 k/ N4 M# l
08开发首页-中
: Q& M1 U$ U8 j: s4 F 引入组件实现全局变量(7分钟)
6 W4 {, j) m, O# ?& y 使用挂载实现全局变量(4分钟)" ]/ V9 G/ F, ]0 V
在手机端进行微信小程序真机预览(6分钟)
( c' K! Q q2 E3 d4 C) k& r 微信小程序https使用事项(7分钟)& l F' A$ |3 D, [+ ]6 h
开发热门超英 - 标题(9分钟)
9 B/ }3 u5 u4 w( L% q: L8 h 开发热门超英 - 简述scroll-view(4分钟)/ L0 y7 Z4 `1 o8 O
开发热门超英-使用scroll-view实现横向滚动(3分钟)
2 E/ r+ c! n, u0 o* p* N 开发热门超英 - 海报与标题(8分钟)
2 `+ U# H8 P8 V) ~7 ~ 开发热门超英 - 评分(6分钟)
' v4 Q7 a8 V6 e- w; R# ?% l0 z 开发热门超英 - 动态渲染数据(8分钟)
8 }2 ?4 |7 E8 v& I6 _: J5 J% M% L09开发首页-下
+ n. \# n4 o" P9 V/ c. @ 开发自定义组件(7分钟)
8 U" u' t, @7 N" |. @( z# ^7 ? 父组件向自定义组件传入值(6分钟)1 R( g3 x) c* U# N& X
完成评分自定义组件(22分钟)
& @2 F5 S. o- y* ?7 s6 i2 r- f 视频组件video讲解(9分钟)
8 ~; ?: n f5 I 获取预告片数据(3分钟)
2 @! u+ a5 i; {3 O( g2 Y% g 动态渲染预告片(10分钟)
) h! I# k7 ~7 U, s6 Z4 I& y( ? 猜你喜欢 - flex布局嵌套编写(18分钟)
7 v7 q5 V$ ~+ M! z 猜你喜欢 - 编写点赞css(7分钟)
5 b0 \% Q1 N5 B* r9 C d' C 猜你喜欢 - 实现点赞动画效果(14分钟)3 ^9 l% {( O& r" O0 [) _) \" R
猜你喜欢 - 还原动画(5分钟)
, ~# Q6 D- H6 n2 p9 ]7 J) Z$ Z10开发首页-终+ u4 s" Q& Z% i/ V
猜你喜欢 - 动态渲染列表(6分钟)
. ^7 z& T/ L; \0 k6 @8 u 猜你喜欢 - 实现动画数组(7分钟)6 x* u% ]- |1 H2 r
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)3 n$ L# ~" v$ n# [4 {0 k
猜你喜欢 - 开启下拉刷新(5分钟)6 E: h3 a4 q6 D3 y) P: R& X( O" m
猜你喜欢 - loading交互api(8分钟)8 t4 i1 R0 o& s& ]! W/ ]
11构建搜索页-上3 v$ p5 g; E( h! @) J9 c
搜索页面 - 编写搜索栏(19分钟)9 c( W0 R n+ P8 B
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
& L$ l/ x! [/ r/ l$ q3 s$ M/ B 搜索页面 - 动态获取最新预告并且渲染(9分钟)
: i8 H6 O5 a) ?4 g 搜索页面 - 分页接口api讲解(4分钟)
% P% M7 _: S5 p2 u" y4 ?' F4 B 搜索页面 - 搜索前置准备(6分钟)( Q/ D2 ]/ Y/ \8 ]) v5 `) }- ^* z
搜索页面 - 执行搜索动态渲染(8分钟)
* `8 ^ |% q" x" } 搜索页面 - 监听下拉实现分页功能(8分钟)& q' [; D% p; k8 v( B* F& d
页面路由api与传参(13分钟)
, p+ Z* h ?' ^( K. H6 t* q7 ?% ?: @ 页面跳转组件的使用(7分钟)
8 {2 c+ i: F. r 详情页 - 查询详情与视频渲染(8分钟)
' [8 A- R) ?. I12构建搜索页-下
( B* @7 P$ w* D 构建预告片基本信息(16分钟). n0 z$ C6 ]& J) }- J0 _
构建评分快与阴影效果(15分钟)
c. V; O4 e9 l+ v# w. f 解决错误数据绑定undefined(5分钟)& ]$ ?( ]- b$ G3 C
编写分割线以及剧情介绍(8分钟)0 H: k, q/ Y: U/ ]* v* R% [
构建剧照与演职人员数据列表(10分钟)4 E: \& b) U9 d3 A! ~" Y. n+ H
渲染剧照列表(8分钟)
' L' ?: ~1 h8 q# ^ 双拼数组构建演职人员列表(12分钟)
] X3 G( }# }6 l7 g1 D 渐进式导航栏设置(6分钟)3 M" h% u% T9 j0 _) N
通过预览api实现剧照预览(7分钟)% z" N2 K8 R) o- s' s
演职人员数组拼接预览(8分钟)
! ?+ P; G O l4 ?4 R13电影详情页构建- ?5 ^2 v4 m6 B6 C7 d% V& [
自定义预览封面图(13分钟)
; O# [+ T1 ?7 w7 A! v) i actionSheet接口api使用(6分钟)
( O3 x* R+ k$ A2 I 下载以及保存图片(15分钟)/ x* J& X7 @' E9 Z+ H) c; g/ e
配置https下载合法域名(5分钟)
* J" x8 N; Y4 K6 X; s! w J. x 实现小程序中的分享转发功能(9分钟)( C b4 \- A: R
自定义导航栏按钮(11分钟)0 Y. M5 t7 u/ u+ P/ r2 J
分享到朋友圈(9分钟)' T' R0 A, Y1 K# z
微信开放平台简单介绍(6分钟)
6 g4 u' \, G; W* e6 q8 O# G2 f9 w 操作视频对象，提高用户体验(8分钟)8 ~- c* F/ L4 L6 T
优化首页视频体验(13分钟)
# z! n% ~7 b) C14我的页面（上）
8 @/ }4 {# N0 _4 |# z; I$ v 开发个人页面-header与导航栏设置(9分钟)
/ H/ o, Y9 G9 a0 z" m 发个人页面-用户未登录和已登录的页面展示(9分钟)
$ Y# e( [0 U X- R 构建注册登录页面(8分钟)6 X7 {* e' }- L- B( A! A4 t7 y
button与form组件讲解(6分钟)
- T- ^' w. J0 T/ v; \/ J" q+ F 实现一键注册登录(12分钟)
& |+ W5 L* l# h3 Y2 ^5 ] 通过缓存切换是否登录状态(9分钟)
6 T; O. Z8 N. j8 d% \+ E' l 构建用户账号页面(9分钟)
3 d! H; ?% @; B+ s _ I 清理所有缓存api(4分钟)
: _: [' b" n0 _7 F* p5 e3 b, c 用户登录错误提示与方法挂载(7分钟)" H$ e/ ~: l& Y/ V
渲染用户信息数据(6分钟)* b1 q: T0 s& _3 N
15我的页面（中）0 c& C& V; p3 e( F; ?2 O e
用户退出登录(6分钟)* d2 a: t- h1 y p
第三方登录讲解与页面构建(16分钟)7 Q* c( v" w, P, P9 g) p
第三方登录-小程序端实现微信登录(15分钟)$ P2 {, n. O N `: v2 ?) f! d$ J& t
第三方登录-后端登录业务梳理（辅助理解）(10分钟)' A, J9 _& h6 Y/ ?) r
第三方登录-app端授权登录(8分钟)
1 O& i" m0 {6 n# H, G. Z 第三方登录-app端获取用户唯一id及信息(12分钟)
9 }$ F# j$ M& h1 _/ I 第三方登录-app端执行一键注册登录(7分钟)
+ `8 ^1 W( Q& I 查看预览用户头像(7分钟); Q, b* x9 [, K) _& n2 g
选择用户头像(11分钟)
3 T6 O% _3 K8 u+ x, X9 n 重新选择头像(3分钟)
8 a7 `2 S! X0 W# j- Z7 O16我的页面（下）9 x" O+ H* P. s! y" s+ C
文件上传api与后端接口讲解(5分钟)
" z; h2 |5 F9 J! ^ e5 b0 \8 W token令牌讲解、实现头像上传(23分钟)
8 ^( U5 i9 g |/ C8 V. C+ s1 g+ m 引入图片剪裁实现头像上传(7分钟)7 G+ I7 G: L$ e# x+ c n9 j( E( v
用户修改昵称(18分钟)
5 \4 k. X! ]& B" n# ]6 { 用户修改生日(17分钟) w! a/ s7 ~* i4 K: p
用户修改性别(15分钟)
: K. M) ~% V; j8 o) }# M17项目发布与上线0 p' R" n& h! } k: }& E3 Q) E* l k
打包H5 web应用(5分钟)/ c3 ^2 X' f, t. v
购买云服务与简介(6分钟) j4 }- y2 G; f1 b
配置安全组，重置密码，上传nginx，配置ssh(14分钟)
# d/ N- ~$ |% ?$ g 安装nginx(9分钟), `$ c; `7 ^) Y7 ?" K
成功发布H5端web应用(14分钟)
$ w/ i& B8 W+ ?0 x7 x: T& z 微信小程序上传审核流程讲解(8分钟)
( P p* {2 \. ~! s) `* k 打包安卓apk(8分钟)( O) k5 P5 K/ w6 H
简述ios打包(8分钟) O1 e5 D& g, A: |! ]/ _" E0 h; K
18课程总结
/ _& W; \2 }, T9 B* B. _3 A/ q$ }, O 课程总结与展望(9分钟)
! U- J6 P' ]; K W# c' {# c& k" s3 F
3 Q$ z- ~# S# k- B ' G0 w2 R8 L) b" ~
9 T q5 N6 W9 P, G& ^6 q- v |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
