|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。$ r: x+ ?0 L0 p j4 h6 i6 I
课程目录：2 W$ i9 y+ p! `/ O3 z3 Q/ F
01导学( n* K" j$ O; t- a) ^+ h
导学(12分钟) & [9 ~$ U/ F: o8 E5 q; D
学前必看！补充课：接口调用参数补充(6分钟)! j) p1 p+ p9 D5 Y- y$ O
基础框架NextHelloWorld(rar，513.7KB)
! X5 d) y) g, ~* U5 ?% K6 A. S 超英预告最新源码(rar，8.7MB)
8 C. ~5 N8 h9 A, G E. j% m linux工具与ngxin安装(rar，37.3MB)
% Y( h: N4 }* ~2 H0 }5 G* _ logo素材制作(rar，730.3KB)% x% t4 y+ I4 s2 z5 Y& ^4 ~* z
02课程介绍* D( {% ~8 E; M* F$ U. f& q
什么是 uni-app(4分钟)
* v( q* D- R4 _4 y 为什么要使用 uni-app(8分钟)
1 P* x5 R9 X0 t- z* u# L3 _ app多端发布效果展示(7分钟)
2 n7 R2 L6 r) P5 J# q4 {7 \ 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
) R0 b, f. W& a2 B+ U' w7 [ 微信、支付宝小程序开发工具调试(7分钟); M+ i) Z [% C- N+ X1 Q
在Mac上使用Simulator进行调试(5分钟)
2 ]8 r! Q2 T _9 G03框架基础-上
+ G9 j3 n! r- }% b5 n! Q( c 简述MVC模式(9分钟)" v! l! W% n" `$ @% \. H
图说MVVM模式(5分钟)
8 G4 B4 o2 c% R- m 通过代码阐述MVVM与双向绑定(12分钟)
" R$ n7 g5 U O( q, U JSON对象和数组的渲染(4分钟)6 x; e/ _6 `3 Y( Y V9 s
页面路由以及标题配置(11分钟)
0 `. R3 Q3 V6 C4 ]( z( |% I0 M 宏观讲解项目配置文件(16分钟)( v( t) A- H, e+ ~' e2 D
应用的生命周期(11分钟)$ d& w, w5 Y! S7 r) q% J4 ~' z
页面的生命周期(14分钟)/ T) z; y0 f/ @/ Q% }2 w
固定像素px与响应式像素upx(12分钟)9 c" |9 X; ]4 X1 z$ e" @' Z
在页面里使用{{}}表达式(7分钟)/ s3 {5 l, T7 A7 \ G; y
04框架基础-下 ~# F/ q" a: X7 i3 n. w$ X0 H
v-bind指令对属性的数据绑定(7分钟): \8 X" C' e3 O* E I& `0 |
事件基础(22分钟)
. Y! l9 Z, b3 B 条件渲染 v-if与v-show(7分钟)9 W* M" m* O# c5 z8 u9 H
条件渲染 三元运算(4分钟)3 F6 m3 B8 i: g% f
列表渲染v-for的使用(13分钟)+ r1 q+ R/ p) ?4 k
指令key实现for循环的组件唯一性(12分钟)
" @, {/ c! T9 q3 H W6 _0 L8 d! C 嵌套循环的下标定义(4分钟)3 X8 h. U5 x0 ?& I. A; F2 ]
条件编译 - 上(10分钟)
i; `/ i$ l6 K, W; q 条件编译 - 下(7分钟)
6 B2 M/ a" c$ p6 C05样式与flex布局-上, x# F( d% m3 u+ m8 \3 J
flex布局介绍与模型(8分钟)
8 ?7 R4 P a; [6 N6 @ flex-direction 元素的排列4种方向(10分钟)
' N# F' B# f9 {6 V' h 导入外部css样式(4分钟)) a3 Z4 d3 u9 d, Z- N
flex-wrap 元素的换行(12分钟)
/ N. x- F" ~, _. N; L; h justify-content 元素在主轴的对齐方式(14分钟)
/ s1 X$ z h# L/ y* A$ ~# E align-items 元素在交叉轴的对齐方式(12分钟)7 J! A4 V. V8 I- N# a; F8 G
06样式与flex布局-下
1 i6 n' L! e* ]7 g3 m align-content 多轴线的对齐方式(13分钟): _; U' g+ N! m; Q3 { A) _
flex成员项的属性 - order(4分钟)2 g8 F0 ~# y# I. ?3 I: b d ?
flex成员项的属性 - flex-grow(4分钟)4 L6 c0 C5 ?# D* X, u
flex成员项的属性 - flex-shrink(6分钟)! _4 s( L& D% X8 v, w
flex成员项的属性 - flex-basis(4分钟)2 H% i8 C" A4 ~; D
flex成员项的属性 - align-self(6分钟)
" c. _* m" u! Y9 H$ i" G1 D# ~07开发首页-上* e$ D2 ?2 N% ]- F/ C* D: A. F
创建项目，构建基础页面(8分钟) 免费试学
8 w! |" F w: }5 ~. Q 构建tabbar(13分钟) 免费试学
7 P; ^4 O' h: G) n 设置全局page，简述view组件(6分钟) 免费试学5 p# P. S- a! {
使用轮播图组件(11分钟) 免费试学9 i3 c1 q. E( c4 A
禁用原生导航栏达到页面全屏化(6分钟) 免费试学4 |! O! K* g% T. n( W
在线文档的使用(8分钟) 免费试学
, R R* o- z1 z8 z: @) b" @2 q request网络请求api讲解(5分钟)
, c8 S! x# Q9 U* M) b uni.request动态获得轮播图数据(9分钟)- G4 _& W5 {% r: m2 c
箭头函数 this 作用域(4分钟)
1 H8 k* n; l. P4 x' W6 ] 渲染并且展示轮播图(5分钟)/ V/ B+ z- \5 x( g
08开发首页-中
, f4 ]/ `, n0 x# `4 J* f r* @3 L$ O 引入组件实现全局变量(7分钟)3 D' ^/ C. C1 C
使用挂载实现全局变量(4分钟)2 I9 u- L' a F9 g& n& b
在手机端进行微信小程序真机预览(6分钟)
5 T5 t% }5 R2 O8 B 微信小程序https使用事项(7分钟), `/ J* }) B) t! ]+ [6 D7 _
开发热门超英 - 标题(9分钟)
; D7 A# q' t( x& k' n2 A8 v+ G 开发热门超英 - 简述scroll-view(4分钟)
4 L1 }3 m0 O) G4 t7 L9 j v1 \ 开发热门超英-使用scroll-view实现横向滚动(3分钟)/ ?/ K/ j& t! B" w
开发热门超英 - 海报与标题(8分钟), l0 z4 z. Z' L: f! M' A$ w2 @
开发热门超英 - 评分(6分钟)+ a4 F" J. C! a! ~: u
开发热门超英 - 动态渲染数据(8分钟)2 M; Q0 [7 I* K
09开发首页-下
: D4 k$ L# q, c! G* Z8 p 开发自定义组件(7分钟): p1 n1 W# M" m
父组件向自定义组件传入值(6分钟)( F7 \" {+ r, V' ~# Z2 ^: n/ m
完成评分自定义组件(22分钟)$ r( X; _7 Y# r
视频组件video讲解(9分钟)
* h4 s% f" b) O 获取预告片数据(3分钟). h8 b3 @2 }3 R+ V
动态渲染预告片(10分钟)8 q9 X7 O+ a" I& H6 j
猜你喜欢 - flex布局嵌套编写(18分钟)% R% U4 V" @& y/ h' D3 {" S
猜你喜欢 - 编写点赞css(7分钟). u# l' M% L1 V; s6 V4 q. B* d
猜你喜欢 - 实现点赞动画效果(14分钟)
4 k3 m8 {3 F) I- |# g 猜你喜欢 - 还原动画(5分钟)" L; N3 @4 E% W0 w) l
10开发首页-终
2 i4 B2 D* s+ K# p 猜你喜欢 - 动态渲染列表(6分钟)* n6 S9 T) q! J1 R" d
猜你喜欢 - 实现动画数组(7分钟)
3 p/ Q/ `* u7 K8 \, z0 m( p 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)8 R$ L/ w, V/ y0 d
猜你喜欢 - 开启下拉刷新(5分钟)
% i( q& f6 E, y2 o f* M 猜你喜欢 - loading交互api(8分钟)
/ n4 p+ D/ w( Y1 F/ @( ~% Q11构建搜索页-上
9 Q, m( X- m( A) T. d 搜索页面 - 编写搜索栏(19分钟)
( T' T: z. }6 H9 t7 r& ^; e, n 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
5 x! U+ u6 p4 x" s6 ~5 x 搜索页面 - 动态获取最新预告并且渲染(9分钟)
3 c& e, b! l9 ~. ~% j$ Y 搜索页面 - 分页接口api讲解(4分钟)& ?( Q) w& s3 |$ Y5 Z
搜索页面 - 搜索前置准备(6分钟). d( U( T% i# v1 t
搜索页面 - 执行搜索动态渲染(8分钟)+ R ~9 c3 q/ \4 Y* p
搜索页面 - 监听下拉实现分页功能(8分钟)8 ?' D% V9 n: i) A: L
页面路由api与传参(13分钟)0 ~# l2 {7 [0 p; ^( l
页面跳转组件的使用(7分钟)
0 A+ h. ] w# r8 U$ T: o 详情页 - 查询详情与视频渲染(8分钟)
; Q6 y( z1 ^5 z: T% @12构建搜索页-下
% \2 M; M R$ [: B) M 构建预告片基本信息(16分钟)# y2 w7 n E" w, Y+ f/ w; V1 ]" a
构建评分快与阴影效果(15分钟)5 ~. c' Y1 Y9 M# W; \
解决错误数据绑定undefined(5分钟)
0 [5 Y* c& C+ t b2 \/ b. _ 编写分割线以及剧情介绍(8分钟)( c- q9 n. q8 \( i) F
构建剧照与演职人员数据列表(10分钟)
0 q$ f1 |1 ?" B0 x5 J _8 h, A 渲染剧照列表(8分钟)
3 v; M& h6 V, c9 {0 T7 ? 双拼数组构建演职人员列表(12分钟); Z, a: Q8 B' A* }& k3 i! U; D
渐进式导航栏设置(6分钟)& K) G6 F0 ], w# c& _/ K3 J: x
通过预览api实现剧照预览(7分钟)
: B2 x) |% {+ z) x, ?) f 演职人员数组拼接预览(8分钟)' s* w0 B0 B4 @
13电影详情页构建
+ {$ b) |5 O/ b# c; F \ 自定义预览封面图(13分钟)% K7 C% R( B8 N8 U/ d/ I
actionSheet接口api使用(6分钟)1 B& B0 D: [$ c( X3 q
下载以及保存图片(15分钟)
0 b: u1 E: ^3 I" { 配置https下载合法域名(5分钟); D8 n3 {4 D9 C
实现小程序中的分享转发功能(9分钟)
# J n+ x$ K, I" q& G4 C3 D 自定义导航栏按钮(11分钟)* ?. v2 _! |' I* _$ i* I( ?4 D% k
分享到朋友圈(9分钟)
$ F, @- V2 R& u4 c/ @ 微信开放平台简单介绍(6分钟)
0 L, @2 |6 y/ p) B; o- z 操作视频对象，提高用户体验(8分钟)+ I( Y$ y' J' c
优化首页视频体验(13分钟)9 |' }" N9 u% P. i& r' w3 p
14我的页面（上）; P( x: a0 {) f1 U5 Y ?% n: s
开发个人页面-header与导航栏设置(9分钟)4 \( q ^3 {# B9 ?
发个人页面-用户未登录和已登录的页面展示(9分钟)+ b8 O( ^. {% Y* N& b% W$ R6 G
构建注册登录页面(8分钟)
( C: }( M! ?3 \ K" u" N8 N( A; K5 k button与form组件讲解(6分钟)
* K# t3 P. W, `" ] 实现一键注册登录(12分钟)
$ [4 n5 E; _, c 通过缓存切换是否登录状态(9分钟)
7 u) k @3 n! a; X 构建用户账号页面(9分钟)
7 G1 ~8 ~3 ~, A# p6 @$ Q) j 清理所有缓存api(4分钟)
9 o3 X4 U/ n9 Q7 \. r4 g) D 用户登录错误提示与方法挂载(7分钟)
* h( p: N# ]6 U" {: ]/ i9 j4 z# _ 渲染用户信息数据(6分钟)
) z6 ^' D7 z: c# j, T) d. {6 l15我的页面（中）- i) u$ Q2 j% ?/ |: t5 b* A
用户退出登录(6分钟)# Q1 K0 y& P1 x& L
第三方登录讲解与页面构建(16分钟)
r8 V8 `" t$ w2 _, Y 第三方登录-小程序端实现微信登录(15分钟)
+ r& R7 e; V1 f* B% g9 Z 第三方登录-后端登录业务梳理（辅助理解）(10分钟)
; l/ N N' a0 i, l. P8 C 第三方登录-app端授权登录(8分钟)4 a9 a9 E; C; t& W: M' ]* R
第三方登录-app端获取用户唯一id及信息(12分钟). j- O7 _3 E4 ?% ]
第三方登录-app端执行一键注册登录(7分钟)
% c1 ]' i2 M4 J' N; G4 }: y/ ~ 查看预览用户头像(7分钟)2 M! t; ~7 v$ z
选择用户头像(11分钟)+ G% ]/ a. Z, e, W4 {; d- h- k
重新选择头像(3分钟); ?$ }" z6 d7 N! ]7 e
16我的页面（下）; t( V4 l* a# G$ e* M
文件上传api与后端接口讲解(5分钟)
% K1 z9 }0 ]3 ^: e token令牌讲解、实现头像上传(23分钟)
], x' C- c h7 ? 引入图片剪裁实现头像上传(7分钟)
' h8 O' l# [- C* W$ c Z: } 用户修改昵称(18分钟)
& q, `# A5 _8 R: l6 ^+ e; j 用户修改生日(17分钟)
4 i' H$ E% I/ m+ W8 ] 用户修改性别(15分钟)
" E- q, G3 S2 ~/ H: g17项目发布与上线2 E. h; S2 L( G1 k5 \ o* @% F
打包H5 web应用(5分钟)+ o" k3 Y/ X, c, X4 U0 u
购买云服务与简介(6分钟)# `! O2 y- t6 M/ y! e9 [ Z
配置安全组，重置密码，上传nginx，配置ssh(14分钟)
3 [6 Q# _! }: ]8 I- t 安装nginx(9分钟)4 {$ b# J" t: E5 B
成功发布H5端web应用(14分钟), L5 ~" }' T# e P5 n5 q
微信小程序上传审核流程讲解(8分钟)5 }! v- A' k" w+ e% n/ e1 n: }' V
打包安卓apk(8分钟)$ n4 J: r# U2 w, _9 d3 [1 D9 U' D- W2 V
简述ios打包(8分钟)
5 r4 @! s. u- h+ U( i4 n18课程总结
$ G1 u5 Z$ ?& n+ d$ X' e2 H 课程总结与展望(9分钟)) \6 [, y- v$ u1 b0 J
/ ]" t- ]: o9 n, s& h0 ~0 M" n
' ^1 Z6 x2 P3 l/ F+ `# f
0 n/ u7 a- @# r E# j7 m |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
