|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
) d0 ^- @5 p4 ^. \课程目录：- {* E U! {6 u1 P+ k. G( g3 `& z4 J
01导学
/ X8 o0 P7 o- F3 F3 y0 j/ D8 n 导学(12分钟)
, D$ j5 h4 N, g 学前必看！补充课：接口调用参数补充(6分钟)# q8 H) h2 M. y& z f
基础框架NextHelloWorld(rar，513.7KB)$ _3 \$ g& H$ V2 G c" \# M
超英预告最新源码(rar，8.7MB)$ R" [; C/ O' Q9 r5 x# k# X
linux工具与ngxin安装(rar，37.3MB)
: g! A- C X' W& F4 d6 ?6 F' w+ o logo素材制作(rar，730.3KB)
. C3 A9 b! l7 R' e02课程介绍! H! N: Z) p0 ]
什么是 uni-app(4分钟)/ f2 O: ]( i4 n2 \% a9 A
为什么要使用 uni-app(8分钟) Y( Q" f. v- I9 H! Q! {; w
app多端发布效果展示(7分钟)" i. ~9 f" E: R8 o) O4 ]
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)" A J# y! h' S1 K. B) E' X
微信、支付宝小程序开发工具调试(7分钟) N7 M$ p" ^* K3 C T' {/ U2 p
在Mac上使用Simulator进行调试(5分钟)+ _% F4 _$ d7 S" k; K+ F
03框架基础-上' B1 m# |4 r3 f2 l' j1 S% Y6 f. J
简述MVC模式(9分钟)
5 S) d& A0 Q' ~* _; A- D, |0 C4 V 图说MVVM模式(5分钟)
9 a. @- L, D& ~2 r, T- m# V 通过代码阐述MVVM与双向绑定(12分钟)
6 p, `1 ^7 G. N3 z1 H JSON对象和数组的渲染(4分钟)1 g5 e# _" G! a$ s( |
页面路由以及标题配置(11分钟)
& ^( U R$ {3 _2 `0 P3 B 宏观讲解项目配置文件(16分钟)
9 J4 u' @+ L _9 Q1 o 应用的生命周期(11分钟)
+ x' U9 X3 `4 ] 页面的生命周期(14分钟)2 ]: r" _9 P0 G( o' q
固定像素px与响应式像素upx(12分钟)
' l/ e4 d. ^7 @5 l! H 在页面里使用{{}}表达式(7分钟)& O8 z! f Y; T- f: g9 S
04框架基础-下
( V0 m+ h' v, G6 O. o P' k" s0 C v-bind指令对属性的数据绑定(7分钟)
3 X- O( s! y" c' \6 g 事件基础(22分钟)- v4 q" s9 }" H
条件渲染 v-if与v-show(7分钟). v# X& W, a; f
条件渲染 三元运算(4分钟)( L! a$ f, m7 |9 p+ w5 ?) V
列表渲染v-for的使用(13分钟)
v7 R3 q# c/ D% w8 ^ 指令key实现for循环的组件唯一性(12分钟)6 x2 I1 L5 y$ H, I. g. Y9 y: p$ @
嵌套循环的下标定义(4分钟)! U4 [$ n; D5 L8 |
条件编译 - 上(10分钟)
# O6 P4 p A; C+ G( L8 H 条件编译 - 下(7分钟); [, Z+ e) G! U2 E
05样式与flex布局-上
* N: |* R' ]4 _$ K1 b f! u flex布局介绍与模型(8分钟)
6 r5 c2 J5 B, w; c3 x% g flex-direction 元素的排列4种方向(10分钟)5 j. J* g* H# _" L `& z1 u0 _" i! s+ q
导入外部css样式(4分钟)
# X3 ]6 V8 a3 e# i8 \$ I0 v flex-wrap 元素的换行(12分钟)3 b" ^! b+ B! Y% N% X6 b
justify-content 元素在主轴的对齐方式(14分钟)9 C' Z' J" J3 z* s$ T4 d: S% Y
align-items 元素在交叉轴的对齐方式(12分钟)' i4 X s: G1 O
06样式与flex布局-下
9 T* r' H2 M) a! M' F8 `) V align-content 多轴线的对齐方式(13分钟)
4 ^% ~) d9 ]2 R V flex成员项的属性 - order(4分钟)
: t- E0 L U) H8 ]8 H: z- I- R flex成员项的属性 - flex-grow(4分钟)- q3 U4 R& w+ j2 j1 ?
flex成员项的属性 - flex-shrink(6分钟)
$ Q" w6 [5 y' P. i, E, e9 S8 i flex成员项的属性 - flex-basis(4分钟)
1 L4 x) ]8 b4 _' B+ ~ flex成员项的属性 - align-self(6分钟)
/ h9 E b. B7 N5 j6 R- ]07开发首页-上/ ]; o) ^$ h4 U' M( B
创建项目，构建基础页面(8分钟) 免费试学0 l L# b2 V4 o+ S
构建tabbar(13分钟) 免费试学
' k, c8 J5 u) ~/ z* H- u/ K 设置全局page，简述view组件(6分钟) 免费试学
" u' g4 c6 r4 Z& q- X% u5 C 使用轮播图组件(11分钟) 免费试学: Q$ b+ \; C( x/ M
禁用原生导航栏达到页面全屏化(6分钟) 免费试学
$ {& R; M$ u( _7 ?! W 在线文档的使用(8分钟) 免费试学
1 f6 {7 V, Z& g1 Y request网络请求api讲解(5分钟)
: J! E; X4 V; m% B K! H& e' t uni.request动态获得轮播图数据(9分钟)
! @) E& D5 U4 r 箭头函数 this 作用域(4分钟)
. w5 P1 c& N4 J o7 Q- z" U# _ 渲染并且展示轮播图(5分钟)8 G$ |6 s+ L6 g! U" ]
08开发首页-中
" O8 K0 C: y6 C, P% p* T! W X; q( _% N 引入组件实现全局变量(7分钟)
- Z3 ?; m* d+ }8 r. ]9 M- `7 K 使用挂载实现全局变量(4分钟)' w% `1 G( R1 f, O
在手机端进行微信小程序真机预览(6分钟)* e2 K* B: L. _- l7 q8 [9 u
微信小程序https使用事项(7分钟)
$ `$ H D' | m( x 开发热门超英 - 标题(9分钟)
0 D8 f t5 I3 U) L2 f 开发热门超英 - 简述scroll-view(4分钟)
, ~" i2 V0 Z- x1 h8 e 开发热门超英-使用scroll-view实现横向滚动(3分钟) U. G+ I( q- F
开发热门超英 - 海报与标题(8分钟)$ i& \9 @7 n* [" }5 {1 F
开发热门超英 - 评分(6分钟)6 x+ A$ ]- `* v+ J: }
开发热门超英 - 动态渲染数据(8分钟)6 ]7 ~% L" \1 h5 R7 x
09开发首页-下
8 t0 n0 E z+ B6 H0 z4 ?) Z 开发自定义组件(7分钟)
) |) E X! p# |, P5 e# n7 C 父组件向自定义组件传入值(6分钟)
N& P% a, @# E9 ~! Z9 N 完成评分自定义组件(22分钟)7 B1 j5 x2 S- c( w$ I
视频组件video讲解(9分钟)! G4 v* B1 k0 o+ t
获取预告片数据(3分钟)
7 _0 H0 B e' B( B5 L 动态渲染预告片(10分钟)
" ^( X7 K+ V6 V, g# Y+ n 猜你喜欢 - flex布局嵌套编写(18分钟)
7 E& a# I8 K8 ~' t7 `2 W 猜你喜欢 - 编写点赞css(7分钟)
" Y4 h& @, `- X. D! g 猜你喜欢 - 实现点赞动画效果(14分钟)
9 \+ _6 }5 A" a6 R/ N 猜你喜欢 - 还原动画(5分钟)
5 R# O; B4 K4 J$ m! u6 R! ?3 Z10开发首页-终
+ _& `. x" x; x8 j2 |; F* N 猜你喜欢 - 动态渲染列表(6分钟); e' V: m ^( ?5 K3 w* I
猜你喜欢 - 实现动画数组(7分钟)' v7 ^! D5 a* K" Q" r
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
w, M2 h* V% G! @ 猜你喜欢 - 开启下拉刷新(5分钟)* k7 e0 @! W7 A2 V
猜你喜欢 - loading交互api(8分钟)% O9 E) Y) W/ O J' p
11构建搜索页-上3 P/ H1 w$ m4 J3 O
搜索页面 - 编写搜索栏(19分钟)6 s" m8 a0 l' p
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)/ _) O( v9 A) K
搜索页面 - 动态获取最新预告并且渲染(9分钟)0 [9 K Q& w3 w& |, O' n
搜索页面 - 分页接口api讲解(4分钟)
8 k! D4 ]* C/ C 搜索页面 - 搜索前置准备(6分钟)
# @6 \. l* }5 X4 @2 L- } 搜索页面 - 执行搜索动态渲染(8分钟)# m+ K% P$ U, J% f
搜索页面 - 监听下拉实现分页功能(8分钟) |! { d- Z. a
页面路由api与传参(13分钟)
, Z ?+ P/ P' v: e' } 页面跳转组件的使用(7分钟)7 X: H3 s; m6 Y2 j2 E/ m* a
详情页 - 查询详情与视频渲染(8分钟)
* f# v9 S: c! `" |) K" f* e12构建搜索页-下6 f& M' M7 H4 J0 @) u2 }
构建预告片基本信息(16分钟)) `; S, k9 i: ? v# R9 _; y
构建评分快与阴影效果(15分钟)2 L& @3 \' u3 y9 M8 }
解决错误数据绑定undefined(5分钟)9 R! v; S: H+ O$ c1 ^8 T# J0 i7 k0 ^
编写分割线以及剧情介绍(8分钟)1 }+ J3 @4 L/ T2 P- a
构建剧照与演职人员数据列表(10分钟)
S1 \2 a0 _0 @, v 渲染剧照列表(8分钟)
* u' g: B2 P$ x" D+ D 双拼数组构建演职人员列表(12分钟)
- N& t# p- ^: I- v& g' x 渐进式导航栏设置(6分钟)3 R1 n: s: T/ V6 |% C# v
通过预览api实现剧照预览(7分钟)# [" {# U$ p! i- R- D1 [
演职人员数组拼接预览(8分钟)
5 k8 p- l; W. {! g/ _; M, G13电影详情页构建9 k4 Y% q+ ^8 z0 t+ e. e2 t, g
自定义预览封面图(13分钟)9 h4 \9 \& m3 h9 s/ g# ~% N5 P
actionSheet接口api使用(6分钟)
8 H: c; F: A; y- m0 @" G 下载以及保存图片(15分钟)0 {/ J7 k. ^4 v h4 e
配置https下载合法域名(5分钟)
' X9 E5 H K d( {* F 实现小程序中的分享转发功能(9分钟)* r8 ^% O& Y9 [) j9 ?% q7 _& v( M' Y* J
自定义导航栏按钮(11分钟)8 {) d* e3 I3 k) H
分享到朋友圈(9分钟)
& ~+ h) V0 K& h1 \5 B8 c: v 微信开放平台简单介绍(6分钟)
8 V# e8 }- J% q% T. c* v 操作视频对象，提高用户体验(8分钟)
( O$ I! b6 N; {* x 优化首页视频体验(13分钟)
! Z9 u3 N4 I5 D9 h14我的页面（上）
4 `% a% d7 l: W: I y- l) ^: V 开发个人页面-header与导航栏设置(9分钟)
" f% ^. |9 l) p1 d 发个人页面-用户未登录和已登录的页面展示(9分钟)3 Q) h( ^& N; J; T2 |% O
构建注册登录页面(8分钟)' G! Z: t/ [6 D2 r7 }6 i1 a
button与form组件讲解(6分钟)
; D9 B8 u, D+ y' b 实现一键注册登录(12分钟)3 \8 J. L0 ~7 o6 ^6 `, |
通过缓存切换是否登录状态(9分钟)2 z% d) v2 a# r/ X& e
构建用户账号页面(9分钟). T& J* C* X% N0 v7 S! C' t( v$ Z
清理所有缓存api(4分钟)
: Z0 ~& p) h5 W* `, o 用户登录错误提示与方法挂载(7分钟)
. `+ t+ m+ N" V8 Y3 @8 S. ` 渲染用户信息数据(6分钟)( ^! O% C# A+ x4 {8 L3 H+ D4 T
15我的页面（中）5 X$ N- F8 q$ F8 F1 | I( f! ~" B# k h
用户退出登录(6分钟)
: L6 Z; h6 Z& E& h' [! o 第三方登录讲解与页面构建(16分钟)5 M* I! ^6 w( r1 p
第三方登录-小程序端实现微信登录(15分钟)9 [# ~# \8 ?* e5 E
第三方登录-后端登录业务梳理（辅助理解）(10分钟)
5 m; o# O% e; V$ } 第三方登录-app端授权登录(8分钟)1 U# I+ b+ Y1 F2 W" Y% r
第三方登录-app端获取用户唯一id及信息(12分钟)( l# r {9 H+ W; z5 _9 G% J( Q
第三方登录-app端执行一键注册登录(7分钟)
4 ~4 ~( w/ r b8 T 查看预览用户头像(7分钟)
) I; i- {- \) j& M0 Q" [, U 选择用户头像(11分钟)
_2 b( g& R; R. ^% D4 o; Y/ ] 重新选择头像(3分钟)/ p: b' ?; p, c6 h6 k
16我的页面（下）6 _0 @+ G9 Q) a) y# h9 Z8 u
文件上传api与后端接口讲解(5分钟)
- F: H9 c* F3 d8 g: E' l0 v' c token令牌讲解、实现头像上传(23分钟)8 o% \8 _/ q& s9 Q/ L' t
引入图片剪裁实现头像上传(7分钟)" B- ?7 l2 v& F" B( Y
用户修改昵称(18分钟)
/ C# k; I7 E5 t- u9 v 用户修改生日(17分钟)
& C7 H8 L( ~# X, ~. [% p! {8 g" y% o 用户修改性别(15分钟)
( h; m( q9 }% @17项目发布与上线: ^. m2 U# z- z% [1 M& U. I* w
打包H5 web应用(5分钟). r1 e \# A& f. V9 x. t- |6 k
购买云服务与简介(6分钟)
9 B' \; x8 w' a5 f3 c( i" g 配置安全组，重置密码，上传nginx，配置ssh(14分钟)0 w# y6 L# W& D& N
安装nginx(9分钟)
, b) L* J' ]3 h) d 成功发布H5端web应用(14分钟)4 ?" z" t- x6 f, h5 o! E8 v5 @
微信小程序上传审核流程讲解(8分钟)
6 l( V6 r; ^6 @$ F' k8 r; O 打包安卓apk(8分钟)6 ~' [: K! f, l( }9 }; n+ b# {
简述ios打包(8分钟)
1 a* i7 ]: Y# k# Y6 I/ o18课程总结
/ q, ?! n' K; D& ?# D5 S 课程总结与展望(9分钟)) j8 R# Q* m# T6 V4 C( f
9 B/ M& R: Y9 E2 G, |$ ?% X1 N
" I' P4 w+ L) @/ Q/ y5 \8 @
' V% L( D4 l! z: O! Z. r4 n& ?
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
