|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。, k; _' j4 e+ T+ c
课程目录：
- t2 A' `; F$ }- q01导学7 Z+ E: l, a8 ]8 T$ ^
导学(12分钟)
+ v/ O, h0 X8 Z1 N6 w* S2 i7 { 学前必看！补充课：接口调用参数补充(6分钟)
: t# x% u) V/ V- S% }$ }6 T8 j 基础框架NextHelloWorld(rar，513.7KB), a/ X, |6 Q' Z& Q
超英预告最新源码(rar，8.7MB)" r" E% C3 V/ z7 U. n+ v
linux工具与ngxin安装(rar，37.3MB)
4 D; Y' @) d2 K3 n- X: @ logo素材制作(rar，730.3KB)
; G; r6 m7 T5 ?) D3 o4 N7 R- }- Q, K02课程介绍, x) z K: A7 |- i$ s) M
什么是 uni-app(4分钟)0 M& S6 q; E* J' g: E8 ?8 t, }: b
为什么要使用 uni-app(8分钟)
$ W5 N4 J7 h: g4 T6 Z app多端发布效果展示(7分钟). I& w% R" D1 J& N( J. N
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)) \; c7 J9 \3 T% h
微信、支付宝小程序开发工具调试(7分钟). B& A! p. e2 c2 f; Q; T
在Mac上使用Simulator进行调试(5分钟)
+ [ L: ` j' A3 d; \, b$ s6 `% s/ @03框架基础-上
( \) T7 o Z; P! b 简述MVC模式(9分钟)8 p5 i( }# X- D
图说MVVM模式(5分钟)
3 H- ^! k7 |# O2 R# Y Z 通过代码阐述MVVM与双向绑定(12分钟)
. { ^' z- @2 e2 C2 g5 P; I# | JSON对象和数组的渲染(4分钟)
8 r4 ]$ _) r) ?% q! t% b+ | 页面路由以及标题配置(11分钟), q- t+ e( O$ S6 N! W# L
宏观讲解项目配置文件(16分钟)
) o5 b* G/ S4 r 应用的生命周期(11分钟)
2 I+ w0 c( q* l2 o( y 页面的生命周期(14分钟)
6 K; S- W+ @: U 固定像素px与响应式像素upx(12分钟)
- O7 P1 K0 G% j: n7 B3 S9 e5 J 在页面里使用{{}}表达式(7分钟)5 M* Q7 f+ |9 c. A2 A
04框架基础-下
* }+ @- D7 O+ _ v-bind指令对属性的数据绑定(7分钟)
9 X9 @4 x: K% R# I3 f! o 事件基础(22分钟)
1 d/ D r; F% | 条件渲染 v-if与v-show(7分钟)
9 f/ d% s/ p) f3 g' y( \* k5 n) N" E 条件渲染 三元运算(4分钟)6 u6 I5 k$ |" G* r2 W7 y6 j
列表渲染v-for的使用(13分钟)5 }* F! _2 W$ u8 ?/ |$ D, H8 C
指令key实现for循环的组件唯一性(12分钟)7 b* f" f! }& b- J1 m# `' r7 b
嵌套循环的下标定义(4分钟)+ J1 s8 T0 W# c5 m# z5 u" s
条件编译 - 上(10分钟)
) F# P3 E4 n* e/ p 条件编译 - 下(7分钟)$ j W7 r5 @ A: T, n/ i2 Z! _) q
05样式与flex布局-上; h; J) |& t# i8 m
flex布局介绍与模型(8分钟)) k. I! M/ _' |! c1 E
flex-direction 元素的排列4种方向(10分钟)
6 t/ @/ S4 b8 A% D 导入外部css样式(4分钟)8 m8 B# A- `( m8 W% Q+ M
flex-wrap 元素的换行(12分钟)' b1 ~2 z# O# J2 f( K# c P
justify-content 元素在主轴的对齐方式(14分钟)6 G7 L3 B& u! X
align-items 元素在交叉轴的对齐方式(12分钟)6 b8 o" X; ~& U" ~, d% w3 ]" r
06样式与flex布局-下; p: q2 m# R8 ?" s. _
align-content 多轴线的对齐方式(13分钟)1 H& I# z9 z- K0 x" w
flex成员项的属性 - order(4分钟)
; J0 s3 _2 M, [ flex成员项的属性 - flex-grow(4分钟)
9 p7 w9 d9 C, h flex成员项的属性 - flex-shrink(6分钟)
9 `: N, w) D" o flex成员项的属性 - flex-basis(4分钟)
! J! A2 s& L/ B0 v; G flex成员项的属性 - align-self(6分钟)* z" m5 n5 @, o3 C7 u0 y3 d
07开发首页-上
. I! [3 K# J9 q" w2 ~5 Z 创建项目，构建基础页面(8分钟) 免费试学6 H, E1 m5 }& m
构建tabbar(13分钟) 免费试学
* C6 z6 j; `2 w: r4 { 设置全局page，简述view组件(6分钟) 免费试学- N& g2 b" }0 n
使用轮播图组件(11分钟) 免费试学
, {" {' u! @' t' Z' Q& R# ^ 禁用原生导航栏达到页面全屏化(6分钟) 免费试学
7 Q. N3 n. Y1 @, c+ {) Y4 }) I% A 在线文档的使用(8分钟) 免费试学- e0 `& m7 }+ H. E
request网络请求api讲解(5分钟)* d5 H' j: ^5 X: e% w! c
uni.request动态获得轮播图数据(9分钟) i/ \# _4 [2 H! V0 V7 o1 v3 c
箭头函数 this 作用域(4分钟)
9 @3 I1 R r0 }4 k ]4 p 渲染并且展示轮播图(5分钟)6 g! k& i( k) r& H5 L
08开发首页-中
1 \. m6 X: o! N+ Z( J 引入组件实现全局变量(7分钟) T, v9 M! j8 D1 q1 b
使用挂载实现全局变量(4分钟)$ P+ `; j; C4 a/ S
在手机端进行微信小程序真机预览(6分钟)8 O! b/ E5 Z' T3 A. y0 G! ^- L: F
微信小程序https使用事项(7分钟)
G9 t, ^$ n) K8 M+ S 开发热门超英 - 标题(9分钟)
% H' p& z9 j' W3 Q' X$ M6 X6 b 开发热门超英 - 简述scroll-view(4分钟)
, K( A5 j( }, h' q. w& X 开发热门超英-使用scroll-view实现横向滚动(3分钟)
& I- c6 z8 y1 f6 H6 y3 R; R& W( T8 V2 W 开发热门超英 - 海报与标题(8分钟)
. m- Y) j! B. E2 x) v 开发热门超英 - 评分(6分钟)
! H. R( ?" M7 u5 M" ~7 X" N: u+ R 开发热门超英 - 动态渲染数据(8分钟)
: @, l% g. b' Z! K! F% r09开发首页-下# V- l" S: T- o, j
开发自定义组件(7分钟)2 K! {3 P) W: V# ^: k* e0 y) x6 E
父组件向自定义组件传入值(6分钟). t% `2 q8 r# U3 K0 z
完成评分自定义组件(22分钟)
- R8 T: b- ^1 v R3 H5 C, j+ I 视频组件video讲解(9分钟)
0 C7 R3 F% K% ` 获取预告片数据(3分钟)
; D6 _+ I6 y' \3 g8 z6 @0 _% B5 Y 动态渲染预告片(10分钟)
. k. U6 R0 g& _5 M' | 猜你喜欢 - flex布局嵌套编写(18分钟)" S+ m; H. a) Q; a
猜你喜欢 - 编写点赞css(7分钟)
6 Z+ @7 m" M. t 猜你喜欢 - 实现点赞动画效果(14分钟)9 v4 {# B0 h$ F {( T& @
猜你喜欢 - 还原动画(5分钟)' R% d: F% K3 H, a( ^1 C
10开发首页-终! j o/ |6 P! ? P+ A! B
猜你喜欢 - 动态渲染列表(6分钟)/ \% P1 ~! A9 q, F5 {. }
猜你喜欢 - 实现动画数组(7分钟)
1 M3 f0 @( E3 ]* } w; ^ 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟); ?) r t6 a9 V a
猜你喜欢 - 开启下拉刷新(5分钟)
& A1 N5 L' Q; \1 Z( d2 n 猜你喜欢 - loading交互api(8分钟)
" ? t7 d. V- |* t- t$ b' q11构建搜索页-上3 z8 g* l6 O7 t( l3 M
搜索页面 - 编写搜索栏(19分钟)0 p, \+ Q: q" C6 i. {, e3 M
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟) l5 K6 x% F9 m0 j
搜索页面 - 动态获取最新预告并且渲染(9分钟)
) ^7 H' M5 F9 W 搜索页面 - 分页接口api讲解(4分钟)
1 t4 e x, f% i7 Z3 R2 U 搜索页面 - 搜索前置准备(6分钟)1 p% H3 D0 i) x
搜索页面 - 执行搜索动态渲染(8分钟)
# c9 L1 H0 }% Z' S0 H1 l 搜索页面 - 监听下拉实现分页功能(8分钟)
0 p9 F4 W |- o; D 页面路由api与传参(13分钟)
4 U5 ~8 A" m+ d# ] 页面跳转组件的使用(7分钟)
7 t k1 f) b0 }8 z 详情页 - 查询详情与视频渲染(8分钟)# w9 Y. X7 ?) \7 a/ W
12构建搜索页-下
& I; S3 d3 V. B2 [+ L d% J6 I6 f 构建预告片基本信息(16分钟)& \+ p; I2 ~# C, E+ J
构建评分快与阴影效果(15分钟)( Y8 }& i7 I; H6 Z6 m0 _" g
解决错误数据绑定undefined(5分钟)
7 V2 O* j2 D2 Z S3 {& c 编写分割线以及剧情介绍(8分钟); w' ? T2 T- X. _) `
构建剧照与演职人员数据列表(10分钟)
; c' H. Z2 t, a2 O% y6 d& i 渲染剧照列表(8分钟)" v% g; i" x+ J
双拼数组构建演职人员列表(12分钟)
' T5 N% n3 |/ s4 N1 p1 p7 H 渐进式导航栏设置(6分钟)
& |- a* D4 `0 s6 T) Y" z' l 通过预览api实现剧照预览(7分钟), _6 T( u2 ~, u7 }6 l7 S
演职人员数组拼接预览(8分钟)3 u C0 e9 _& i( \, x! `4 M4 i. L
13电影详情页构建
" m2 \: S/ T$ P* @7 h3 h 自定义预览封面图(13分钟)
# b2 {6 a' a$ e actionSheet接口api使用(6分钟)
) }+ G9 F$ K% {% \ ^& p ^ 下载以及保存图片(15分钟)' e( ^1 Z4 j) _3 |/ o7 S6 k
配置https下载合法域名(5分钟)* b1 \' D) u1 v6 P8 V
实现小程序中的分享转发功能(9分钟)/ W# q* l. k& ]$ n( z6 z
自定义导航栏按钮(11分钟): Y$ d2 s' ^3 |5 |$ I
分享到朋友圈(9分钟)/ \2 n2 g' f+ A" s
微信开放平台简单介绍(6分钟) y- D# O& Q3 w1 d
操作视频对象，提高用户体验(8分钟)+ g, |3 v; s0 f# d o d, }
优化首页视频体验(13分钟)9 C3 l: f; v6 o8 ?- V- E
14我的页面（上）
0 H$ ~6 r2 I( D: L5 z 开发个人页面-header与导航栏设置(9分钟)
. C# p' @% Q9 W2 C; n 发个人页面-用户未登录和已登录的页面展示(9分钟)0 O6 N& l4 Q8 t/ |' y
构建注册登录页面(8分钟)+ ^: q+ }* K2 I
button与form组件讲解(6分钟)
9 \/ b2 Y- q1 M) a% ~ 实现一键注册登录(12分钟)
, M' Q& m$ `/ t% C 通过缓存切换是否登录状态(9分钟)3 u. q8 q: j: i1 m
构建用户账号页面(9分钟), P# K8 I m0 i6 R: L" [
清理所有缓存api(4分钟)
' c. L; \1 W' I: m 用户登录错误提示与方法挂载(7分钟)! U; O/ L2 d2 @/ q& Y# e0 }7 t
渲染用户信息数据(6分钟)
+ ]9 O( s4 H$ E0 ]15我的页面（中）
+ \% D' n; Q% R 用户退出登录(6分钟). z7 B" \+ f" `
第三方登录讲解与页面构建(16分钟)( E% h; x8 ]' U% x
第三方登录-小程序端实现微信登录(15分钟)
9 r" P7 O+ n) x8 Q3 h @ 第三方登录-后端登录业务梳理（辅助理解）(10分钟)
, F/ x2 {- U) \8 E* n 第三方登录-app端授权登录(8分钟)
( p C% g5 P& i7 c* b 第三方登录-app端获取用户唯一id及信息(12分钟)0 G4 y4 v& G/ r) L( I
第三方登录-app端执行一键注册登录(7分钟)5 l- d7 J9 j6 r7 }; j
查看预览用户头像(7分钟)
) V/ i8 W! ^* Z, i. C$ B4 Q' M: Q9 a8 q 选择用户头像(11分钟). \) w5 i9 _, P9 ?
重新选择头像(3分钟)7 j$ f5 X, m( t" h
16我的页面（下）0 d& k9 ^5 Q( m5 s2 g# o7 B
文件上传api与后端接口讲解(5分钟)! y' ]+ N0 S; I( m( D
token令牌讲解、实现头像上传(23分钟)
0 K& h' }5 c" }1 Q 引入图片剪裁实现头像上传(7分钟)
* f# q& M* F1 v+ `0 X! `# S: p 用户修改昵称(18分钟)
* ?# I* h8 p9 y2 I4 g" `+ T: T 用户修改生日(17分钟)
5 T! G, O' o1 j# v. V 用户修改性别(15分钟)8 {6 i1 r7 n2 g6 U$ a9 W$ @
17项目发布与上线4 |- ^/ a% x0 }$ h
打包H5 web应用(5分钟)
2 k0 S# V( K/ G 购买云服务与简介(6分钟) a. R) N' r! I& v0 A
配置安全组，重置密码，上传nginx，配置ssh(14分钟)
+ J8 ~& e: i5 z 安装nginx(9分钟)
# m. j7 a( a( E- w; i# P! v 成功发布H5端web应用(14分钟)8 e) A# y; y6 k
微信小程序上传审核流程讲解(8分钟)% D2 y0 A# H" _" S& V% U: B
打包安卓apk(8分钟)2 T# w2 o: W2 D+ Q# W& H* k5 j( b" Y7 Q
简述ios打包(8分钟)
1 Y/ G F! ?: f5 F; A- h' }+ ?3 m- |18课程总结
4 A( `9 e, G0 Z) x% p: G8 X: q 课程总结与展望(9分钟)* [7 M: o" j E: d6 |% J) \
- F4 N% N7 D2 d* `" \
# L% S, f/ |* ]0 ^8 E5 ^. i/ c- v
5 Z+ U6 z% u7 a; K3 C
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
