|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。% } F8 N3 S; ^4 m
课程目录：% p1 d4 y( J- |0 }
01导学5 A* S# p: x9 p; T, X
导学(12分钟)
8 [9 T9 j! O- j4 J 学前必看！补充课：接口调用参数补充(6分钟)
+ V9 o* T$ z8 V* A& a# U 基础框架NextHelloWorld(rar，513.7KB)
6 c' P# l6 ?* C; {, Z 超英预告最新源码(rar，8.7MB) D5 {9 y) L! e4 h, b& K, K
linux工具与ngxin安装(rar，37.3MB)
2 T' ?/ q* e+ m& ` logo素材制作(rar，730.3KB)
. I" o/ F D1 F- u/ o02课程介绍
, u# ^9 P- H. c# R( M6 u3 w# C! J, k 什么是 uni-app(4分钟)9 A$ E' Q3 y& Q+ o( o+ w
为什么要使用 uni-app(8分钟)6 B3 g# U0 G1 M( u: s. T+ \, j& i
app多端发布效果展示(7分钟)
3 T1 y" r5 j7 C9 J 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)8 G, R! k0 c) c" R5 c# K! R- e) V, y
微信、支付宝小程序开发工具调试(7分钟)8 G) o1 `8 I" i5 N( }; y* [# b: q
在Mac上使用Simulator进行调试(5分钟)
% N& f5 C- T& v% A; @03框架基础-上
" r6 ?5 }$ O! K( s5 s 简述MVC模式(9分钟)+ z6 M4 j8 N4 `$ t2 R
图说MVVM模式(5分钟)" P) G4 u- g0 U& b6 c6 W. f
通过代码阐述MVVM与双向绑定(12分钟)- t2 }* f4 m8 N( |; B0 p( ?
JSON对象和数组的渲染(4分钟)
$ [* [" k2 V5 ]7 P+ B 页面路由以及标题配置(11分钟)
$ i) L5 x! h9 N! N- }, E9 ? 宏观讲解项目配置文件(16分钟)
' b. b. O! |# {/ z% s 应用的生命周期(11分钟)3 q4 p: q, ~' r5 x) n% l! F
页面的生命周期(14分钟)3 D, C8 E, {1 U; C- E
固定像素px与响应式像素upx(12分钟)
. b7 }- Q, E$ ?4 y, j 在页面里使用{{}}表达式(7分钟)+ g' g, o( F) [# b+ {3 k
04框架基础-下
6 I$ {3 y& v3 {, |% i6 F1 E$ V v-bind指令对属性的数据绑定(7分钟)
$ s2 z$ p0 ?( }9 @6 N/ ^7 Q3 e 事件基础(22分钟)0 w9 n4 i4 ~8 R9 l& b% I
条件渲染 v-if与v-show(7分钟); D7 e: B# F7 y6 [ u* a
条件渲染 三元运算(4分钟)) N3 S1 a" O' _1 |. f( U5 @
列表渲染v-for的使用(13分钟)
8 H# O/ Y1 Q. D. s" G9 b+ T8 D 指令key实现for循环的组件唯一性(12分钟)) [8 W4 H- E" @$ z. y
嵌套循环的下标定义(4分钟)
, m' I0 H/ ~7 t 条件编译 - 上(10分钟)- m' f3 Z1 k$ o8 S6 z+ _$ E
条件编译 - 下(7分钟)2 y( s9 i7 p: Z/ |2 T$ ]' ~
05样式与flex布局-上4 ^! k' b5 C; E! m: o
flex布局介绍与模型(8分钟)
. u1 j( m+ o* {0 w) v flex-direction 元素的排列4种方向(10分钟)$ q1 G2 g D6 V% I) Y& a
导入外部css样式(4分钟)
" t" _/ h$ ~/ b# f) J# | \ s flex-wrap 元素的换行(12分钟)
% H1 F" b3 p0 E# G: x+ v# e1 r justify-content 元素在主轴的对齐方式(14分钟)! F& ~8 f1 ]0 h5 C* f
align-items 元素在交叉轴的对齐方式(12分钟)
' ?0 W/ L* d m }06样式与flex布局-下8 V+ R4 T- y) `% O. G' K
align-content 多轴线的对齐方式(13分钟)
4 r; s0 Z2 d/ Y! O: ~5 J flex成员项的属性 - order(4分钟)
M2 E9 |% k9 `$ y flex成员项的属性 - flex-grow(4分钟)7 E6 R2 |& z! ]4 T: f2 c3 ]
flex成员项的属性 - flex-shrink(6分钟)
4 [) R8 h2 ?9 @ flex成员项的属性 - flex-basis(4分钟)
2 ^- Z# q9 T% K+ Z- @$ X) ^. r% I flex成员项的属性 - align-self(6分钟)6 {! q' J7 x! [% f
07开发首页-上
8 B9 D1 o' ]/ i/ F1 y" h! R4 J 创建项目，构建基础页面(8分钟) 免费试学
: Z$ H/ L- F1 y0 T 构建tabbar(13分钟) 免费试学
2 G5 m6 d# ]; Y3 C# Q. r. w 设置全局page，简述view组件(6分钟) 免费试学& S' M- y# Q) z; Q+ m
使用轮播图组件(11分钟) 免费试学
$ n" M) q k/ m6 g# ]# J 禁用原生导航栏达到页面全屏化(6分钟) 免费试学
" N* i+ P9 O5 v1 ` e- I2 ? 在线文档的使用(8分钟) 免费试学
h6 i. `: m/ f/ U request网络请求api讲解(5分钟)
8 ?! {0 V9 H. w O: T/ P* A uni.request动态获得轮播图数据(9分钟)) k; j- a; P/ n' q
箭头函数 this 作用域(4分钟). i+ E/ `3 y, j( M
渲染并且展示轮播图(5分钟)8 u+ q- D: }- a: s" }, f2 C1 e1 h7 X+ ^4 d; Z
08开发首页-中
! e n+ q6 F) A& {2 u. ] 引入组件实现全局变量(7分钟)) D$ q* L; {, W/ n$ ~# b% b1 |
使用挂载实现全局变量(4分钟)2 }- r0 f' Z0 k# p% u4 ^
在手机端进行微信小程序真机预览(6分钟)
; [& p. i3 S+ i# S 微信小程序https使用事项(7分钟)
7 T# t* p5 ^3 s# v% e/ u* V 开发热门超英 - 标题(9分钟)
4 _. ]& }8 _) e" ^# g: m9 m 开发热门超英 - 简述scroll-view(4分钟): ]5 N" E2 C g) T. [1 I
开发热门超英-使用scroll-view实现横向滚动(3分钟)5 F7 L- |2 @5 F1 a9 Y* w& h% A
开发热门超英 - 海报与标题(8分钟)( x! F7 U8 Z4 B( Y' b
开发热门超英 - 评分(6分钟), l) ~8 M" @7 e6 j! |: p0 X
开发热门超英 - 动态渲染数据(8分钟)3 P, E) D q7 D- R/ Y6 l0 ^7 T
09开发首页-下
M$ t) u& c/ {( j 开发自定义组件(7分钟)
" Q$ l A7 ?) Q2 {5 H2 G6 p" r; y 父组件向自定义组件传入值(6分钟)" U) `' {: g5 f2 `5 D/ Y* W2 f
完成评分自定义组件(22分钟): l8 A0 C5 C: Q
视频组件video讲解(9分钟)
) i. Y+ w; ^3 u' e 获取预告片数据(3分钟)
+ g& h9 P" B+ [0 {6 L" @4 F i9 Q$ S 动态渲染预告片(10分钟)! X& t9 H0 m, u5 y
猜你喜欢 - flex布局嵌套编写(18分钟)" p# k1 E/ A% R' a! H t
猜你喜欢 - 编写点赞css(7分钟)$ D" V q9 ~/ S# _
猜你喜欢 - 实现点赞动画效果(14分钟)
; q1 P+ T0 J: y' ~! }4 V 猜你喜欢 - 还原动画(5分钟)
6 k- |3 ~& d# v; c* U10开发首页-终
0 ^- S: ~- M/ c, {$ R 猜你喜欢 - 动态渲染列表(6分钟)2 l. `* P+ r A/ a, M( m9 X2 T
猜你喜欢 - 实现动画数组(7分钟)
& K; y: E. f' z: u: [% ] P 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)$ j, ~( o0 ~: k ^1 l# |# l4 P
猜你喜欢 - 开启下拉刷新(5分钟)
: ~& I3 L/ Q" h9 n 猜你喜欢 - loading交互api(8分钟)
9 N7 S0 f7 `: o% S: b11构建搜索页-上7 B) ~4 d8 s O% W* w5 e9 \
搜索页面 - 编写搜索栏(19分钟)& _: q3 N6 B6 R5 Z0 R4 ]
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)% g: q9 }: P) \9 E" B' I0 Q6 f9 o
搜索页面 - 动态获取最新预告并且渲染(9分钟)4 h- q+ X* @3 K/ Z6 |9 Y) N
搜索页面 - 分页接口api讲解(4分钟)
3 c( P) a/ C3 M7 g; i 搜索页面 - 搜索前置准备(6分钟)1 o7 k" G B% b& A2 m# T
搜索页面 - 执行搜索动态渲染(8分钟)$ `0 Q5 d C3 {, Z! ?
搜索页面 - 监听下拉实现分页功能(8分钟)
& V4 a4 C8 Y: G 页面路由api与传参(13分钟)
; b0 F3 ~8 r( N, _ 页面跳转组件的使用(7分钟)
3 y3 N4 s2 r; q: M$ ?: q; g 详情页 - 查询详情与视频渲染(8分钟)
4 @3 J( t- q: w6 o% K9 u& A12构建搜索页-下# a/ t$ u# N2 h3 T* A# m' Y
构建预告片基本信息(16分钟)( `7 V+ F! M6 z: e$ d
构建评分快与阴影效果(15分钟)
) S% d- A( N+ S; o 解决错误数据绑定undefined(5分钟)
: G" ?$ i7 F. \6 s4 [9 z 编写分割线以及剧情介绍(8分钟)
" x I4 `8 M; f' K- e" P! `( S 构建剧照与演职人员数据列表(10分钟)) t: q: {1 f' k/ _4 Y% ^
渲染剧照列表(8分钟)
# V3 R$ g% r k& z3 \/ K# a& u 双拼数组构建演职人员列表(12分钟)3 b1 S: n, ]# y, [5 l* {$ `4 Z& A
渐进式导航栏设置(6分钟)& y' m0 I: p& z$ A$ j6 U
通过预览api实现剧照预览(7分钟), x& M/ x7 q- a9 {
演职人员数组拼接预览(8分钟)
( y( B c5 y/ d( r$ _13电影详情页构建
- C- i* x& J7 K6 l6 c1 t 自定义预览封面图(13分钟)
; ~" N* k% C; F2 I actionSheet接口api使用(6分钟)# @5 ~* O+ O, H' n% H/ K
下载以及保存图片(15分钟)7 o; P; u% m4 ?- F; {" J6 X" m2 W
配置https下载合法域名(5分钟)% [6 t: p4 V8 b0 u7 a' d5 H% z5 a
实现小程序中的分享转发功能(9分钟)
% g n; B' d* M4 Y2 t 自定义导航栏按钮(11分钟)
, I) A2 O. k# }; u& F/ E, c% m+ V 分享到朋友圈(9分钟)4 i/ ?9 @0 s; m: @9 n! Q) P
微信开放平台简单介绍(6分钟), Z! l( {) }3 E- w5 i4 w2 o
操作视频对象，提高用户体验(8分钟)% J$ m2 Y; S7 x1 [2 O7 c. s
优化首页视频体验(13分钟)) _! h: j1 B" [' S7 A! d4 R
14我的页面（上）
( K' t" Y( I9 K' ]4 C$ |& V9 N) y 开发个人页面-header与导航栏设置(9分钟)# l/ R$ l2 j2 q! R+ |, S3 T- y
发个人页面-用户未登录和已登录的页面展示(9分钟)
3 C1 H( {3 R3 Y7 P% M% J, K 构建注册登录页面(8分钟)
& {/ d* q3 ?2 X7 S, r- l& n button与form组件讲解(6分钟)
4 z! Z: J) c, J' E/ A8 F" ?: |1 z3 N; A 实现一键注册登录(12分钟)* D: _* g1 s/ c5 j+ L2 o
通过缓存切换是否登录状态(9分钟)4 M9 w: \& m. U- o: ^- M# Z" @7 ^
构建用户账号页面(9分钟)" }6 c8 j4 }; T" _. |
清理所有缓存api(4分钟)
- e% Y2 \/ K. t/ T5 I 用户登录错误提示与方法挂载(7分钟)/ I* {. s8 {9 V8 N: \/ Y' b+ ~2 X6 k
渲染用户信息数据(6分钟)
* ?# n/ u- B: ]+ {& J) a15我的页面（中）
; @% U& X( p. S) [3 J 用户退出登录(6分钟)1 i( I7 \# T+ M' j9 w# B/ h. V
第三方登录讲解与页面构建(16分钟)6 G4 r& @/ P3 Z
第三方登录-小程序端实现微信登录(15分钟)
: O4 A, U/ g d7 d# R; Z 第三方登录-后端登录业务梳理（辅助理解）(10分钟)7 K' u2 w' k: ^) ^/ A3 f
第三方登录-app端授权登录(8分钟)& {6 C& `9 ~2 I9 F3 E3 K
第三方登录-app端获取用户唯一id及信息(12分钟)8 V! G1 q' \1 A7 k, {- s
第三方登录-app端执行一键注册登录(7分钟)
L8 g5 J8 T1 n" T3 o 查看预览用户头像(7分钟)4 h; Z1 L' D6 U B
选择用户头像(11分钟)
9 z, Z; J4 s! N* ]5 E9 f 重新选择头像(3分钟)
- Q2 \* J- ?9 u! E% d16我的页面（下）2 m$ ?( U8 @* J) i
文件上传api与后端接口讲解(5分钟)
0 h q% {6 a& v& T token令牌讲解、实现头像上传(23分钟)
. @9 _. L5 R5 A$ ~% j6 t2 q9 S 引入图片剪裁实现头像上传(7分钟)
& _+ U% W0 V) }4 U 用户修改昵称(18分钟)7 T9 I6 D8 N- Z ^# E, }% B; d, Q
用户修改生日(17分钟)
5 A* K8 W& E2 J0 J3 A# ]; l 用户修改性别(15分钟)
! J2 b5 X: s8 {2 e6 g17项目发布与上线
1 m; |) V. Q0 x 打包H5 web应用(5分钟)' m5 Q$ v: x4 Y C4 K) X" V; Q3 f
购买云服务与简介(6分钟)
) N) L. ]( B- ]; P- M 配置安全组，重置密码，上传nginx，配置ssh(14分钟)" ]9 t! [+ e* O3 L6 \( E
安装nginx(9分钟)5 X, C9 j4 l: r Z; `# ~
成功发布H5端web应用(14分钟)! G" Y: W' c. E% s0 D0 u
微信小程序上传审核流程讲解(8分钟)- ?) k* K8 ^" g9 C$ R- W% w
打包安卓apk(8分钟)) h, ?2 g( {, ^+ E& Z! n
简述ios打包(8分钟)
7 M, i, z L5 r7 r( I: |18课程总结# m- I6 p+ c" q7 u5 F: H/ L i
课程总结与展望(9分钟)5 |, C! f1 f5 K& _- U5 q; a
& O, l5 b0 \$ w( ^
* O) N' `' O8 M2 L1 U8 A2 }0 v
3 E* _) O1 N! r0 b) W) U |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
