|
|
uni-app是MVVM框架,所以我们会对MVVM思想做简单的介绍,随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
$ c$ i' L x3 i1 R5 l课程目录:
$ ]1 W' H7 A4 h n01导学( y- i4 v( ~% S Y6 b
导学(12分钟) r/ b5 ]# C$ t4 ]
学前必看!补充课:接口调用参数补充(6分钟)
3 f3 Z( n6 D8 {& G 基础框架NextHelloWorld(rar,513.7KB)' }) R" L4 J& z: D! x
超英预告最新源码(rar,8.7MB)3 z9 W) G# \8 L& L1 d
linux工具与ngxin安装(rar,37.3MB)
' X' w+ O3 ~* o0 ~ logo素材制作(rar,730.3KB)
* F8 u+ g' L" o( ?5 I02课程介绍
, V+ W0 G9 _7 W: q8 V$ k1 w N0 I 什么是 uni-app(4分钟)
; h. c7 T; j( J: N: n 为什么要使用 uni-app(8分钟)
5 j$ ?1 V" _6 a! F# {$ Y8 _" d app多端发布效果展示(7分钟)
% |5 I* K9 L) j4 S% M4 t" x 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)- H0 u) {5 ^7 b$ E
微信、支付宝小程序开发工具调试(7分钟)
, F3 G) E0 ?4 ^! b# q 在Mac上使用Simulator进行调试(5分钟): D; A* n$ h2 d, |9 Z6 }+ z
03框架基础-上
& d3 m& J" G! {" }; T 简述MVC模式(9分钟)
! `2 \% k/ I b$ Y5 C 图说MVVM模式(5分钟)' ^8 t* M7 y* z
通过代码阐述MVVM与双向绑定(12分钟)
6 F! [ b! Z! V$ ?: { JSON对象和数组的渲染(4分钟)
$ a5 b4 P- D! I; k( N* W' q- Z 页面路由以及标题配置(11分钟); G( {8 `1 U* K4 o; v3 P, x3 {
宏观讲解项目配置文件(16分钟)( Z% \6 |+ \3 W" S1 O- t
应用的生命周期(11分钟)
' P& Z$ V6 M! N6 g a9 s 页面的生命周期(14分钟)! }9 H: N; @( M
固定像素px与响应式像素upx(12分钟)
8 H$ T. E4 V6 r; y/ e 在页面里使用{{}}表达式(7分钟)) B7 b; f, N \& ^- N, o8 k
04框架基础-下
6 _" X4 N2 }- d" r. k* F4 Z9 X- ? v-bind指令对属性的数据绑定(7分钟)8 H9 n6 K0 b9 B) P: Q; g8 E
事件基础(22分钟). @. u; b/ N% H- s& q1 t
条件渲染 v-if与v-show(7分钟)
6 m) J% Q& G" C7 G$ O. k 条件渲染 三元运算(4分钟)/ i5 r% l0 Y; B( x m$ ]5 @
列表渲染v-for的使用(13分钟)
9 H8 Z/ s4 D m$ r, [5 j! n 指令key实现for循环的组件唯一性(12分钟)
& ]+ |" ~& e& P1 R) ^: l/ m 嵌套循环的下标定义(4分钟)# ~0 A$ P1 r+ S; n
条件编译 - 上(10分钟)
* n+ k# |( ^" V$ I, e6 Z: K' W 条件编译 - 下(7分钟)
6 A) T* h3 x2 l- a$ t05样式与flex布局-上
, N; {4 }5 l6 F8 j P3 j flex布局介绍与模型(8分钟)
' |% D; X" K7 S flex-direction 元素的排列4种方向(10分钟)% ]- A! r1 p5 ~4 D
导入外部css样式(4分钟)
0 d J8 ]* [# T2 K8 o3 X9 { flex-wrap 元素的换行(12分钟)3 K! ]3 H* j6 ]# D1 W& b! T1 E, v
justify-content 元素在主轴的对齐方式(14分钟)1 `2 R) V3 c: W
align-items 元素在交叉轴的对齐方式(12分钟)- k8 x) M9 F$ w2 k* q# M
06样式与flex布局-下
) }; Z$ A" \5 _% E9 Z4 r' [ align-content 多轴线的对齐方式(13分钟)
8 H6 ?+ K* v2 ~# A flex成员项的属性 - order(4分钟)2 E h: m8 Y# d; }( ^0 c) C1 a
flex成员项的属性 - flex-grow(4分钟)9 Y. v. h8 T3 T3 b: C6 m: l1 n
flex成员项的属性 - flex-shrink(6分钟)
' s3 @" Y6 u( y flex成员项的属性 - flex-basis(4分钟)+ T( |0 Y: o% [3 g
flex成员项的属性 - align-self(6分钟)
* ] w4 F( J, j, H) v$ [; z1 M07开发首页-上" x( m4 b! g/ Z0 ~- A
创建项目,构建基础页面(8分钟) 免费试学
8 z) V. ^) ]( n: Y7 ^1 k 构建tabbar(13分钟) 免费试学7 v6 ^* {8 A2 @ e& m1 @) v
设置全局page,简述view组件(6分钟) 免费试学5 y5 H6 R/ s: S. ]' H* T
使用轮播图组件(11分钟) 免费试学& L$ A- K7 g3 v& r
禁用原生导航栏达到页面全屏化(6分钟) 免费试学7 {4 T _: b( X! E/ G3 H+ n
在线文档的使用(8分钟) 免费试学2 z- H0 |4 w7 E( T' h
request网络请求api讲解(5分钟)
# q+ X# Z( w& m$ W8 l8 a) p uni.request动态获得轮播图数据(9分钟)
9 a9 o3 w, a+ H5 [9 Q" F 箭头函数 this 作用域(4分钟)
0 k3 @0 k$ M: c$ R 渲染并且展示轮播图(5分钟)
5 h7 g9 V& ~# ]7 h3 d% e2 p08开发首页-中
9 J' @( `/ F* R 引入组件实现全局变量(7分钟)
" K' c+ f8 Z& u 使用挂载实现全局变量(4分钟)
1 u. T& \+ c3 g* a2 _0 ^0 b 在手机端进行微信小程序真机预览(6分钟)8 L' h5 V! J9 C9 k
微信小程序https使用事项(7分钟)
5 N8 W2 }- C3 a8 ^4 Q4 I 开发热门超英 - 标题(9分钟)
7 p& I( Y9 G/ f; s; A- H 开发热门超英 - 简述scroll-view(4分钟)! q7 w( w$ a3 w/ e
开发热门超英-使用scroll-view实现横向滚动(3分钟)
' Y4 K9 d- l, ^* J# p/ ?! H, ] 开发热门超英 - 海报与标题(8分钟)" H& J- a/ k( R8 ^8 J0 p0 a- Q
开发热门超英 - 评分(6分钟): v8 `. T8 e. u7 W5 A* V) d
开发热门超英 - 动态渲染数据(8分钟)2 I/ O7 ?. _" w1 e
09开发首页-下: ]$ a/ `# ?' g- ^5 V) A( ^. X) l) D: z
开发自定义组件(7分钟)
5 A) m5 x! U- I0 ?/ K0 Y" R0 f( C 父组件向自定义组件传入值(6分钟)
1 E9 V4 X2 E5 K7 o7 ^3 C% z 完成评分自定义组件(22分钟)
b( e2 W9 h6 a; ~; C- W M a 视频组件video讲解(9分钟)- F2 r8 Y" V/ @9 I5 S' e
获取预告片数据(3分钟), t, F1 |# ~7 v
动态渲染预告片(10分钟)
* @1 J7 R- @9 l# q 猜你喜欢 - flex布局嵌套编写(18分钟)
0 P3 r1 Q* i/ T' |( q7 j2 N7 ` 猜你喜欢 - 编写点赞css(7分钟)9 L# u) S8 s& u" J/ f& D% d
猜你喜欢 - 实现点赞动画效果(14分钟)5 x4 R2 I8 H. v% G
猜你喜欢 - 还原动画(5分钟)
* J$ {5 ?! v3 b6 G- |6 U' a$ s10开发首页-终
( h0 ^% w& G% m' j; o0 a 猜你喜欢 - 动态渲染列表(6分钟)
_5 r2 P. f9 x# |1 M+ [" s- a 猜你喜欢 - 实现动画数组(7分钟)1 ]0 }! c3 }5 R9 d, L0 t
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟); W" }8 B' J$ S( z1 N" ~
猜你喜欢 - 开启下拉刷新(5分钟)8 R9 \9 L# h% y3 @# ^( n
猜你喜欢 - loading交互api(8分钟)
0 ^6 j( W% e J11构建搜索页-上
" c. E7 s: s+ j2 K9 E) s 搜索页面 - 编写搜索栏(19分钟)" G8 Q& G' d! ^5 F5 n
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
3 m: B5 ?+ u' y$ e2 d 搜索页面 - 动态获取最新预告并且渲染(9分钟)* S% |7 O' \- b- F
搜索页面 - 分页接口api讲解(4分钟)9 ~. v7 U- q: p" [. h
搜索页面 - 搜索前置准备(6分钟)
9 e& Q4 q4 u* [- C& m! Q. K; _! [ 搜索页面 - 执行搜索动态渲染(8分钟)
: j$ [8 t+ H" C2 B& m2 H4 _( ] 搜索页面 - 监听下拉实现分页功能(8分钟)4 K; i. |- d" }
页面路由api与传参(13分钟)2 b) @$ h: |/ j0 f% o
页面跳转组件的使用(7分钟)
( P' Y" l- e( ~8 w* u 详情页 - 查询详情与视频渲染(8分钟)
# l2 ~. _% u6 i& A12构建搜索页-下
: \$ g! O# V2 e8 N% P; {7 Q( j 构建预告片基本信息(16分钟)
0 G: E4 s* n2 E* @% R 构建评分快与阴影效果(15分钟)
# H4 [- ^/ f2 s# P: y- c 解决错误数据绑定undefined(5分钟)
% J" G8 U' A2 r. z% }% s 编写分割线以及剧情介绍(8分钟)
, J: j' O2 _' E4 k8 U. R 构建剧照与演职人员数据列表(10分钟) f; T, M7 w; s: U O. H
渲染剧照列表(8分钟)
) k. ]1 G2 ]! N1 v: o0 n 双拼数组构建演职人员列表(12分钟)6 K7 N5 U1 P; h- w2 Z
渐进式导航栏设置(6分钟)8 p5 e; ]) r: e5 S* h
通过预览api实现剧照预览(7分钟)5 \( h2 b# H6 R. Z% ?
演职人员数组拼接预览(8分钟)
5 m. k3 n$ q( d# `4 v4 S D13电影详情页构建1 r+ r9 G- x e
自定义预览封面图(13分钟)+ r0 @& A" ?3 w, c( J+ v# l
actionSheet接口api使用(6分钟)3 K& @; X/ \0 z8 D5 S! D
下载以及保存图片(15分钟); ~! E( N9 T | Z- j
配置https下载合法域名(5分钟)! h4 P0 h _! W' l' k) k# [' {; t" z% U
实现小程序中的分享转发功能(9分钟)
0 x7 O& [: T! e6 `/ ]: _ 自定义导航栏按钮(11分钟)
6 b$ b$ m& R4 d9 ~ 分享到朋友圈(9分钟)* F; q4 X9 S6 t! z
微信开放平台简单介绍(6分钟)
+ H3 f9 v' G, _# Q) r: P* e' K 操作视频对象,提高用户体验(8分钟)! X6 ^8 ]! ~# D+ V+ X5 V
优化首页视频体验(13分钟)
* d( e! Y' w) P) m4 v! G8 s14我的页面(上) S7 \* y% D' Y- a+ p
开发个人页面-header与导航栏设置(9分钟)
. \5 d ~& n0 S7 t 发个人页面-用户未登录和已登录的页面展示(9分钟)
3 i4 @. U4 l1 X6 D! K$ |$ v0 l 构建注册登录页面(8分钟)
/ y9 M; F1 m) `. g9 x button与form组件讲解(6分钟)
$ q. |% s8 K- \5 _$ q% j 实现一键注册登录(12分钟)$ T9 p$ \2 s M; m+ _ h
通过缓存切换是否登录状态(9分钟)+ \9 ]6 o. M' v+ j& r8 V) P
构建用户账号页面(9分钟)5 C8 Y% P1 a0 D1 j2 w
清理所有缓存api(4分钟)
P7 _+ q$ W4 C; H$ C6 q" Y 用户登录错误提示与方法挂载(7分钟)
8 [* I. A, @" c6 S5 p: y, K 渲染用户信息数据(6分钟)3 i I2 `' I7 _* `: W" v. f9 {1 @3 l) F
15我的页面(中)1 k! a4 u3 |) P$ I! [ l# Z
用户退出登录(6分钟)
& D5 E' Q3 P# V2 H L 第三方登录讲解与页面构建(16分钟)
0 b& m- x# {! f" w0 H 第三方登录-小程序端实现微信登录(15分钟)
( D! l% L# R9 F) q/ o 第三方登录-后端登录业务梳理(辅助理解)(10分钟)
9 v7 s( G: }/ l1 h3 ^9 H8 Q$ I e 第三方登录-app端授权登录(8分钟)9 ]4 V9 [4 X9 F, V
第三方登录-app端获取用户唯一id及信息(12分钟)7 U j$ z. N7 m
第三方登录-app端执行一键注册登录(7分钟)
: M; b* }2 r& H5 g5 w' c, g- N 查看预览用户头像(7分钟)
% |3 @$ x1 V- Y0 h 选择用户头像(11分钟)
* S9 W" L$ l& | 重新选择头像(3分钟)- C/ S2 o4 Z% k7 i. Z0 p
16我的页面(下)
+ y% y. x7 W, T+ o; n 文件上传api与后端接口讲解(5分钟)
+ F) ^. b% E" K/ I0 S7 p token令牌讲解、实现头像上传(23分钟)
. E, y. J! f% [; o6 m5 T 引入图片剪裁实现头像上传(7分钟)% Z8 s; C, w) x9 b
用户修改昵称(18分钟)
: v; ~. e& `6 s- [ 用户修改生日(17分钟)
- c' P- O8 K! x: A2 k& c 用户修改性别(15分钟)& t$ o' H5 r; `8 q, F
17项目发布与上线# G6 e% J2 B$ v1 r$ b# D8 t$ B
打包H5 web应用(5分钟)
) I% X1 I8 \4 Q, q+ _6 B 购买云服务与简介(6分钟)
, a3 D' M4 Z- S- I7 y- I( T 配置安全组,重置密码,上传nginx,配置ssh(14分钟)% `( g9 H# f+ A% O( E9 U
安装nginx(9分钟)
! a p% }3 }, k9 N 成功发布H5端web应用(14分钟)/ E4 z; l ~# X+ }1 r" O" J
微信小程序上传审核流程讲解(8分钟)
( m4 N/ c' X7 B: E% W0 i 打包安卓apk(8分钟)
; r A8 Z5 T+ b 简述ios打包(8分钟)) a' U: g7 {6 M+ r$ J$ S
18课程总结7 W* L4 N: U+ |$ B& P
课程总结与展望(9分钟). x2 H) p0 r, M- T" o$ J/ i
9 e" Y) C5 A( ~) t% o
" ~/ \) [/ I" A; e( {$ W. @
9 W8 E3 l6 ~9 @2 } |
|