|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
/ `1 g$ v3 P1 C$ m1 O5 H课程目录：4 |" f* f! z1 C2 P5 p9 o! |) \
01导学
, `6 V* h2 M" I5 E+ H# T5 O9 t* @6 g6 Q 导学(12分钟) ( u) \$ e0 t8 f2 N
学前必看！补充课：接口调用参数补充(6分钟)
/ J9 N/ T) o; F, t9 h1 b/ c6 e3 B 基础框架NextHelloWorld(rar，513.7KB)
# O3 Z+ a9 R. q: l1 x- n/ L 超英预告最新源码(rar，8.7MB)
" G8 P9 W: J, b! N9 | linux工具与ngxin安装(rar，37.3MB)
- v# h& e- ^$ `7 ]8 O logo素材制作(rar，730.3KB)
7 q: U3 X" d) ~02课程介绍: o& B) J# S" J1 n
什么是 uni-app(4分钟)& s" s6 I. g+ D+ F$ J
为什么要使用 uni-app(8分钟)
) t9 n6 Y( p- v1 u/ O& }( W+ g app多端发布效果展示(7分钟)3 p `2 x# R$ ^ c3 ~( d
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟). d$ v' d! K- a
微信、支付宝小程序开发工具调试(7分钟)
& {% m) s6 w! D$ A& s4 F5 t 在Mac上使用Simulator进行调试(5分钟)0 t0 @% J8 s. f6 U+ ^
03框架基础-上
+ N& s3 \# L% ^( H- m: x 简述MVC模式(9分钟)$ G9 B% o: `! G
图说MVVM模式(5分钟)
6 L# N' B# Y( a/ r( G 通过代码阐述MVVM与双向绑定(12分钟)
' E7 ~) C( W( N' j JSON对象和数组的渲染(4分钟)
; b$ G# l: o$ |: L9 a: s7 J: M 页面路由以及标题配置(11分钟)
4 l( U2 d. T4 m+ u1 p3 i 宏观讲解项目配置文件(16分钟)9 X$ u' b3 v7 s
应用的生命周期(11分钟)# y G; \ Q- \, q& X% y! g5 D& y' ]4 i( V
页面的生命周期(14分钟)
4 \' A% n+ M2 @: a% x6 J# R 固定像素px与响应式像素upx(12分钟)
" ? V% D& O* _- N/ E 在页面里使用{{}}表达式(7分钟)) F8 s$ t/ f4 Z9 a. p- z% S, S
04框架基础-下' m- Q0 b2 t, e3 t; B) H5 `( C
v-bind指令对属性的数据绑定(7分钟)) G6 ]0 V9 x1 i6 a: `
事件基础(22分钟) Y8 P3 L: T& D- `5 `
条件渲染 v-if与v-show(7分钟) J, J' t% I' d, |
条件渲染 三元运算(4分钟)! W/ P( Q6 f' ] O( z
列表渲染v-for的使用(13分钟)1 }3 T- o: j' ?, ?% ~4 u+ X
指令key实现for循环的组件唯一性(12分钟)7 @. j0 b. q6 p" L9 l Y6 v
嵌套循环的下标定义(4分钟)
?2 x! Q" g3 H+ H0 U 条件编译 - 上(10分钟)' b0 E! m0 _6 q. `: x, F3 m, p1 v
条件编译 - 下(7分钟)
; V# g7 Y( a) X8 K05样式与flex布局-上( H9 T5 }$ o7 q" K
flex布局介绍与模型(8分钟)
) g2 L/ h) l. q& j+ t: ~ flex-direction 元素的排列4种方向(10分钟)' }0 v' D$ e5 @& }
导入外部css样式(4分钟)& n- {% R5 f- \$ w9 b s6 [% R r
flex-wrap 元素的换行(12分钟)* j P4 J# n& g/ |
justify-content 元素在主轴的对齐方式(14分钟)4 N M) ?5 z+ _) ~
align-items 元素在交叉轴的对齐方式(12分钟)% T3 v2 T+ ~4 W9 O
06样式与flex布局-下; n! t) T5 X6 }4 p$ b) S
align-content 多轴线的对齐方式(13分钟)* s6 N+ ^2 L- b# ^* {( G- @
flex成员项的属性 - order(4分钟)6 w. s. L; C2 y% K: d% }
flex成员项的属性 - flex-grow(4分钟)
4 C, T& O& Q& R2 U flex成员项的属性 - flex-shrink(6分钟)8 a* w; s$ F- i& T6 e1 i9 j& g4 n
flex成员项的属性 - flex-basis(4分钟); v' E3 W! Y+ y: R( x# ^
flex成员项的属性 - align-self(6分钟)
+ T* O; q* M: g u& ?+ e07开发首页-上+ c# {) ] `' _; S, r/ R
创建项目，构建基础页面(8分钟) 免费试学# J& K) e8 j% Y3 B# z& i
构建tabbar(13分钟) 免费试学8 G7 }9 |1 q" p3 @" a, c& B( a8 R$ E
设置全局page，简述view组件(6分钟) 免费试学
! Y) z4 Z5 \& K# q5 Q9 Q, N 使用轮播图组件(11分钟) 免费试学% b) r; \2 T; Y+ x4 g. o$ g( [( [1 C2 _
禁用原生导航栏达到页面全屏化(6分钟) 免费试学
3 e5 `) w# s, \# \; C1 c 在线文档的使用(8分钟) 免费试学& g$ x( t7 J, o/ J- b
request网络请求api讲解(5分钟)7 S5 {9 t8 r. l3 }. A
uni.request动态获得轮播图数据(9分钟)% s# c0 Z" m4 N' l
箭头函数 this 作用域(4分钟)# |* M% M8 w+ n
渲染并且展示轮播图(5分钟)+ Z8 g/ r4 ]9 g1 {4 A6 H9 c/ x
08开发首页-中
8 t1 [' ^1 T0 l3 f& C3 }( v 引入组件实现全局变量(7分钟)1 D: k, d; O6 c- k5 S& ~. \5 r* J$ n
使用挂载实现全局变量(4分钟)' R! I& E' ^1 Q" r: R
在手机端进行微信小程序真机预览(6分钟)+ G1 I) @1 y3 @
微信小程序https使用事项(7分钟)
* \. _6 _7 t% H% Z7 _" a 开发热门超英 - 标题(9分钟)
" C6 R% I# h# v [3 _ 开发热门超英 - 简述scroll-view(4分钟)
p3 W5 G% Y2 }* u$ r 开发热门超英-使用scroll-view实现横向滚动(3分钟)
2 q! x N8 w3 X- Y; M( r" G 开发热门超英 - 海报与标题(8分钟)7 O) c F! j8 l
开发热门超英 - 评分(6分钟)0 x" \1 \1 f+ w2 {" T6 {" ]. F0 o
开发热门超英 - 动态渲染数据(8分钟)
& q1 u: L1 ~/ w4 O8 J09开发首页-下
" z0 H! v4 x- e" W: [' K( ? 开发自定义组件(7分钟)
# `. F; v/ f% M$ H$ _ 父组件向自定义组件传入值(6分钟)
8 t4 D# _* ^& `5 L! l 完成评分自定义组件(22分钟)
# O! j. W8 Y4 I 视频组件video讲解(9分钟)! T% k+ N& v9 t3 M8 O( x
获取预告片数据(3分钟)
- P- R2 f N* T 动态渲染预告片(10分钟)
$ F0 ]3 B2 v5 z5 P6 h# C 猜你喜欢 - flex布局嵌套编写(18分钟)
9 ` y0 u1 C, F: l# ~: O 猜你喜欢 - 编写点赞css(7分钟)
5 ?+ F8 F# |- M+ n. j& l I 猜你喜欢 - 实现点赞动画效果(14分钟)
1 M( c6 Z, y8 f/ v z 猜你喜欢 - 还原动画(5分钟)
8 a5 f' p7 } E. `! B10开发首页-终
9 G1 ?7 n+ R$ t$ f* f8 g1 @ 猜你喜欢 - 动态渲染列表(6分钟)
( V6 ~8 L2 D4 F4 N" d3 X( L 猜你喜欢 - 实现动画数组(7分钟)4 R, ~$ _! x% a8 h
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
1 i. l5 c" t0 o# k8 z: X6 e0 F/ H 猜你喜欢 - 开启下拉刷新(5分钟)* N) P, U! {* N' f( k7 Y) M
猜你喜欢 - loading交互api(8分钟), f4 i; \( ~* F
11构建搜索页-上
: c: i3 S, n5 ]# m3 w 搜索页面 - 编写搜索栏(19分钟), V8 J. j1 v$ H9 d9 S/ i+ r% z: x
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟), A9 @' _& O2 Q) B
搜索页面 - 动态获取最新预告并且渲染(9分钟)* D! ?% g: ^8 W, V6 k% k
搜索页面 - 分页接口api讲解(4分钟). R) E* ?4 C& P7 S# S, N( M, }' r
搜索页面 - 搜索前置准备(6分钟)3 w% U% u0 U: y& N
搜索页面 - 执行搜索动态渲染(8分钟) e; r$ z7 h" E; Y X4 _
搜索页面 - 监听下拉实现分页功能(8分钟)) d. r7 u( u, ?4 z4 ~( b1 R
页面路由api与传参(13分钟)& k4 r) J% e" j U3 }+ K
页面跳转组件的使用(7分钟) g) K. ]. ~" t I& ~- q
详情页 - 查询详情与视频渲染(8分钟)
* o1 D' V7 u5 p% w! y5 Y! b: K12构建搜索页-下% g R, @, J0 Z- [# `
构建预告片基本信息(16分钟)# r' Y* @4 X" R/ d c
构建评分快与阴影效果(15分钟)
& p" g; P/ b" I/ _ 解决错误数据绑定undefined(5分钟)
, ]$ l1 u/ @6 R0 p- h5 e 编写分割线以及剧情介绍(8分钟)
, ?% p- ^: c: a" V8 m 构建剧照与演职人员数据列表(10分钟)
3 E% e! Y; ~3 M( P: l P 渲染剧照列表(8分钟)
0 q& ^9 }- T- H0 m1 [5 ?3 S 双拼数组构建演职人员列表(12分钟)
9 L+ i5 X/ @) k& c c$ J 渐进式导航栏设置(6分钟)
) x9 j- v& [0 C$ t8 y 通过预览api实现剧照预览(7分钟)
8 T( _: [- o9 [3 J6 B u 演职人员数组拼接预览(8分钟)
. A/ x& j# l' V' z; R7 ^/ G: C13电影详情页构建
& D: H+ l2 m- P. u 自定义预览封面图(13分钟)
) K* |1 B4 e/ u actionSheet接口api使用(6分钟)! _* x1 k7 I* a4 J+ `* W9 l( C' T
下载以及保存图片(15分钟)2 W! J9 s) s i. q
配置https下载合法域名(5分钟)" U, i( a7 _+ c0 M5 I6 Q1 F( L
实现小程序中的分享转发功能(9分钟)
9 I6 }8 q% L2 _ 自定义导航栏按钮(11分钟)% h! n4 U' l) ^
分享到朋友圈(9分钟)- ]- E7 r9 ]1 Y3 M7 Z9 o$ W' ^
微信开放平台简单介绍(6分钟), y# ~9 ~/ l4 e: d6 C; n7 B; |
操作视频对象，提高用户体验(8分钟)
8 \. S# h" h& u" C1 ~; f9 Z/ S9 a 优化首页视频体验(13分钟)" V" D+ c; p p" O
14我的页面（上）1 O$ K" q" Z m3 \0 |1 H; i' p
开发个人页面-header与导航栏设置(9分钟)0 W9 v- S. S5 z$ A/ a
发个人页面-用户未登录和已登录的页面展示(9分钟). i# E4 H: N2 l. s0 q
构建注册登录页面(8分钟)
& W( J9 A5 A, O" O1 e button与form组件讲解(6分钟)
4 |$ ]" Z6 e( s( A5 y9 ~( M: ?/ E 实现一键注册登录(12分钟)
, q# k5 T0 W2 u+ ~9 | 通过缓存切换是否登录状态(9分钟)
! k, t) z0 _" f; t* w$ }9 q' x6 ? 构建用户账号页面(9分钟)- `# u# X4 Q( K1 R7 b( s
清理所有缓存api(4分钟)5 Z# X/ M9 |- h' `
用户登录错误提示与方法挂载(7分钟)
% i! ?. g7 t7 Y$ E 渲染用户信息数据(6分钟)
, c' t! t$ K5 Q- a7 }: v15我的页面（中）# q, W1 {! V$ K ~; ]( N$ D5 V
用户退出登录(6分钟)
, t" @- s2 D w" q 第三方登录讲解与页面构建(16分钟)- u x( f7 ]& V- D
第三方登录-小程序端实现微信登录(15分钟)8 N' ^4 G/ V9 W6 F8 |, f
第三方登录-后端登录业务梳理（辅助理解）(10分钟) A! N3 b/ \1 v9 n! f1 I
第三方登录-app端授权登录(8分钟)
% Z- h' Y) y5 a 第三方登录-app端获取用户唯一id及信息(12分钟); e: n; z! b% q! [7 w l
第三方登录-app端执行一键注册登录(7分钟)) M7 ?# X( l& J; {) L; H/ S$ k
查看预览用户头像(7分钟)( a \4 W) [$ `
选择用户头像(11分钟)' L1 _& \$ U( Z, o$ }
重新选择头像(3分钟)
2 I& s' b% ^; @6 o, n2 c9 e. b) B16我的页面（下）
) T; [/ h3 {. _) P6 x 文件上传api与后端接口讲解(5分钟)
$ g9 z0 j1 a* T9 l) u token令牌讲解、实现头像上传(23分钟)
4 ^* a* A2 n9 u; S2 o2 y% }. c5 i0 } 引入图片剪裁实现头像上传(7分钟)' ]8 ?1 e, h6 m( v. G
用户修改昵称(18分钟)" m. C; z* C( l$ A* `' ^
用户修改生日(17分钟)
1 w( o* N9 q) J; v3 ?2 n/ V 用户修改性别(15分钟)- {1 c9 a4 n0 K6 l, _" E
17项目发布与上线
, h1 U$ c4 a0 P8 z. g 打包H5 web应用(5分钟)
. {; w8 K) m/ ?$ v0 m2 [ 购买云服务与简介(6分钟)( N8 Q* J* A( V0 n
配置安全组，重置密码，上传nginx，配置ssh(14分钟)
# e; F _4 r% w& ? Q h) X 安装nginx(9分钟)
/ [$ a/ D& D+ d- k, m' { 成功发布H5端web应用(14分钟)
. @( u8 ?" z, ?% Q* s5 u 微信小程序上传审核流程讲解(8分钟)* u+ h* |% a2 ^) o
打包安卓apk(8分钟)& t5 }# s$ A" t2 k
简述ios打包(8分钟)& |: T% J M. C' z0 D
18课程总结
2 \8 w6 A8 {( i* ]8 U0 Z 课程总结与展望(9分钟)' p1 G. @4 p% q
$ T+ L0 x# b- N7 R( }
8 u) Q `% g: j8 C) S
3 F! n/ J% }$ X. g' R4 h3 y7 L |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
