|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。/ }+ Y; z. d6 t% K7 P+ y) O/ x
课程目录：
6 |3 w+ r. E7 @9 }/ N) n6 [01导学
; I: h2 S9 r8 P7 {/ I4 ?) A1 _- G, E 导学(12分钟)
7 B5 O0 I; V: G+ |! `: a0 X2 G 学前必看！补充课：接口调用参数补充(6分钟)
! k+ g- ]' R5 a7 u, {3 r- S 基础框架NextHelloWorld(rar，513.7KB). p7 ^1 b, ?( U% u$ U$ B. I: f
超英预告最新源码(rar，8.7MB)
" C0 L6 A0 x* H; R/ e W; ]! N4 b) z linux工具与ngxin安装(rar，37.3MB)
! ^* ~7 b3 n" b2 I' H; R logo素材制作(rar，730.3KB). Z5 w" u9 x: ]" V
02课程介绍1 E0 x# F4 b- D$ f- q4 b0 }1 e% M& y
什么是 uni-app(4分钟)
9 ^" h6 ^0 d0 `7 a4 ~# |1 { 为什么要使用 uni-app(8分钟)# u) L2 x: u$ v- m6 Y B# S
app多端发布效果展示(7分钟)- }+ K* o: B4 C( T. b1 \
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟): M% g) I5 f9 H
微信、支付宝小程序开发工具调试(7分钟)6 u" i. O6 |! `
在Mac上使用Simulator进行调试(5分钟). }9 ~8 u+ @$ `# Q% ?2 [
03框架基础-上9 N+ }2 z* n3 c4 K. u- d7 V L4 s
简述MVC模式(9分钟)2 g8 T# ]1 _! |8 w* |
图说MVVM模式(5分钟)8 s2 j; R V3 h6 d( w$ a+ B9 o
通过代码阐述MVVM与双向绑定(12分钟)
) m. \! q1 R1 z- A: X# @+ I. O7 M JSON对象和数组的渲染(4分钟)- |8 J7 w0 m) }5 U
页面路由以及标题配置(11分钟)4 r( J, c/ Y" m/ [$ z( U! w G
宏观讲解项目配置文件(16分钟)0 l! }0 E+ h* u% r5 R
应用的生命周期(11分钟)
. _* ^- |8 I/ k6 G9 n5 o1 o& @ 页面的生命周期(14分钟)
B# n5 \; D! A$ m 固定像素px与响应式像素upx(12分钟)* Q& S ^5 |: D' c+ R! ^
在页面里使用{{}}表达式(7分钟)" t* p* g0 i9 O: W
04框架基础-下
8 z4 x, O' G) L' \ T* G+ N v-bind指令对属性的数据绑定(7分钟)
' g, w0 P" Y0 L 事件基础(22分钟)9 Q7 @) s5 X2 T4 x9 i& G, x; u
条件渲染 v-if与v-show(7分钟)
3 j5 g, ^: y( |6 c& ?4 k6 k: c# a 条件渲染 三元运算(4分钟)% t+ b2 g5 u4 k& F3 _) m4 @. m
列表渲染v-for的使用(13分钟)
# V* u3 ^# W5 h% b! O 指令key实现for循环的组件唯一性(12分钟)0 b2 P: i* m' s$ d2 _6 l2 b
嵌套循环的下标定义(4分钟)0 G. `0 E) _; N$ P
条件编译 - 上(10分钟)
% R0 I) y- q C' s$ o 条件编译 - 下(7分钟)' y; M. f/ f/ i9 @/ Y+ `
05样式与flex布局-上) [. [9 {: \( ^# }/ B2 P# k2 b6 t' K
flex布局介绍与模型(8分钟); D- v: Q% a( l. j
flex-direction 元素的排列4种方向(10分钟)
/ l2 D/ Y' N7 \8 z 导入外部css样式(4分钟)
6 Y7 q% y. r6 `5 Q" _* F: B% h6 y( H flex-wrap 元素的换行(12分钟)$ Q6 G' W( T6 ^5 n
justify-content 元素在主轴的对齐方式(14分钟)5 n% {& y% E3 f+ I6 h
align-items 元素在交叉轴的对齐方式(12分钟)
# |& h$ H/ P$ {1 k1 N/ M. Q06样式与flex布局-下5 f. u& K6 h# s! U: j& S
align-content 多轴线的对齐方式(13分钟)2 s& _3 G- j1 a/ C" l" w
flex成员项的属性 - order(4分钟)
4 s/ q$ u4 I5 c1 e) E# Y" d flex成员项的属性 - flex-grow(4分钟)
5 Z. n* G' a Q+ Y- b8 e flex成员项的属性 - flex-shrink(6分钟)% |! R: b! S% E+ H
flex成员项的属性 - flex-basis(4分钟)
! Y' T. i2 L- D; e; k7 o flex成员项的属性 - align-self(6分钟). |5 ? O" r% x
07开发首页-上
+ B: v: k _8 s( g4 I# F 创建项目，构建基础页面(8分钟) 免费试学/ F! _) A- v7 T4 e4 x
构建tabbar(13分钟) 免费试学
) o; Z5 j4 {7 J 设置全局page，简述view组件(6分钟) 免费试学" a: X0 u7 K3 [" n0 Y1 Y% {* }
使用轮播图组件(11分钟) 免费试学" x' |. X6 R) Q g0 O- n( G0 s
禁用原生导航栏达到页面全屏化(6分钟) 免费试学
: O K2 `+ B: p$ d, k: z! p 在线文档的使用(8分钟) 免费试学. f% T. N" L a4 v! R
request网络请求api讲解(5分钟)
& d% g9 `" H* }9 J6 n9 h& H* R uni.request动态获得轮播图数据(9分钟)
/ V& v" [ n* g! d7 a7 |. N0 ^; y$ R 箭头函数 this 作用域(4分钟)- W0 U! _+ O6 h" V* f+ F8 q" C5 g
渲染并且展示轮播图(5分钟)# w$ B1 a. Q0 p9 g
08开发首页-中
/ ~0 H- }1 h) V, k7 w 引入组件实现全局变量(7分钟)
) l# ~ j, h+ a7 _7 b 使用挂载实现全局变量(4分钟)# D$ J5 R) x" j% E# i) x G
在手机端进行微信小程序真机预览(6分钟)5 v2 {8 a+ E2 ^$ A1 g
微信小程序https使用事项(7分钟)
8 L1 @$ }8 q/ o+ s) ^$ G5 U$ i; i4 E 开发热门超英 - 标题(9分钟)
+ d% h {% V5 ?* w 开发热门超英 - 简述scroll-view(4分钟)3 V: S/ `$ d4 ?" I' M+ D0 b: W7 \
开发热门超英-使用scroll-view实现横向滚动(3分钟)& U1 V: T& t$ m- |, ?
开发热门超英 - 海报与标题(8分钟)0 N5 X! ^! u& p0 [5 t! z
开发热门超英 - 评分(6分钟)3 t4 ?& }. c3 W
开发热门超英 - 动态渲染数据(8分钟)/ R$ W6 y3 j5 J, n
09开发首页-下
5 E5 C* W, h5 }6 }; O0 T9 U 开发自定义组件(7分钟). r" M4 i* k3 m6 [! ?: m
父组件向自定义组件传入值(6分钟)
; C+ l e: Z0 F 完成评分自定义组件(22分钟)6 `: S C. [* z+ X% _+ B4 E M
视频组件video讲解(9分钟)
) O- j+ L! }1 |1 d8 B1 |; c5 l 获取预告片数据(3分钟)
2 T' \! r0 h: ?" d" A 动态渲染预告片(10分钟)
' r7 n% C0 R9 |6 @1 s9 z 猜你喜欢 - flex布局嵌套编写(18分钟); E* l v* E7 [2 v+ _
猜你喜欢 - 编写点赞css(7分钟)
1 } p2 \1 j- X 猜你喜欢 - 实现点赞动画效果(14分钟)
2 i" K- O% I, V) D6 z. o) Z! ^# q 猜你喜欢 - 还原动画(5分钟)
) J5 W9 U' Y0 Y- I/ j10开发首页-终
* c/ ~8 q& | \% g 猜你喜欢 - 动态渲染列表(6分钟)
" j7 V# y" w" D2 t# k! m9 g 猜你喜欢 - 实现动画数组(7分钟); C0 d8 e! a1 m9 h3 n9 C
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)) p) {8 g8 G( N' S) a' A8 C
猜你喜欢 - 开启下拉刷新(5分钟)
/ ?. f; p s& l 猜你喜欢 - loading交互api(8分钟)
& o3 g: q# S9 h* Q/ y11构建搜索页-上
( Q2 O5 W3 Y9 ~. ~5 T J% X# L 搜索页面 - 编写搜索栏(19分钟)
4 n+ B8 b: m+ X. Z$ N! H 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟): r2 C. l( _. J3 h2 O
搜索页面 - 动态获取最新预告并且渲染(9分钟), Q L* A# s, r T2 x; h
搜索页面 - 分页接口api讲解(4分钟)$ e3 E# G2 Y- H
搜索页面 - 搜索前置准备(6分钟)
* L/ M2 o& `4 x8 S6 t* O 搜索页面 - 执行搜索动态渲染(8分钟)7 i; I% E3 ?9 k& _
搜索页面 - 监听下拉实现分页功能(8分钟)
9 U! c6 |8 h9 w$ ^$ [ 页面路由api与传参(13分钟)
1 K5 k& b5 \. a/ ^ 页面跳转组件的使用(7分钟)1 n2 C, K' y" F, G! a( D# g
详情页 - 查询详情与视频渲染(8分钟)
0 D3 m' A+ H, M# V5 p( N: |12构建搜索页-下* m+ g8 L: w% {; a) n: w* @
构建预告片基本信息(16分钟)& ]% |- N! u! F
构建评分快与阴影效果(15分钟)( ^& T- K+ W9 u5 B
解决错误数据绑定undefined(5分钟)# A4 U* r3 `% Z
编写分割线以及剧情介绍(8分钟)& m* R; C" \# D( d
构建剧照与演职人员数据列表(10分钟)
8 x- O# ^% T8 ] 渲染剧照列表(8分钟)
# t. T0 _5 w- } 双拼数组构建演职人员列表(12分钟)6 D- Z4 M; [* p, `
渐进式导航栏设置(6分钟)$ `7 u1 H1 q' W; @* u
通过预览api实现剧照预览(7分钟)
& V, f1 ^5 ?; w' \, K9 e' ] 演职人员数组拼接预览(8分钟)6 C4 m- @0 P7 r) y$ \4 m) C
13电影详情页构建; y ^& u0 x4 }6 ?( |% X
自定义预览封面图(13分钟)3 W; _) H! T8 R$ S+ S
actionSheet接口api使用(6分钟)2 m/ c6 k6 L0 z! T' D
下载以及保存图片(15分钟)
, g/ s7 `2 j8 o7 b7 z, P7 v: y 配置https下载合法域名(5分钟)
- @# q% F1 M1 p" c* ?& o% ` 实现小程序中的分享转发功能(9分钟)" e- ~. j6 u' d2 C: M/ I
自定义导航栏按钮(11分钟)
' ?5 j% t5 v) F% Y0 G/ c' p 分享到朋友圈(9分钟)+ |5 u' G2 c; T1 C" p4 T& L
微信开放平台简单介绍(6分钟): w8 d0 Z+ g0 @
操作视频对象，提高用户体验(8分钟)
* k3 x) D5 N. `' _3 B$ ` 优化首页视频体验(13分钟)
' N% F2 I# A/ [5 x8 D1 i- j+ ^ I' L14我的页面（上）
9 A/ T0 ~! O: C" Y- V 开发个人页面-header与导航栏设置(9分钟)
4 A2 B6 u: K; g# z# S" I: a* P% Q 发个人页面-用户未登录和已登录的页面展示(9分钟)
! I: L6 v) U; p P0 m; R 构建注册登录页面(8分钟)
! e9 j" Z- _0 N" X4 R2 K" t button与form组件讲解(6分钟)
" u, o- M/ h. q: w) }6 r* K 实现一键注册登录(12分钟)
2 R0 m, |6 ^7 R; @ 通过缓存切换是否登录状态(9分钟)- @6 F; o2 j$ ]* _" ^' x' K0 J
构建用户账号页面(9分钟): W# O' n, s6 h
清理所有缓存api(4分钟)
2 M5 z/ p& E7 ~% y 用户登录错误提示与方法挂载(7分钟)
% W8 d$ I4 E; B! y 渲染用户信息数据(6分钟)
6 \! X9 Z/ s6 D1 b' T; O( t2 B15我的页面（中）
7 @# v N& H5 x8 }5 |( _" | 用户退出登录(6分钟)' M% G+ }( H3 X! }. U% g
第三方登录讲解与页面构建(16分钟)
& y+ r/ g& I+ H9 r# o$ D* B7 w 第三方登录-小程序端实现微信登录(15分钟)
}, B1 T5 V; y% Z+ W, e 第三方登录-后端登录业务梳理（辅助理解）(10分钟)1 V& y9 h- F+ h/ m. `% v Z
第三方登录-app端授权登录(8分钟)/ [* z% o' A7 u
第三方登录-app端获取用户唯一id及信息(12分钟)
* c! E7 q0 G# I7 Y) Y/ z* g 第三方登录-app端执行一键注册登录(7分钟)
7 C# p0 ^2 H, u9 g/ h P 查看预览用户头像(7分钟)
- I) l( ^9 I; U6 u9 y" I1 x& p8 D+ {" M 选择用户头像(11分钟)
1 E, Z8 t; a2 b/ H# m% n2 I5 d 重新选择头像(3分钟)! l8 w+ R* W) L" ]8 R7 ?
16我的页面（下）( `; _1 A. G$ M
文件上传api与后端接口讲解(5分钟)+ V% F8 e1 Q' _7 B% l2 d
token令牌讲解、实现头像上传(23分钟)
8 j2 Q( s2 D& S. B3 e 引入图片剪裁实现头像上传(7分钟)7 W- A/ ~ L2 O9 [ Q+ D
用户修改昵称(18分钟)9 y0 Y; d0 `" Y( M* {
用户修改生日(17分钟)
2 o8 F# r/ [; g5 x4 B6 O! j 用户修改性别(15分钟)
6 F1 M% F, g/ [3 [) ]/ M17项目发布与上线
3 e8 a# S, I7 R6 v9 p. c; X 打包H5 web应用(5分钟)# U' A; x+ e, Y j2 j; G! l3 g( k5 [
购买云服务与简介(6分钟)
/ z6 d$ B( b4 M& E% J 配置安全组，重置密码，上传nginx，配置ssh(14分钟)1 W* b+ l0 M" p% }7 H
安装nginx(9分钟)
8 g3 g1 p. V6 \- ]1 y6 I; s: N 成功发布H5端web应用(14分钟). P: w/ U' W7 |) Y
微信小程序上传审核流程讲解(8分钟)/ Y* j- y9 N! B/ m5 I4 Z
打包安卓apk(8分钟)$ Z( {& ~2 A! F0 y8 Z4 {
简述ios打包(8分钟)
9 D1 [6 ~) D# |% V9 D18课程总结% S9 D$ w0 s g1 x; Z
课程总结与展望(9分钟)- D4 [7 r( ?( i. s b
4 {$ r5 Z' T% j& E! g5 r1 w& M . v9 r0 l5 q& S
& D3 d7 d) U- x# M4 G
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
