|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
7 `4 x% R% w/ s课程目录：( T$ r0 M {$ a. o# c4 a3 _; t
01导学
7 Y/ E K; t, _( @ 导学(12分钟)
9 `/ ^. l; m! ^1 p& r: z7 v 学前必看！补充课：接口调用参数补充(6分钟); j' \4 t: q" Q# s
基础框架NextHelloWorld(rar，513.7KB)
: S, s; h4 w9 }* a- J 超英预告最新源码(rar，8.7MB)
; w1 F9 K5 h# l+ @. T* r- v4 {! n linux工具与ngxin安装(rar，37.3MB)
# D" G# i# A5 X( R7 b7 R logo素材制作(rar，730.3KB)
5 X8 C9 N1 {& ]; L- i- @0 j02课程介绍1 f2 d5 [! E4 p+ v" |3 f! A7 g( T
什么是 uni-app(4分钟)
% ~4 K! x/ Z* W$ g( N 为什么要使用 uni-app(8分钟)
! t4 u8 t% {; I6 e/ o2 l. d app多端发布效果展示(7分钟)- R& k) x0 l8 I4 G% I
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)9 E- G* p, N- \2 X! D& J3 c9 e8 z
微信、支付宝小程序开发工具调试(7分钟): u. @; Z; T* X, H* E1 T
在Mac上使用Simulator进行调试(5分钟)$ @2 x2 d/ Q7 o% g
03框架基础-上9 U3 O. W0 j1 q' n9 O6 D
简述MVC模式(9分钟)
/ i$ _; j, K- @( O 图说MVVM模式(5分钟)$ U3 W2 u' _6 j! X' m
通过代码阐述MVVM与双向绑定(12分钟)
: \* {/ Q/ Y. ?* {% A, P JSON对象和数组的渲染(4分钟)2 L! U; o) }% w F+ Y8 Q# T
页面路由以及标题配置(11分钟)% K: Y% I* a+ x" {! N% J9 T
宏观讲解项目配置文件(16分钟)/ x4 H3 Z* A+ K9 I
应用的生命周期(11分钟)
) w% |# g9 o' e) m W" c" z" T 页面的生命周期(14分钟). B) ]$ U7 S* \% k2 O4 _
固定像素px与响应式像素upx(12分钟)+ q; c. G$ @4 w
在页面里使用{{}}表达式(7分钟) m3 G; a, h" i9 M2 `* d. z# x/ ]
04框架基础-下/ [& _3 W) e( O: r7 B6 s+ r
v-bind指令对属性的数据绑定(7分钟)" z, _; e: G: H$ g4 M
事件基础(22分钟), m$ w C( H8 H
条件渲染 v-if与v-show(7分钟)# m: l( e+ S9 E! ~6 S) E$ R+ J- V
条件渲染 三元运算(4分钟)- P) I" Y3 g. E+ D# l! w) f+ _
列表渲染v-for的使用(13分钟)
- s0 t7 k' _ P 指令key实现for循环的组件唯一性(12分钟)3 l, v# N7 N, a, B
嵌套循环的下标定义(4分钟)
) d: R8 D% q6 I& v 条件编译 - 上(10分钟)( ^- ]4 \" ]6 K m5 N( ^, L$ O
条件编译 - 下(7分钟)4 r1 M; m( a7 p4 ?; ]4 ?
05样式与flex布局-上
; }0 ~ B Y$ {7 \ flex布局介绍与模型(8分钟)
. L, G2 N v A+ I flex-direction 元素的排列4种方向(10分钟)
, m! R1 h1 \/ e4 y0 U8 ? 导入外部css样式(4分钟)+ c! c0 V( `5 M7 @8 [
flex-wrap 元素的换行(12分钟); T! E4 X+ c) x* t6 w% T
justify-content 元素在主轴的对齐方式(14分钟)+ N3 c8 u5 I9 x! t! B+ Z. T0 j
align-items 元素在交叉轴的对齐方式(12分钟)
" G% y) j% {$ p; r# b8 J2 V7 x06样式与flex布局-下0 o/ @& D" A; `1 T; ^+ |, O
align-content 多轴线的对齐方式(13分钟)
+ Y! m; Y& W5 W( _# Y3 a1 S flex成员项的属性 - order(4分钟)+ {" W [3 U* Y% T. R- W
flex成员项的属性 - flex-grow(4分钟)
* ?$ @- u% t' v2 \# t6 s! Q& t# T1 m* _ flex成员项的属性 - flex-shrink(6分钟)
7 y* R" p! |2 E# } flex成员项的属性 - flex-basis(4分钟)$ Q* i% i3 a5 G% l5 S5 y
flex成员项的属性 - align-self(6分钟)$ Y" Z9 Z, i$ S1 |" X9 x
07开发首页-上
" d) Y5 ~& ^0 ^1 G- n: F 创建项目，构建基础页面(8分钟) 免费试学% r" F6 f# C/ s l3 w: Y( n+ l1 p( a
构建tabbar(13分钟) 免费试学
+ u' m, b/ }( W! ` 设置全局page，简述view组件(6分钟) 免费试学/ R2 O0 y5 {3 A
使用轮播图组件(11分钟) 免费试学+ A; k6 }) }/ m3 Y# k. ^
禁用原生导航栏达到页面全屏化(6分钟) 免费试学
0 L5 V8 J8 T' o4 O0 ^. o) V0 t( q# @ 在线文档的使用(8分钟) 免费试学" x- Q! p9 u( Y
request网络请求api讲解(5分钟)" o+ o; z' p8 v
uni.request动态获得轮播图数据(9分钟)* t9 @. J" D; q/ p! \
箭头函数 this 作用域(4分钟)/ a/ Z% S! h' C( a) i
渲染并且展示轮播图(5分钟)
! I' S" H6 Z+ T4 Z08开发首页-中- u! W# n' a: F: [ Q5 R7 u8 c
引入组件实现全局变量(7分钟)
& i( r7 m8 k& u- x! q$ _ 使用挂载实现全局变量(4分钟)
8 I& U/ X+ w/ U* E9 r, P! _0 | 在手机端进行微信小程序真机预览(6分钟)
) Z1 @. g+ E; V5 f, [ r5 O. k 微信小程序https使用事项(7分钟)8 D5 s9 R7 J. _" H
开发热门超英 - 标题(9分钟)
$ h) N) a, N/ A3 {$ K0 Y) O) y 开发热门超英 - 简述scroll-view(4分钟)) b0 v: ?% e" o5 x/ _
开发热门超英-使用scroll-view实现横向滚动(3分钟)5 c4 f. d; D* U) T; {/ u# Q$ y1 y! `
开发热门超英 - 海报与标题(8分钟)
2 s) b5 u" C7 P P 开发热门超英 - 评分(6分钟)
6 e- @0 Y m# F: E7 g 开发热门超英 - 动态渲染数据(8分钟)* E: G+ O3 L" [5 _. H* W
09开发首页-下
Q1 u; k/ L' O/ N5 E# H& U5 l 开发自定义组件(7分钟) d( z1 E9 W) U3 M# N) Y
父组件向自定义组件传入值(6分钟); A* E( @7 Y% g# o. l& _: c4 J4 x
完成评分自定义组件(22分钟)# s8 \! t: e" O% H
视频组件video讲解(9分钟)
" y) I2 V% e; _$ w! u2 _3 \4 B 获取预告片数据(3分钟)2 ^$ ^: W+ f1 j5 U; W+ y c" q. C
动态渲染预告片(10分钟)* I2 w' f; B" X: i5 y
猜你喜欢 - flex布局嵌套编写(18分钟)
+ X3 g" ?2 g+ r8 b; ]7 i 猜你喜欢 - 编写点赞css(7分钟)! g$ F# s$ \' g% }
猜你喜欢 - 实现点赞动画效果(14分钟)
5 t0 g, G* A- `. P- M 猜你喜欢 - 还原动画(5分钟)
0 Z" {( t4 W4 d6 ^: L10开发首页-终
0 C4 v7 @( D3 s0 W& Z3 r 猜你喜欢 - 动态渲染列表(6分钟)) h! z5 N/ T3 p& `
猜你喜欢 - 实现动画数组(7分钟)7 i- w) I9 N; }
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)1 P8 c+ J) I& S# c0 i0 @
猜你喜欢 - 开启下拉刷新(5分钟)
& T# N$ C2 A0 @) S! @ 猜你喜欢 - loading交互api(8分钟)! R6 J& v6 y: y2 ~/ N
11构建搜索页-上3 \% ?3 o8 j/ }+ K2 Y
搜索页面 - 编写搜索栏(19分钟)* V7 ^$ L1 K L5 x/ `1 X- [( [
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)3 i9 n L% m9 f* l
搜索页面 - 动态获取最新预告并且渲染(9分钟)
" d4 Y/ d; H0 D 搜索页面 - 分页接口api讲解(4分钟)
4 o- o: p3 M! J& [+ R 搜索页面 - 搜索前置准备(6分钟)% k, @/ I2 }1 o% U6 P: b0 f
搜索页面 - 执行搜索动态渲染(8分钟)
+ S6 T) |; W. O8 [2 W5 m0 Q 搜索页面 - 监听下拉实现分页功能(8分钟)
q; s8 h: W+ i! k) W+ N 页面路由api与传参(13分钟)
+ m; Y6 Q8 p( C8 @! E4 l% C9 F 页面跳转组件的使用(7分钟), V- b3 h( N" l
详情页 - 查询详情与视频渲染(8分钟)
9 g, o5 r5 O) i( Z' K12构建搜索页-下
& p+ A1 l" O% I$ Z 构建预告片基本信息(16分钟)& A" O5 i) q# R1 [8 ^8 b
构建评分快与阴影效果(15分钟)
0 g0 D6 X% C* d7 Q7 `! I" y+ H 解决错误数据绑定undefined(5分钟)5 B/ ~+ V" h* H$ k H9 i) C# d0 d
编写分割线以及剧情介绍(8分钟)
9 w6 A5 Y& x1 Z% V l 构建剧照与演职人员数据列表(10分钟)9 Z( X" Q+ e; {/ y
渲染剧照列表(8分钟)
! K P; M2 b, q1 K" f+ @ 双拼数组构建演职人员列表(12分钟)" W5 r- j7 F$ x
渐进式导航栏设置(6分钟)2 |% O |; N" N
通过预览api实现剧照预览(7分钟) ?. u$ H5 j/ _+ R0 d
演职人员数组拼接预览(8分钟)" U$ f6 F. x K% }; e& r
13电影详情页构建1 m$ k% \) [" O( G9 t
自定义预览封面图(13分钟). k3 b& ]: z1 X
actionSheet接口api使用(6分钟)
2 F9 R6 B8 }8 D b9 t 下载以及保存图片(15分钟)
- X% ?" t- C& y7 K/ G 配置https下载合法域名(5分钟) @! x3 i' n# W
实现小程序中的分享转发功能(9分钟)
- O7 b. r3 R. Q 自定义导航栏按钮(11分钟)) u# h! B4 P% N9 I! v1 {
分享到朋友圈(9分钟)) E$ [; ]" y3 f6 M- O8 G
微信开放平台简单介绍(6分钟)
: k9 h* I2 v9 u F3 R 操作视频对象，提高用户体验(8分钟)
/ F5 _. q# H- `3 l1 b 优化首页视频体验(13分钟)
L }4 J+ T% G1 N4 g7 G14我的页面（上）+ U4 S6 B ]& O) y9 }
开发个人页面-header与导航栏设置(9分钟)
) ^- W6 r/ z9 o7 d) Q; C 发个人页面-用户未登录和已登录的页面展示(9分钟)
& H5 l: P/ _9 i% R# o9 P8 H 构建注册登录页面(8分钟)
: Y3 @: T0 V. `! w! n button与form组件讲解(6分钟)8 G8 g* H" U" ]4 }2 I5 ~& {
实现一键注册登录(12分钟)
; H. p3 R4 ^. G& Z 通过缓存切换是否登录状态(9分钟)
" D' J+ ?9 Q1 P# i. }' L; D! u 构建用户账号页面(9分钟)$ F' T9 _: w! {" R; V3 q+ K
清理所有缓存api(4分钟)
' Q0 N* R F6 c3 L% t: b8 j, f" t 用户登录错误提示与方法挂载(7分钟)
, v# M7 L$ U5 k m" | 渲染用户信息数据(6分钟)' W2 q/ U _4 M8 R# K3 ?
15我的页面（中）
9 O2 k* e8 d, E& X 用户退出登录(6分钟)
6 X0 _+ e8 E' R* X' c! p! B! H. v 第三方登录讲解与页面构建(16分钟)
- v8 |: u; O: A J 第三方登录-小程序端实现微信登录(15分钟)
6 L8 a: i2 i- k- {5 [. N! i 第三方登录-后端登录业务梳理（辅助理解）(10分钟) h6 f- c$ Z; j. M
第三方登录-app端授权登录(8分钟)
2 u) a7 Q2 V8 [ K) {8 @ 第三方登录-app端获取用户唯一id及信息(12分钟)
z8 l% D5 P) O D 第三方登录-app端执行一键注册登录(7分钟)
/ n+ y- V5 Z P* M 查看预览用户头像(7分钟)3 c; v$ }& Z3 Y
选择用户头像(11分钟)
( x( k9 }& a; P 重新选择头像(3分钟)
, e# {( U/ t6 u' A! E. F" Q16我的页面（下）. Y% M* c/ C. I1 b2 v' X8 s6 S
文件上传api与后端接口讲解(5分钟)
% U" M7 g6 r# k- x; F& @5 v, n6 c) f token令牌讲解、实现头像上传(23分钟)
& ?; w+ Y" m7 M4 G 引入图片剪裁实现头像上传(7分钟)
; M5 k) R* U" H! ]2 E0 Q9 O 用户修改昵称(18分钟)
$ B, K0 n, k+ q4 ` 用户修改生日(17分钟)1 a0 e, ^* q8 y
用户修改性别(15分钟)
v1 o0 ~) P% p; K3 I* j17项目发布与上线
2 O; P: p3 m; y, O: H 打包H5 web应用(5分钟)
( N. C. X: `3 T C 购买云服务与简介(6分钟): B9 Z6 [' t# \, x8 D% u* B+ T' L
配置安全组，重置密码，上传nginx，配置ssh(14分钟)- J/ N! Z) t$ {) _& h
安装nginx(9分钟)3 m! ?4 m7 ]1 K# C$ T. r% y
成功发布H5端web应用(14分钟)1 S- n( Z; P: k8 R
微信小程序上传审核流程讲解(8分钟)5 J, G$ g8 g2 E
打包安卓apk(8分钟) D I" _+ o7 [0 M4 T6 x! H
简述ios打包(8分钟)
3 V- p m$ g1 y2 t2 }, r k18课程总结# |3 l% A' u: S" O
课程总结与展望(9分钟)
9 k7 m3 z* u6 t: F1 p3 H' y, ]3 D2 x
1 k8 W, K: B$ r3 N! c# d
2 H" ? X- s( E6 h# F( p ]6 J- h |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
