|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
' g$ j7 A" h. `+ U! `课程目录：' X0 a, p3 T2 V
01导学# f; k* O# \2 O. K6 [$ [& e* ~
导学(12分钟) % ?! a3 t2 M. [7 H: w6 Y8 ~
学前必看！补充课：接口调用参数补充(6分钟)
1 C: O+ m) N4 o6 p& ? 基础框架NextHelloWorld(rar，513.7KB)
7 l( Z7 n" n* B 超英预告最新源码(rar，8.7MB)
7 r( S8 m4 ~! `8 W linux工具与ngxin安装(rar，37.3MB)5 v8 X5 H/ E; \6 N) w/ B
logo素材制作(rar，730.3KB)( }2 [+ X( I, Z" L' W# v. P
02课程介绍2 u, y1 `3 ?0 {( k* o
什么是 uni-app(4分钟)
' Y, @: H0 i4 p" [. {/ o 为什么要使用 uni-app(8分钟)
, ^, b. `) {0 l app多端发布效果展示(7分钟)
6 B; `( Q! @2 W Z 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
7 `$ F( H7 F( | 微信、支付宝小程序开发工具调试(7分钟)$ _$ F! ^ Y) S" s
在Mac上使用Simulator进行调试(5分钟)
# R/ G3 t, m% f03框架基础-上; c+ M- G( x' X6 [3 K+ \# k. G
简述MVC模式(9分钟); u/ {0 z$ c- q! y
图说MVVM模式(5分钟)" |- N' n p o/ A2 }
通过代码阐述MVVM与双向绑定(12分钟). H4 @1 F& d/ P8 c
JSON对象和数组的渲染(4分钟)! r4 O. w" X" A! q
页面路由以及标题配置(11分钟)
! ]: z* K" |- z$ B8 g4 r4 M/ s 宏观讲解项目配置文件(16分钟)
1 P& T0 J% D0 i* R* t* X 应用的生命周期(11分钟)
. B( R4 j5 M; t- I F6 ~$ H 页面的生命周期(14分钟)/ t3 e' [, ^$ l2 l/ D
固定像素px与响应式像素upx(12分钟)8 v. |, P3 ^( Z" v7 K* O+ O* v
在页面里使用{{}}表达式(7分钟)2 h1 w$ N. p2 Q- o% ]2 \" T
04框架基础-下
9 s5 O2 y& r- P! ?% Z. K v-bind指令对属性的数据绑定(7分钟)
7 e; b7 w; l" a! ]# n 事件基础(22分钟); h0 o/ q2 p4 [7 @6 _, k/ a
条件渲染 v-if与v-show(7分钟)5 E2 }5 E, s1 }9 H3 J |6 d* C E
条件渲染 三元运算(4分钟)
% \7 {, D+ J2 s- K! K 列表渲染v-for的使用(13分钟)
( A/ l5 L1 U3 F# h/ @* n! f7 F; K! @ c 指令key实现for循环的组件唯一性(12分钟)
. d+ t7 ?. y. l! Z+ C1 b! w9 B 嵌套循环的下标定义(4分钟)0 |7 a+ b* b; h
条件编译 - 上(10分钟)
9 Q9 p" {! ]% k7 r) S8 a 条件编译 - 下(7分钟)
' q, N/ I5 U3 s05样式与flex布局-上
q8 \ Z% p2 t flex布局介绍与模型(8分钟)
8 K7 Q3 Y5 T6 M' e( h/ y" f flex-direction 元素的排列4种方向(10分钟)- k/ K5 r9 @7 n
导入外部css样式(4分钟)2 m' @) Z! G* X6 L. T( |* L m
flex-wrap 元素的换行(12分钟)
% Y" w. t9 `0 w( U. z justify-content 元素在主轴的对齐方式(14分钟)
* t; M }& v: h* V1 G3 \/ s9 H align-items 元素在交叉轴的对齐方式(12分钟)
1 q L1 T: j; i5 h06样式与flex布局-下
/ ]( E) R* t! W align-content 多轴线的对齐方式(13分钟)
8 H$ V+ A9 u6 [; s$ @8 x% M) ] flex成员项的属性 - order(4分钟)
^; m+ g' B5 \3 }; p. @ flex成员项的属性 - flex-grow(4分钟)3 c! \# N' W/ q
flex成员项的属性 - flex-shrink(6分钟)" P/ ^1 O0 |! K; b! v! p8 \- p
flex成员项的属性 - flex-basis(4分钟)" u9 V' u5 k2 W" d. f1 ~# c1 \5 o
flex成员项的属性 - align-self(6分钟)
2 Q# }: M& H6 G) M5 e6 M X5 P07开发首页-上
/ z, G( h; u. f: B! D2 p 创建项目，构建基础页面(8分钟) 免费试学
6 `8 M- y r5 L& c+ i U 构建tabbar(13分钟) 免费试学
) |- r( b2 b7 U 设置全局page，简述view组件(6分钟) 免费试学. p, ]; ]7 r0 [2 m% `
使用轮播图组件(11分钟) 免费试学
5 G# a9 x, ?! W! T 禁用原生导航栏达到页面全屏化(6分钟) 免费试学) m$ s3 T: P' ]
在线文档的使用(8分钟) 免费试学8 d( | E* {! I, |& t
request网络请求api讲解(5分钟)- d3 ], ` b5 @8 }9 Z- I9 ^
uni.request动态获得轮播图数据(9分钟)
1 E7 Q# x* x" L- r/ R 箭头函数 this 作用域(4分钟)
5 F9 [$ }( l" D V. x 渲染并且展示轮播图(5分钟)
7 A6 h6 h+ k3 h' |/ w0 V08开发首页-中1 `7 s; A2 d _ j3 L% a& R: S; S
引入组件实现全局变量(7分钟)( d" B0 S/ h3 J* s3 M M
使用挂载实现全局变量(4分钟)
' }4 h% O' w* I 在手机端进行微信小程序真机预览(6分钟)
9 v* N) [6 F5 g: d 微信小程序https使用事项(7分钟)
' D' S. ?& [' p' N( K' X& B. D5 O7 f" Y 开发热门超英 - 标题(9分钟)6 X6 m& J5 y8 _+ {' y7 D. \, x
开发热门超英 - 简述scroll-view(4分钟)
1 U. {1 f& h5 R; N" _5 x% a% W. e 开发热门超英-使用scroll-view实现横向滚动(3分钟)2 y T! l- E8 |3 j: @! a
开发热门超英 - 海报与标题(8分钟)5 e R) [/ G H7 u: o1 d
开发热门超英 - 评分(6分钟)8 O. v4 y7 P; ^0 O7 o
开发热门超英 - 动态渲染数据(8分钟)8 f G4 {# @3 o: j U. s
09开发首页-下* K% M( a% o& U
开发自定义组件(7分钟)
0 R# D- ^6 Y* E 父组件向自定义组件传入值(6分钟)
& }! a4 A5 [/ O/ M 完成评分自定义组件(22分钟)+ Y) ^$ f/ l# ?
视频组件video讲解(9分钟)( j6 B; f7 t" w8 c$ n( N( f
获取预告片数据(3分钟)
* z8 Z7 s+ f7 `2 ]' a5 J 动态渲染预告片(10分钟)' g# \/ ]' O7 ~
猜你喜欢 - flex布局嵌套编写(18分钟)! D) z9 \* _/ x7 C( U
猜你喜欢 - 编写点赞css(7分钟)
: M% @. S% J4 V/ u/ [# c$ I" |1 X( C 猜你喜欢 - 实现点赞动画效果(14分钟)
1 w# M' M. _9 \. N) v- u/ w 猜你喜欢 - 还原动画(5分钟), j& j. j# }- { F
10开发首页-终
1 e* O5 p7 l- k% F. q/ c 猜你喜欢 - 动态渲染列表(6分钟), F3 u, W0 O+ Z2 ? i# Q
猜你喜欢 - 实现动画数组(7分钟)
1 r: K6 u3 ?% b 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
/ Z' x% i, x% V5 C0 f 猜你喜欢 - 开启下拉刷新(5分钟)
& S V. c( N0 e$ h1 c9 _ 猜你喜欢 - loading交互api(8分钟)( \3 F# s8 {4 @% U% Y0 G
11构建搜索页-上
" b+ k% s4 s+ i- d5 n2 _ 搜索页面 - 编写搜索栏(19分钟)
4 X' o5 @4 K: u1 _0 k: K 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)3 n* `4 w, o; }. Q1 l$ L+ B. K
搜索页面 - 动态获取最新预告并且渲染(9分钟)
, _: F& y3 p5 u7 `! | 搜索页面 - 分页接口api讲解(4分钟)
0 u2 m- I; e1 Y$ J$ L& N 搜索页面 - 搜索前置准备(6分钟)$ n2 | C3 O$ N! ?" h, V
搜索页面 - 执行搜索动态渲染(8分钟)! Y3 j& n0 v) z: j
搜索页面 - 监听下拉实现分页功能(8分钟)$ O- v* ^* B# a
页面路由api与传参(13分钟)2 U0 C' c5 t D; z
页面跳转组件的使用(7分钟)
4 a2 _- F& g1 B 详情页 - 查询详情与视频渲染(8分钟)
0 b5 W9 z( Q( o1 o12构建搜索页-下2 c# I! N$ { w! y5 S4 D* Y' L
构建预告片基本信息(16分钟)
, b ~. p- @4 c8 H: g+ l 构建评分快与阴影效果(15分钟)
3 d2 l3 R! p o7 }* [9 y* B0 h2 q 解决错误数据绑定undefined(5分钟)
* v" Y+ _, w$ a8 F% s) V 编写分割线以及剧情介绍(8分钟)
8 U# ]9 y1 ^7 ?% H' Q0 Y; |4 a; F 构建剧照与演职人员数据列表(10分钟)
% V9 t- a9 A3 b i4 F/ N 渲染剧照列表(8分钟)& U2 W* x3 I' ^5 Q( U
双拼数组构建演职人员列表(12分钟). F7 ^; i! Q& o; x( R
渐进式导航栏设置(6分钟)' ]. @0 e, y. X5 ?% P
通过预览api实现剧照预览(7分钟)
% k0 b& P9 O) `3 X! E7 b ` 演职人员数组拼接预览(8分钟)! F! g/ A. q9 e( B K( c& N
13电影详情页构建! R0 D: ]$ f9 X6 Y3 X6 b7 H( I
自定义预览封面图(13分钟)9 S0 ~# c5 H% Y) m$ A
actionSheet接口api使用(6分钟)
i& j+ d1 {/ l) y1 A 下载以及保存图片(15分钟)4 M7 u9 w# B; N
配置https下载合法域名(5分钟)
' e" W+ }7 s* w+ Z3 f2 m _ r" R4 P 实现小程序中的分享转发功能(9分钟)/ d, [5 ]: R4 P! ]" Y9 g
自定义导航栏按钮(11分钟)
5 z" c& y# e& Y 分享到朋友圈(9分钟)
, }8 U3 ?6 z' X- f6 o 微信开放平台简单介绍(6分钟)
0 e4 C" a+ h0 D7 u 操作视频对象，提高用户体验(8分钟)
3 @. U& Y6 l, k: j 优化首页视频体验(13分钟)
7 B. l8 C' |: R4 L14我的页面（上）
) V3 z* O4 B+ p/ d 开发个人页面-header与导航栏设置(9分钟), N9 {- ?$ l' x# Y, n5 A
发个人页面-用户未登录和已登录的页面展示(9分钟)! D; f1 n4 v: h8 X! g( j
构建注册登录页面(8分钟)
3 a2 h: w" T& x2 u* S" W button与form组件讲解(6分钟)
- a( t( E9 M. P& [ I) k9 |/ M# w 实现一键注册登录(12分钟)
/ z" F8 F- i( m' v 通过缓存切换是否登录状态(9分钟)
* z! g( e8 w9 Q 构建用户账号页面(9分钟)
: L: G: r; K1 Y/ Y/ I 清理所有缓存api(4分钟)
9 l( X* Q( @3 R: _% ` 用户登录错误提示与方法挂载(7分钟)2 g2 }$ @) O N$ ^
渲染用户信息数据(6分钟)
4 M( ~$ h& P+ B# g15我的页面（中）7 O9 n& A9 J8 b: r) k* t4 J
用户退出登录(6分钟)
0 z. r. @. A" A5 S: V 第三方登录讲解与页面构建(16分钟)
% B5 z( u9 ?. G" i1 q. X 第三方登录-小程序端实现微信登录(15分钟): Q. |8 Y* M# h( P* E& f3 m
第三方登录-后端登录业务梳理（辅助理解）(10分钟)
" ~5 ^, X4 Q: Y1 p: c O 第三方登录-app端授权登录(8分钟)
- N4 z$ }" f; y$ ? |3 K+ T 第三方登录-app端获取用户唯一id及信息(12分钟)2 m) j0 ?2 d' Z2 l. m8 U0 c" m
第三方登录-app端执行一键注册登录(7分钟)4 q, \$ m) e6 r8 |5 x
查看预览用户头像(7分钟)6 C- Y* w# g) r3 L0 }" |+ g$ p
选择用户头像(11分钟)
% z9 ^0 o! |) c& X( h 重新选择头像(3分钟)
; R2 q3 k P6 {0 v1 [16我的页面（下）" f( t0 q8 t8 V: r
文件上传api与后端接口讲解(5分钟)
# J! f9 U1 {. p token令牌讲解、实现头像上传(23分钟): X# u* m O3 S% r- v
引入图片剪裁实现头像上传(7分钟)
9 ]' W: G0 d! N+ j. p! n @2 f: } q 用户修改昵称(18分钟)
$ v6 }4 J2 X0 i; e2 G2 g5 s1 H; x. I3 u 用户修改生日(17分钟)
/ D( ]1 u# H+ I# @. R 用户修改性别(15分钟)
: z8 j% M3 o8 M8 a17项目发布与上线
. \, D( B) p" Y6 I- _ 打包H5 web应用(5分钟)& ~6 Z; l; D: ?/ s0 N
购买云服务与简介(6分钟)& J+ u4 V O( R9 d& d2 ]
配置安全组，重置密码，上传nginx，配置ssh(14分钟)4 J/ J, `% N" d
安装nginx(9分钟)9 e* W/ S$ W4 B' N j' L
成功发布H5端web应用(14分钟)" z9 Q; h: \9 F0 U; A5 j
微信小程序上传审核流程讲解(8分钟)/ n( a# T, Y6 H9 v8 |
打包安卓apk(8分钟), `' t4 g7 k* |4 P% I' y" B6 K- X
简述ios打包(8分钟); J5 T* _+ Y2 c% j" Q4 }% ]6 I
18课程总结
R. q) l2 `" l- ?- l' T' D5 o/ z 课程总结与展望(9分钟)
% P; l8 S# Q5 T& f* w& q; H& }4 I, `/ z
# O$ ^9 A9 ]+ ~0 N3 C
' d# z3 W1 I, ? `2 f |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
