|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。' L, t) c& V, E: R3 t# L2 J% i$ \4 t
课程目录：
5 \5 M5 w: b: F+ L0 y& c01导学
9 ~! q' \ C4 v9 s+ W 导学(12分钟)
: N E# u8 h. \1 P 学前必看！补充课：接口调用参数补充(6分钟)8 [9 b* b. H' q: a
基础框架NextHelloWorld(rar，513.7KB)
2 u( B) A! ]) P. j8 j 超英预告最新源码(rar，8.7MB)- f, X& T; {4 m s
linux工具与ngxin安装(rar，37.3MB): @& I. P2 r. }5 K% N1 {
logo素材制作(rar，730.3KB)
3 {: D8 G& Z; B$ ~ W1 w02课程介绍- u) |' S( c* F
什么是 uni-app(4分钟)4 x" Y2 O, B5 t. n/ c( c8 @5 G8 K
为什么要使用 uni-app(8分钟)* J5 m: d0 l+ V; L$ g e
app多端发布效果展示(7分钟); C1 d; B5 [6 e* H! @1 ~
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
7 G+ n1 J' I; J( @ 微信、支付宝小程序开发工具调试(7分钟)0 G/ V+ e& ^% P0 u+ c* J
在Mac上使用Simulator进行调试(5分钟)1 l8 F+ `; i5 u/ K7 ?; L
03框架基础-上
! M1 I- v( W5 }3 H' R, N 简述MVC模式(9分钟)- q, D& u9 @, h8 i( s4 {0 S/ ^& J
图说MVVM模式(5分钟)
( q' t' P$ g+ ?6 _ 通过代码阐述MVVM与双向绑定(12分钟)/ F4 J `3 Q0 A
JSON对象和数组的渲染(4分钟)
7 ^; m" |- |6 ]: F3 S" f 页面路由以及标题配置(11分钟)) C7 E: S! `/ j/ W% S2 a9 s& y9 }
宏观讲解项目配置文件(16分钟)3 v; V* j1 G! i* n, ~/ d. B
应用的生命周期(11分钟)
% \- a, X$ F4 q" o3 } 页面的生命周期(14分钟)7 ]; B0 u6 l2 p9 R5 b
固定像素px与响应式像素upx(12分钟)
% C5 T( E9 [/ Q 在页面里使用{{}}表达式(7分钟)
$ W* T Q4 c# e; e* V1 B04框架基础-下
" S, S/ V# r L7 H/ u v-bind指令对属性的数据绑定(7分钟)4 l: i) A M8 Y9 ^$ h7 J
事件基础(22分钟)
; a) O3 c% S0 E6 t/ }$ z2 U# h6 j 条件渲染 v-if与v-show(7分钟)
+ v1 Z. Q ^1 K5 i8 J: R 条件渲染 三元运算(4分钟)8 L# U2 d3 U( x0 m
列表渲染v-for的使用(13分钟)
R9 u! R' z4 O0 j+ I; v& B 指令key实现for循环的组件唯一性(12分钟)
- t2 R8 l1 @( d7 c& G% } 嵌套循环的下标定义(4分钟)1 J6 B A' k8 l: {0 G6 ^: c8 a/ a
条件编译 - 上(10分钟)
0 S) H8 X; q4 h" E5 ^( X3 _ 条件编译 - 下(7分钟)4 ~9 D8 I! c, `
05样式与flex布局-上& N: k3 O0 {- g2 j3 m% ?
flex布局介绍与模型(8分钟)/ u8 L( _, s" X2 h
flex-direction 元素的排列4种方向(10分钟)
1 y ~: v* K: e9 ~# G 导入外部css样式(4分钟)
T: {4 e6 J. L8 ^* a3 w( ~ flex-wrap 元素的换行(12分钟)( h% v6 |- J1 n
justify-content 元素在主轴的对齐方式(14分钟)
" H A- `8 a& C5 M. W) Q align-items 元素在交叉轴的对齐方式(12分钟)1 t% ]& b3 Y5 r% a; q, `
06样式与flex布局-下
9 R- [+ U& _3 ^+ U align-content 多轴线的对齐方式(13分钟)
1 F2 j" O: U3 d( L% M- i flex成员项的属性 - order(4分钟)8 n: r6 C8 ~; ?: g l' \
flex成员项的属性 - flex-grow(4分钟)
& _5 e- v- c, I& a flex成员项的属性 - flex-shrink(6分钟)( x6 ^, e/ z3 l
flex成员项的属性 - flex-basis(4分钟); s5 X5 E2 a2 h: s) _1 o( ^! E
flex成员项的属性 - align-self(6分钟); Q8 E4 O9 r; t2 o
07开发首页-上
) l c9 N. X& q( T) W% w k |& X 创建项目，构建基础页面(8分钟) 免费试学* P9 h% P1 j- x" u& I" l5 d% T
构建tabbar(13分钟) 免费试学
+ E0 c9 P$ n, T4 u3 j1 S 设置全局page，简述view组件(6分钟) 免费试学3 y3 r# e9 q, Q0 f+ w5 W0 g# }+ ]) v
使用轮播图组件(11分钟) 免费试学
3 ]7 ^- o$ K- H- h 禁用原生导航栏达到页面全屏化(6分钟) 免费试学
) q+ f7 T% q6 E$ ?# t; Q* W7 a! ^ 在线文档的使用(8分钟) 免费试学" m* c4 ?, a. o2 S; B! p- u6 ^- ?! B
request网络请求api讲解(5分钟)
; \3 Z9 X& l5 L6 ?: u8 \. A uni.request动态获得轮播图数据(9分钟)1 y$ |, Q- A% m9 S# x
箭头函数 this 作用域(4分钟)# z5 w. s: P; o
渲染并且展示轮播图(5分钟)
( b9 p3 j( {" f$ w/ |6 z1 Q4 ?08开发首页-中
7 Y2 U( ?1 J* I) o4 @4 f6 Y. \) E 引入组件实现全局变量(7分钟)/ m" |$ i0 |$ N7 B. a9 g( Y" J
使用挂载实现全局变量(4分钟)0 H5 v. U# n. c# k# J& i
在手机端进行微信小程序真机预览(6分钟)9 h* p! z( P' \- w' Q% {+ M
微信小程序https使用事项(7分钟)0 \2 k3 e" W3 R# j q
开发热门超英 - 标题(9分钟)
" G5 h2 H k7 U, W) O2 ] 开发热门超英 - 简述scroll-view(4分钟)
f1 H& ]+ E) a6 h0 v 开发热门超英-使用scroll-view实现横向滚动(3分钟); ?' C$ Y5 J2 I5 N+ a5 {& ~. @
开发热门超英 - 海报与标题(8分钟)
0 B8 f4 L- }3 {$ d 开发热门超英 - 评分(6分钟)
0 ~" J! B- b. H4 m, ]7 U$ M 开发热门超英 - 动态渲染数据(8分钟)& S% y4 }+ I9 K& Z( N$ I; E7 E. \
09开发首页-下
. s" u: u. B t* l6 s 开发自定义组件(7分钟)
% O' n# R c T0 [$ B 父组件向自定义组件传入值(6分钟)
5 g6 H! ?5 f* H 完成评分自定义组件(22分钟); u8 F0 F) D4 T: s9 N/ ]) S& r
视频组件video讲解(9分钟): r- U% l8 j9 Q2 F3 K6 Z% {
获取预告片数据(3分钟)% K! a9 u M) d+ S. y: U% p+ h5 F
动态渲染预告片(10分钟)
% I" W7 R1 a$ X3 j0 w5 \: e. o& M 猜你喜欢 - flex布局嵌套编写(18分钟)# d2 p) d; I; N( T1 V6 j" A3 R
猜你喜欢 - 编写点赞css(7分钟): }: D( d( ~7 j4 w( m" J5 Q
猜你喜欢 - 实现点赞动画效果(14分钟)9 x" x0 _( q+ V! I( F5 U
猜你喜欢 - 还原动画(5分钟)0 q% |% h# j: B* `! v7 D7 e
10开发首页-终; ~9 S P& f# p6 a2 g
猜你喜欢 - 动态渲染列表(6分钟)! }) k1 P2 i: ^! B% ?3 [2 f$ y" r
猜你喜欢 - 实现动画数组(7分钟)/ l1 y# _% p2 y3 ?/ V
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
, r' r7 A5 F( ?3 S8 ` 猜你喜欢 - 开启下拉刷新(5分钟)" U) } v+ U! D' D8 {
猜你喜欢 - loading交互api(8分钟)
/ |7 g3 q( T7 p4 l' Y2 M& s11构建搜索页-上
! T- v j% D' k+ [' A4 | 搜索页面 - 编写搜索栏(19分钟)0 s8 Y' T g! ~9 Z
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)4 L' G G! a) I- \6 S
搜索页面 - 动态获取最新预告并且渲染(9分钟)' A# ?+ }2 g4 Y4 K$ X
搜索页面 - 分页接口api讲解(4分钟)( _, V/ D+ d/ y2 V4 e
搜索页面 - 搜索前置准备(6分钟)* ?2 v* J* s/ U. V
搜索页面 - 执行搜索动态渲染(8分钟)# s& d& u* m6 ?; d* l, x; c
搜索页面 - 监听下拉实现分页功能(8分钟), S/ j/ D) o y1 d9 X( D# B& j; q
页面路由api与传参(13分钟)
/ n$ ~. k' T0 x+ D 页面跳转组件的使用(7分钟)
- M+ V4 A1 x' j5 o9 S2 |. t 详情页 - 查询详情与视频渲染(8分钟)* L+ F9 k0 {4 M8 e P5 `2 ] ]3 A
12构建搜索页-下1 ]2 h* o8 \# U8 z h
构建预告片基本信息(16分钟)6 q; q* T, O2 U# ^
构建评分快与阴影效果(15分钟); i9 c7 o' K- e5 |. Z" g2 R
解决错误数据绑定undefined(5分钟), ]* X5 `. N- f K
编写分割线以及剧情介绍(8分钟)
% K& M) d( l/ ?6 Y4 h- ~( G 构建剧照与演职人员数据列表(10分钟)
, `# x8 f, q/ b% ~ 渲染剧照列表(8分钟)
' y5 _6 C; ?) o' |+ S; x 双拼数组构建演职人员列表(12分钟)
( L1 `6 C* k o; A7 J0 m! F/ `) G 渐进式导航栏设置(6分钟)/ }# n9 n7 k9 C! l$ k7 O
通过预览api实现剧照预览(7分钟)
! Q0 d E9 W8 p: k, x 演职人员数组拼接预览(8分钟)
2 e" J2 k. X9 v9 ~# O2 Z13电影详情页构建
, E5 _0 M. E# v# h x 自定义预览封面图(13分钟)( U/ `$ s8 d5 \3 x: d# a
actionSheet接口api使用(6分钟)" U+ Z& |: S) i2 {9 x
下载以及保存图片(15分钟)
, F4 d6 `! y, x" g$ ~ 配置https下载合法域名(5分钟)
5 O) V1 H2 H; l4 d6 f/ x/ U 实现小程序中的分享转发功能(9分钟)
, `6 P# W# e( k. D# C 自定义导航栏按钮(11分钟)1 y7 z9 ~& B; m# a
分享到朋友圈(9分钟)
7 Z d( F: r9 Q- R1 g4 W7 c 微信开放平台简单介绍(6分钟)
, L, Z' n( H& m @ F 操作视频对象，提高用户体验(8分钟)4 v- t& [: T7 k" s
优化首页视频体验(13分钟)1 w0 a6 E2 R. J" W: W, w
14我的页面（上）8 H; j, P) W; E/ y
开发个人页面-header与导航栏设置(9分钟)# n4 z$ [9 t3 T" P+ u1 S
发个人页面-用户未登录和已登录的页面展示(9分钟)
- k; n0 I0 ]/ F3 B0 M6 I 构建注册登录页面(8分钟)' K: W% @& T( U* z1 R
button与form组件讲解(6分钟)" S8 Q0 n. t$ C( N3 N+ G5 U% m" I
实现一键注册登录(12分钟)
6 C5 j; z: l, A$ L4 K/ k3 B 通过缓存切换是否登录状态(9分钟)" i: ~, M$ M3 Y; ?* v
构建用户账号页面(9分钟)1 U. \' M3 i' u5 N& l
清理所有缓存api(4分钟), s; A( q3 C. x+ o
用户登录错误提示与方法挂载(7分钟)9 ^9 g( W: D% {- r9 f: k
渲染用户信息数据(6分钟)
& ~- g2 w" g s15我的页面（中）
\+ N% T" T$ }9 z: S 用户退出登录(6分钟)
3 X3 _8 h/ y$ A8 w 第三方登录讲解与页面构建(16分钟)
+ o/ N! v3 S+ J c3 @& D 第三方登录-小程序端实现微信登录(15分钟)' C& f; s! Q( n2 B* y5 q
第三方登录-后端登录业务梳理（辅助理解）(10分钟). p8 {- L' n% Q! R5 I0 D
第三方登录-app端授权登录(8分钟)9 I% q% X7 D9 E" J
第三方登录-app端获取用户唯一id及信息(12分钟)
! u0 e* j G7 C/ s 第三方登录-app端执行一键注册登录(7分钟)
* Z, J5 c* h, ~/ T7 L 查看预览用户头像(7分钟) E9 \' [' O- R+ M# G( L2 u
选择用户头像(11分钟)" O0 a; m4 | |+ K
重新选择头像(3分钟). d! A! n. G6 a. a; Y7 c/ @# A
16我的页面（下）5 ^4 @4 L# p% |& Q/ y9 b% [* K
文件上传api与后端接口讲解(5分钟)8 r" u, @/ _) ]% z( {& V S2 G
token令牌讲解、实现头像上传(23分钟)0 Y1 h+ A/ O& p' n6 R& g& i
引入图片剪裁实现头像上传(7分钟)6 v, h; @/ o# ~
用户修改昵称(18分钟)
5 f3 i, r5 |. m. C 用户修改生日(17分钟)/ U; G n' @. u+ |4 R+ Z
用户修改性别(15分钟)
5 n, M* Y5 J4 P- k3 E17项目发布与上线
& k3 @3 X/ s1 y 打包H5 web应用(5分钟)
! }- J3 p6 R5 K9 ? 购买云服务与简介(6分钟)
' g4 s7 c! E3 Y) h 配置安全组，重置密码，上传nginx，配置ssh(14分钟)% Z# t K; h$ [
安装nginx(9分钟)
M! A& d& V# c2 s, z- Y& c! n 成功发布H5端web应用(14分钟)
/ `+ ^1 {7 Q4 B! n. k- ]- s0 b8 c 微信小程序上传审核流程讲解(8分钟)8 m/ l* C: U- H7 E
打包安卓apk(8分钟)
9 V+ |) w5 j$ p/ V 简述ios打包(8分钟)
3 i# ^1 h F- D1 e' F5 x18课程总结
# q% F- W* ~% \ 课程总结与展望(9分钟)
" Q: }* }0 Z' T1 g$ z: L0 x1 F0 c1 B( W0 b6 k. [9 Y7 n/ H% l R
% e3 L# p% ^- }, F
: Y: E6 Y5 N9 v5 h6 l/ P |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
