|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
% y6 A% ~ l* f课程目录：
2 t# k$ e8 k4 Z1 @7 l01导学6 @' r4 E6 T! |
导学(12分钟)
. b9 Z+ H% F h! J" `' X 学前必看！补充课：接口调用参数补充(6分钟); B0 G7 ~& l3 i
基础框架NextHelloWorld(rar，513.7KB), u/ ]7 I: N% f/ e5 y
超英预告最新源码(rar，8.7MB)& F0 Y8 u; C1 Y( z, g# U( @* S
linux工具与ngxin安装(rar，37.3MB)0 |, @* f! r- {8 o$ c
logo素材制作(rar，730.3KB)/ u- f: u' G6 ]
02课程介绍+ X; Q7 j" J% c8 Q6 \2 P
什么是 uni-app(4分钟)
/ w( T& Q M( L0 W q 为什么要使用 uni-app(8分钟). ^9 {9 I8 q/ ?
app多端发布效果展示(7分钟); s; q& |* o+ z
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
5 k* l6 O' M; T7 l; q% f. n/ R 微信、支付宝小程序开发工具调试(7分钟)
) R+ e9 J3 V5 Z" m! Z5 E 在Mac上使用Simulator进行调试(5分钟)
! R' E$ @( K- p; }. }7 L7 Q03框架基础-上$ W* q. c& V0 v. M0 i/ i D
简述MVC模式(9分钟)
! ] u& k/ S4 T* H4 v 图说MVVM模式(5分钟)& Y- Z$ l3 |* d; B& i( }
通过代码阐述MVVM与双向绑定(12分钟)
. r. c3 ~4 Q6 ^; N JSON对象和数组的渲染(4分钟)
% e" N6 V# k0 H* ~ 页面路由以及标题配置(11分钟)
6 N4 c' R, }7 h+ g7 _& h 宏观讲解项目配置文件(16分钟)
+ d$ }0 L& V9 E, W+ W1 r 应用的生命周期(11分钟)
7 e; h. w4 y, x5 a# u! d; H 页面的生命周期(14分钟)
( a k7 a4 o- c2 s! ]1 x" K 固定像素px与响应式像素upx(12分钟)* _& T& d1 P- {8 T
在页面里使用{{}}表达式(7分钟)
8 U4 Q U8 t# g9 x8 d04框架基础-下
- n; X# V. z5 g4 i2 u2 d4 M v-bind指令对属性的数据绑定(7分钟)
: W0 F( q! ^& ?: o; ~" \# }* b 事件基础(22分钟)
, D% p! L$ R" U4 l; I- c) p 条件渲染 v-if与v-show(7分钟)
6 o& I7 j! H& U8 D 条件渲染 三元运算(4分钟)% V3 `0 E0 T1 X" |
列表渲染v-for的使用(13分钟)
" S. f- p6 G7 N" V3 {! f 指令key实现for循环的组件唯一性(12分钟)
( I$ d0 }- r) O! I) z4 B 嵌套循环的下标定义(4分钟)
4 \' g! ^7 l2 ^ 条件编译 - 上(10分钟)
- O- J7 l; g* q. w& a 条件编译 - 下(7分钟)5 W- P" p/ i/ M' R4 e6 v
05样式与flex布局-上
3 @! w6 ]+ h1 M6 \& T+ _ flex布局介绍与模型(8分钟)" p! @( F+ I: p- {
flex-direction 元素的排列4种方向(10分钟)3 Z7 p0 N# z; \
导入外部css样式(4分钟)! [, N1 b: Z8 K2 j* b
flex-wrap 元素的换行(12分钟)
* o. D" f$ \# x" L justify-content 元素在主轴的对齐方式(14分钟)
% O9 G1 t: g# K6 D align-items 元素在交叉轴的对齐方式(12分钟)
. [8 J3 @, j7 u# l* M& U6 G5 {. R06样式与flex布局-下
3 R" b3 T! j* ?3 v5 A1 u align-content 多轴线的对齐方式(13分钟)& b7 ~% s* U3 Z3 m
flex成员项的属性 - order(4分钟)
, Y% K8 w7 d g) A4 b. {0 M6 n9 w flex成员项的属性 - flex-grow(4分钟)
6 g" F6 ], @$ r2 [0 i; k' E flex成员项的属性 - flex-shrink(6分钟)
" Y! u# J2 Y0 k" C5 p. [ flex成员项的属性 - flex-basis(4分钟)
- S6 U/ W( I2 K/ F& y/ f, K5 L flex成员项的属性 - align-self(6分钟)! E/ `. p) P5 |: R, j% N5 ~
07开发首页-上
' z! g# v# R4 X, N. |( n$ A, j# Y7 q 创建项目，构建基础页面(8分钟) 免费试学* y: _* W' K1 p; e+ L) o
构建tabbar(13分钟) 免费试学
: f+ m0 X" L+ V( `: E* m 设置全局page，简述view组件(6分钟) 免费试学
! T" M" c G0 N3 @# o6 G 使用轮播图组件(11分钟) 免费试学
/ u, w) P* l7 R+ b; f. Q' z7 q 禁用原生导航栏达到页面全屏化(6分钟) 免费试学% f8 g8 d9 x5 h7 x
在线文档的使用(8分钟) 免费试学
p% f" X/ v1 A' G, k. M, }8 ] request网络请求api讲解(5分钟), I4 W9 {& N' z9 v
uni.request动态获得轮播图数据(9分钟)2 q* G* l! m/ F2 Q
箭头函数 this 作用域(4分钟)9 ~8 U; N7 e! F; C
渲染并且展示轮播图(5分钟)
6 W9 N+ f. d6 T0 v1 s* K08开发首页-中$ e( S( p! N0 k9 H4 o- E
引入组件实现全局变量(7分钟)
/ Z7 e+ R& ]# P7 Q) Q 使用挂载实现全局变量(4分钟)0 h7 A! P. {2 P- E
在手机端进行微信小程序真机预览(6分钟)
) L8 n) r, _/ m$ J 微信小程序https使用事项(7分钟)
4 ^4 J [1 q; D/ b) N 开发热门超英 - 标题(9分钟), v( u( a1 r* W. B; s5 [3 U
开发热门超英 - 简述scroll-view(4分钟)
" o$ B8 X" y+ G* \* [6 ~0 z( S9 [/ v 开发热门超英-使用scroll-view实现横向滚动(3分钟)
# q9 S; C+ V2 l% j G7 S 开发热门超英 - 海报与标题(8分钟)4 e# N/ A, a- |5 ?0 K* l- d
开发热门超英 - 评分(6分钟)- J; F8 N; j, N- v
开发热门超英 - 动态渲染数据(8分钟)
" E- Q0 d1 @1 o6 i09开发首页-下
2 J- E( [( ^/ F 开发自定义组件(7分钟)
5 T& \' z5 Y- K5 C x 父组件向自定义组件传入值(6分钟)9 x0 ~" j. N- Y" e0 i+ r/ N" S
完成评分自定义组件(22分钟)- @3 z& C Z0 ~0 I/ o: u7 @$ X
视频组件video讲解(9分钟)8 X) Z& y" Q' E
获取预告片数据(3分钟)
1 h# R7 ?$ \% Q0 [( } 动态渲染预告片(10分钟)" F9 P+ m( Q# Z( c
猜你喜欢 - flex布局嵌套编写(18分钟)
2 a, _5 ~ y; f7 d' w 猜你喜欢 - 编写点赞css(7分钟)
! U& v5 I- n2 j: |7 Z 猜你喜欢 - 实现点赞动画效果(14分钟)
# a9 i; J" F$ Y: I; p& }% N6 W 猜你喜欢 - 还原动画(5分钟) Y( q' {6 g5 C F, p$ m
10开发首页-终
& P4 E, P9 ]# ?9 k6 b& P: e 猜你喜欢 - 动态渲染列表(6分钟)7 P: ^/ J+ }* I2 {5 P1 f( w
猜你喜欢 - 实现动画数组(7分钟)
- z% C+ H, H* r5 e 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
9 c: t7 W: s$ l& s" h- H' N+ t2 d 猜你喜欢 - 开启下拉刷新(5分钟)% j( m$ j2 f$ G7 w
猜你喜欢 - loading交互api(8分钟)& |; C% B C: n) B# p
11构建搜索页-上
2 W; w5 r. x" O; `- ] 搜索页面 - 编写搜索栏(19分钟)# {. B" @6 ~! X# \1 l; R- l
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)* F6 g2 \3 z2 p+ _% f7 t* t
搜索页面 - 动态获取最新预告并且渲染(9分钟)" r4 X8 u" M: ~* @
搜索页面 - 分页接口api讲解(4分钟)* x* p p$ {/ u/ ?' J/ Y
搜索页面 - 搜索前置准备(6分钟)! H, X! y4 `+ q& T% p( j+ s
搜索页面 - 执行搜索动态渲染(8分钟)! o: t+ Q2 z/ B% e; H8 Q7 ?- Q! O
搜索页面 - 监听下拉实现分页功能(8分钟)
' |! i; B0 ]# P5 U& z7 W 页面路由api与传参(13分钟)$ J2 j b# ~3 c3 Q5 F* }: a7 }
页面跳转组件的使用(7分钟)
) \4 {, V* H' t9 T, o 详情页 - 查询详情与视频渲染(8分钟)
A: \; Y2 Y2 g4 C! P# D12构建搜索页-下
5 [0 D! S/ i! j1 G u4 v% e) V) _ 构建预告片基本信息(16分钟)) R" @& i# h7 }1 W j! X! Z# B) V
构建评分快与阴影效果(15分钟)
( I4 h* B8 J8 l( F' o 解决错误数据绑定undefined(5分钟)
# R7 m/ o0 k7 f# c) s( {5 m 编写分割线以及剧情介绍(8分钟)
# Z) V- G. b p1 B 构建剧照与演职人员数据列表(10分钟)
+ G( i( {( L: s) n- M# m6 e! s/ Q 渲染剧照列表(8分钟)
6 ~& a- o, D) @4 n! v% b( z 双拼数组构建演职人员列表(12分钟)" U V4 b, i7 ^0 [' ^3 F! Z
渐进式导航栏设置(6分钟)
8 L* ?. S% e, V3 P5 _ 通过预览api实现剧照预览(7分钟)% x. Y0 ~5 |! ]
演职人员数组拼接预览(8分钟) V5 `7 o5 h5 F
13电影详情页构建
7 l7 Y( P2 U" d9 i 自定义预览封面图(13分钟)5 z7 P5 a- g0 Y( r6 p0 M
actionSheet接口api使用(6分钟)3 k7 {+ R& i9 r) t% p' f4 S
下载以及保存图片(15分钟)9 o0 O6 I. ]1 B8 \8 J8 i$ F# b8 H
配置https下载合法域名(5分钟)5 w% e6 g1 G! b1 @" C+ F# |) `
实现小程序中的分享转发功能(9分钟)% o$ ~( ~9 @! P) l
自定义导航栏按钮(11分钟)# A2 w3 _5 C' q- o
分享到朋友圈(9分钟), F/ E! r j" T' x
微信开放平台简单介绍(6分钟)( R+ e; F, J% T$ _) r( Z
操作视频对象，提高用户体验(8分钟)6 {6 s* K9 o7 p. [0 \2 n
优化首页视频体验(13分钟)
6 v8 }8 J E; m14我的页面（上）% }! V6 v: X. g4 R
开发个人页面-header与导航栏设置(9分钟)
5 \- P1 b" {0 A6 i) \* Z 发个人页面-用户未登录和已登录的页面展示(9分钟)
- V8 ~7 c& Y$ N) Q+ V9 m 构建注册登录页面(8分钟). S% [+ j Y$ c$ d$ ~
button与form组件讲解(6分钟)
- F& ?& W6 {; v0 u E6 { 实现一键注册登录(12分钟)' ~, E5 @' C0 F- V: d: T. Z" J9 S
通过缓存切换是否登录状态(9分钟)7 h v# f* u, L2 m+ Z
构建用户账号页面(9分钟)0 y( v3 O9 D ^. _* j
清理所有缓存api(4分钟)
: [0 f; A: s+ e: V" ?; S4 w 用户登录错误提示与方法挂载(7分钟)
: x8 G1 y1 c8 G7 w* ]. b. o' a3 M 渲染用户信息数据(6分钟)
- H/ c$ Y! \" W15我的页面（中）. Q( g* U5 y$ `4 ^2 i# J `
用户退出登录(6分钟)
+ h- s1 B" K8 I0 U, v# C! I- u 第三方登录讲解与页面构建(16分钟)
' Z9 q3 `$ a- j: {* t5 I N 第三方登录-小程序端实现微信登录(15分钟)
8 `$ H" E, ]) k/ R/ q7 G 第三方登录-后端登录业务梳理（辅助理解）(10分钟)/ v# W" m( I% b; H5 O1 l
第三方登录-app端授权登录(8分钟)$ r( o3 }% D% v' o% ?7 ?
第三方登录-app端获取用户唯一id及信息(12分钟)
$ S, u0 F! v2 } 第三方登录-app端执行一键注册登录(7分钟) s0 d9 s2 g0 m/ M# a c0 b
查看预览用户头像(7分钟)
8 J0 b5 _3 e; c7 {! P5 l! K! T1 Y 选择用户头像(11分钟)1 s0 U( h. S- w) Y
重新选择头像(3分钟)
2 o2 B: G& u* R* T6 k3 }16我的页面（下）: v7 p( c& m+ S( a9 S
文件上传api与后端接口讲解(5分钟)
7 k' _: t1 k( f- H% p token令牌讲解、实现头像上传(23分钟)( {& h. L- w' E/ J" o6 n) t
引入图片剪裁实现头像上传(7分钟)5 Y% d8 t% [/ d0 N x* _% T7 V
用户修改昵称(18分钟)
" o7 Q5 m; b; l, \1 `2 ^ 用户修改生日(17分钟)
' x' ]3 f. h; T- S- [0 d$ r 用户修改性别(15分钟)! n2 x8 b$ X2 x$ O
17项目发布与上线
a$ e7 y+ ~5 u3 y+ ~: k 打包H5 web应用(5分钟)
- Y1 N! P( s8 l4 Q* w 购买云服务与简介(6分钟)
~. K/ f! v x! }# `& K: X# i 配置安全组，重置密码，上传nginx，配置ssh(14分钟)- _, `2 n; v7 o
安装nginx(9分钟)9 [. B( s+ ^9 ]! Z" Y4 M3 j/ H6 h
成功发布H5端web应用(14分钟)
# A4 J+ b; T% a 微信小程序上传审核流程讲解(8分钟)
2 @: ?( y- C/ n r, o! z% E' S 打包安卓apk(8分钟)
8 j+ ?' E4 n& [ 简述ios打包(8分钟)" c" O& Q& Y3 }/ }0 V" B
18课程总结9 a- M' @4 n) y5 y' f
课程总结与展望(9分钟)5 _2 A" L" L+ r, v- z& V) h
. [. l, g3 |. l* ?: ^, i7 V - i; X( [# |, h
: v! N* v& D% D4 f I |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
