|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
$ q, u/ V t9 f- _9 S课程目录：
7 m% r# S( o, S( X3 y01导学' ~) ~* Y3 \ {
导学(12分钟) % q# d8 W7 q- L. N }! ^
学前必看！补充课：接口调用参数补充(6分钟)
1 t' @. J# u+ k4 o2 C: c( ^ 基础框架NextHelloWorld(rar，513.7KB)! x4 O0 L% R- b# @
超英预告最新源码(rar，8.7MB)
$ ~7 f) a8 c+ j linux工具与ngxin安装(rar，37.3MB)
0 X+ l: r$ f* {3 B, n" R logo素材制作(rar，730.3KB)
# d8 v# ]: G9 F2 r, W( C02课程介绍
- L6 ]3 m; k* N ^ x' x4 [: n* Z 什么是 uni-app(4分钟)) L" [9 P' P/ b9 s. L: K0 `
为什么要使用 uni-app(8分钟)$ k1 N; b9 b' W$ ?! y1 Q8 I5 U! a
app多端发布效果展示(7分钟)7 P- @ v5 }4 z1 G+ F
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)- f n: S2 I+ s9 b( }! Y2 J/ a
微信、支付宝小程序开发工具调试(7分钟)
. [* b' g! `, g/ I, T# m 在Mac上使用Simulator进行调试(5分钟)' U* s* w$ ^: [ `
03框架基础-上
" m ~6 U V5 `% V! D 简述MVC模式(9分钟): T% O8 C ?% d( r8 P# p9 x
图说MVVM模式(5分钟)8 K6 M o6 z% i( Z$ @: i2 U- K$ N5 d
通过代码阐述MVVM与双向绑定(12分钟)
5 T, k, h( a2 n o2 J- o( A JSON对象和数组的渲染(4分钟)2 l4 U& V# f+ E
页面路由以及标题配置(11分钟)
& ~) g: G* E3 F* v 宏观讲解项目配置文件(16分钟)
# @0 B$ k3 l% W 应用的生命周期(11分钟), R# V1 Z6 ?& j$ D, I; F$ g
页面的生命周期(14分钟)
1 N3 T$ `8 u5 r k# s9 Z 固定像素px与响应式像素upx(12分钟)
* a1 \+ V4 m+ |9 k1 B 在页面里使用{{}}表达式(7分钟)
1 w2 Y# K0 w7 g. A+ t" ]) e) b04框架基础-下
" S& f7 s" T1 V1 k4 U% _) D v-bind指令对属性的数据绑定(7分钟)
B5 T$ A+ A& N 事件基础(22分钟)
, H$ v5 }) y% O/ S, } 条件渲染 v-if与v-show(7分钟)3 v3 E9 B) W/ {6 u0 c9 I# [3 Q
条件渲染 三元运算(4分钟)
. C8 Y! N" G$ i& }0 j; X0 M% v+ o0 ? 列表渲染v-for的使用(13分钟), E, H5 l( y( |
指令key实现for循环的组件唯一性(12分钟). \+ j: @; L0 I# \; D0 l7 q) I; U! w
嵌套循环的下标定义(4分钟)
* ]" l' V* X0 {) q. Z 条件编译 - 上(10分钟)) ?8 D+ t+ y8 c( R5 G' i( v- r
条件编译 - 下(7分钟)" n2 k3 H# H0 f( U z6 L
05样式与flex布局-上! w( v; g; u+ H+ |; w1 q& ^& ^1 \/ p& y
flex布局介绍与模型(8分钟)6 R/ w8 @$ V* L$ ]. \
flex-direction 元素的排列4种方向(10分钟)
* U( _9 Z3 O) r+ `. \5 T 导入外部css样式(4分钟)
8 F" o; Y' ^* ?9 B. T0 t3 V flex-wrap 元素的换行(12分钟); J2 }/ e# q0 c( h7 f* _5 x+ w1 u
justify-content 元素在主轴的对齐方式(14分钟)
0 B; C; c4 X# Q0 M align-items 元素在交叉轴的对齐方式(12分钟)
, u* m3 p2 N! Y0 h06样式与flex布局-下
8 J: B5 T: k: C5 T. L. w$ F align-content 多轴线的对齐方式(13分钟)% N: {! u* d" }$ n+ `
flex成员项的属性 - order(4分钟)
% n2 J- e( y! f/ `; | ^ flex成员项的属性 - flex-grow(4分钟)
/ c; E& r( `2 m. U" Y) s flex成员项的属性 - flex-shrink(6分钟)4 g0 f/ c" w1 s
flex成员项的属性 - flex-basis(4分钟)$ z s; ?5 ]+ B2 B
flex成员项的属性 - align-self(6分钟)
/ _6 \7 Z( X) h8 \8 P07开发首页-上
: l" b: W. O3 ?1 \6 U 创建项目，构建基础页面(8分钟) 免费试学9 r2 P5 k- R! o1 X5 q% p
构建tabbar(13分钟) 免费试学
3 t9 z) J7 C8 w; g 设置全局page，简述view组件(6分钟) 免费试学
, I+ ?' `; I( g+ Z 使用轮播图组件(11分钟) 免费试学
! O$ U& k$ H7 b9 d3 M- G% O 禁用原生导航栏达到页面全屏化(6分钟) 免费试学
4 D6 r1 F7 r& @+ c4 L0 C0 @4 ? 在线文档的使用(8分钟) 免费试学
% g( n* S* `( g8 P' h# e& } request网络请求api讲解(5分钟)
0 m" \5 w( M7 ~- [+ @0 L uni.request动态获得轮播图数据(9分钟)& l* N/ K' B8 f4 Q+ T
箭头函数 this 作用域(4分钟)1 q: }5 h' a# D* @/ n
渲染并且展示轮播图(5分钟)
. \# N2 f' F6 m* F D- _08开发首页-中0 `7 O/ p1 q2 `3 |& g' L0 t
引入组件实现全局变量(7分钟), p& P/ x- d) L5 t' I7 }3 |
使用挂载实现全局变量(4分钟)
; A7 H S: j# F) u5 a5 {. Y4 x ^7 E) v 在手机端进行微信小程序真机预览(6分钟)
0 Q- ~/ p, F6 ~ Q( N 微信小程序https使用事项(7分钟)
+ W9 {7 C" J8 M; P 开发热门超英 - 标题(9分钟)- G7 G8 P6 C0 l9 ^# y) W4 `
开发热门超英 - 简述scroll-view(4分钟)
+ H0 g& u2 J% f3 I 开发热门超英-使用scroll-view实现横向滚动(3分钟)8 M3 L0 V' Z. k$ F
开发热门超英 - 海报与标题(8分钟)
1 s* i( c) `* n9 ~! u" O3 P+ I& \ 开发热门超英 - 评分(6分钟)
* \ p$ @) v/ N2 @, X 开发热门超英 - 动态渲染数据(8分钟); b9 T% J( w# l" O8 h
09开发首页-下
5 d2 V" }& K. Q5 \ 开发自定义组件(7分钟)/ ~; Z9 `, p* @1 ^( @
父组件向自定义组件传入值(6分钟)% G$ Q- X( w( v( n% M8 n5 I/ G2 b/ E
完成评分自定义组件(22分钟)
; E& G7 n5 ^. d8 k7 o$ t% _ 视频组件video讲解(9分钟)0 m) f2 ?' B) b: I- i: z
获取预告片数据(3分钟)+ q0 |1 X& Z9 M5 G& a/ `
动态渲染预告片(10分钟)
6 Y" _+ i4 J- c8 K- a% C2 S7 } 猜你喜欢 - flex布局嵌套编写(18分钟)8 O% S3 l+ q, u/ [4 S, @
猜你喜欢 - 编写点赞css(7分钟)
. K/ k" M/ q1 m& E- L 猜你喜欢 - 实现点赞动画效果(14分钟)4 C. o" O) i% B8 c
猜你喜欢 - 还原动画(5分钟)1 z ~0 Y8 ?7 X2 F
10开发首页-终
# d: t( x2 J# a. V F* L3 n 猜你喜欢 - 动态渲染列表(6分钟)) u1 C, A5 C3 T
猜你喜欢 - 实现动画数组(7分钟)
' H" O+ d" g9 d. t! B; O! i8 } 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)! w# u( u, F! B" G
猜你喜欢 - 开启下拉刷新(5分钟): N% i- Z. q. }% {1 ]6 o3 X2 k
猜你喜欢 - loading交互api(8分钟)) q) V9 g$ L) X' o% P4 c* r" X. `! u
11构建搜索页-上
4 N" {9 Z1 A) u v$ v$ f 搜索页面 - 编写搜索栏(19分钟)
. k: K% y' l) t) y8 V) a( s8 y. ~ 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
, p. D6 O" m; V+ A+ }, m8 ] 搜索页面 - 动态获取最新预告并且渲染(9分钟)3 ^; S) }" a: Z' |$ [, F# B' `
搜索页面 - 分页接口api讲解(4分钟)) @( K8 B! l1 w
搜索页面 - 搜索前置准备(6分钟)3 p0 q; x. j" u. S' T0 W2 ?
搜索页面 - 执行搜索动态渲染(8分钟)
$ {( m6 D! z$ a" H/ s9 \ 搜索页面 - 监听下拉实现分页功能(8分钟)
" H0 E: q N1 f' U5 t; y" W7 ? 页面路由api与传参(13分钟)
% q: C# O- p6 ? o 页面跳转组件的使用(7分钟)
7 W0 m8 ?4 i& w. y 详情页 - 查询详情与视频渲染(8分钟)7 z& o0 {! m/ t$ P5 K; x$ ^. z
12构建搜索页-下/ a9 m( o+ {! X, ?( j
构建预告片基本信息(16分钟): R/ y1 n ]6 v7 U& ^, K3 P- Y
构建评分快与阴影效果(15分钟), \4 }* W' y9 H
解决错误数据绑定undefined(5分钟); ~; g) R- C: P- ^
编写分割线以及剧情介绍(8分钟): ?% A! I9 x8 ?, D
构建剧照与演职人员数据列表(10分钟)/ o% V1 @, A, G# r$ d
渲染剧照列表(8分钟)2 n i A* P& J
双拼数组构建演职人员列表(12分钟); u6 J6 c5 F9 F1 W3 Y. B
渐进式导航栏设置(6分钟)
) _7 J# `- T1 M7 o 通过预览api实现剧照预览(7分钟)2 h5 N6 x2 i2 J2 E! l" F9 `
演职人员数组拼接预览(8分钟)
2 I& X, K# G! Q' P+ Q13电影详情页构建: Q5 A. a6 R3 f( h1 z# r
自定义预览封面图(13分钟)9 W- V3 [) J7 F7 |2 C' T0 k) `
actionSheet接口api使用(6分钟)
* F. H& p3 W. q6 r 下载以及保存图片(15分钟)) _' J+ h: H3 _
配置https下载合法域名(5分钟)0 T$ z" R, O; Z$ e4 O1 W
实现小程序中的分享转发功能(9分钟), H' D1 a5 z( f
自定义导航栏按钮(11分钟)
2 ?7 ^2 Z! p$ U* x0 t- u0 C+ F 分享到朋友圈(9分钟)& X, q4 [ K8 R. k+ z2 E% C' h. j) s! m
微信开放平台简单介绍(6分钟), V) ^; B/ K; p( B. x
操作视频对象，提高用户体验(8分钟)
+ M6 G5 _7 p; o; |" a! P- r( r. t$ Z" r 优化首页视频体验(13分钟)" F/ y2 x; y) \- Z/ M
14我的页面（上）1 P* l8 U. o5 s0 j. g# m
开发个人页面-header与导航栏设置(9分钟)
7 c: ?6 t, \: u& m 发个人页面-用户未登录和已登录的页面展示(9分钟)
% R4 r+ d: T f# c& t; w) k 构建注册登录页面(8分钟)3 M+ e2 `4 |6 D: A/ S4 N
button与form组件讲解(6分钟)
0 C5 _) k+ f+ t# Q {4 q6 B* F 实现一键注册登录(12分钟)
4 a" p: M4 `2 {) l7 p$ ^ 通过缓存切换是否登录状态(9分钟)
& x1 Y8 o3 ?; ^# v" d( G 构建用户账号页面(9分钟)
6 S0 O- P& a, a 清理所有缓存api(4分钟)$ s/ W1 s5 g! }0 Z
用户登录错误提示与方法挂载(7分钟)% I$ M* y+ c% y
渲染用户信息数据(6分钟)4 _& R& A1 n1 S6 }8 S$ P5 y
15我的页面（中）
1 g4 c' E% @ s. q* X) P( J 用户退出登录(6分钟)
+ h* W/ L; F/ b$ J 第三方登录讲解与页面构建(16分钟)
) ^. o* Z/ N K: U8 ~ 第三方登录-小程序端实现微信登录(15分钟)& b' |' D& o. g, R% L' G' |
第三方登录-后端登录业务梳理（辅助理解）(10分钟)
/ i' }7 ` J0 X8 P1 l 第三方登录-app端授权登录(8分钟) j1 i0 {1 ~ {, ^/ V- {1 k
第三方登录-app端获取用户唯一id及信息(12分钟)' I) n: g( U7 D2 Z; _6 ^
第三方登录-app端执行一键注册登录(7分钟)% ^* r4 l+ ]1 d5 C/ l! r) E6 X3 U
查看预览用户头像(7分钟)
" B1 m8 |3 o$ M; E6 j5 y3 P 选择用户头像(11分钟). I( G8 i& \2 d) |# X$ Z/ ^
重新选择头像(3分钟)5 ^. O9 l. Y2 R
16我的页面（下）5 w1 B# W! |+ L" V9 o1 | o& l
文件上传api与后端接口讲解(5分钟)( W# m* B P* z& R1 J' \
token令牌讲解、实现头像上传(23分钟)4 S5 ]% z' s( L3 y. R, K
引入图片剪裁实现头像上传(7分钟)
. q! n# o& k/ X2 o2 h 用户修改昵称(18分钟); c4 K+ \: l l; q+ k$ Z
用户修改生日(17分钟)$ f, A! K5 ], { P- f$ J+ r" t$ O
用户修改性别(15分钟)2 l" i# E: |- s; Y& M
17项目发布与上线0 t, H5 X* T4 f7 x6 |
打包H5 web应用(5分钟)6 \6 M: t/ ]% @. z: p( \3 U
购买云服务与简介(6分钟)
- K: N: A7 g) C+ J% X 配置安全组，重置密码，上传nginx，配置ssh(14分钟)4 H( _' ^2 R. P5 b7 v6 `. D
安装nginx(9分钟)9 W" i/ e' {- w: s" S
成功发布H5端web应用(14分钟)
9 y% k" P- A: P( B% k' N 微信小程序上传审核流程讲解(8分钟)$ A( x$ T7 c; w
打包安卓apk(8分钟)
+ D: u& I4 e. N/ n K+ L( Q# r 简述ios打包(8分钟)0 ~, M& D6 |* P* J9 m7 h; J
18课程总结3 Y8 X# Z+ E* J) B1 ?
课程总结与展望(9分钟)
3 b U6 p9 u+ y" F% x# E( Y3 o- m$ u) ?
# Y/ n6 D# X* q5 @; c, f4 L5 a
" r7 ~8 L9 {9 U+ p3 ]
|
|
|手机版|小黑屋|paopaomj.COM
( 渝ICP备18007172号 )
发表于 2019-12-10 09:48:24
