|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
* B7 Z2 s- X% o8 u课程目录：; {1 X) u* W" ?& ~4 J& I
01导学
+ P2 W7 p+ f5 Q! q& e/ g 导学(12分钟) & K7 W- R2 [1 u. ^" V/ V
学前必看！补充课：接口调用参数补充(6分钟)
: i! J) ^: i. \$ c' o9 M& |6 V 基础框架NextHelloWorld(rar，513.7KB)( J( k7 W! c* G) x+ u) D! h7 F! |* C9 @" P
超英预告最新源码(rar，8.7MB); x1 O/ J& c P* s6 Q
linux工具与ngxin安装(rar，37.3MB)+ R5 o3 R% t4 E( G3 `/ N0 u8 d; h
logo素材制作(rar，730.3KB)* U! Q) }4 E- w4 H
02课程介绍# U( }% {; C* u; `5 @
什么是 uni-app(4分钟)
" ~6 O8 _* M' S4 w) c/ X( f: P+ {* a 为什么要使用 uni-app(8分钟)9 P* m$ O4 i6 r1 k3 l
app多端发布效果展示(7分钟)
& E- o$ a& A4 I6 |+ O# V 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)* w( y1 }- [# q: {/ e. }
微信、支付宝小程序开发工具调试(7分钟)
2 }! ^9 k+ c' U7 M: ?3 r 在Mac上使用Simulator进行调试(5分钟)
* o7 v8 d" d( \: E6 G. m03框架基础-上
' U, f ]' Y! ~% H 简述MVC模式(9分钟)" z ]) R7 T$ D( O! X
图说MVVM模式(5分钟)
* M) ?' D+ c5 N 通过代码阐述MVVM与双向绑定(12分钟)
; B+ v; u4 X8 X JSON对象和数组的渲染(4分钟)
: x5 s: @( C M 页面路由以及标题配置(11分钟)4 M$ Q# b( k2 ^* P/ e0 u
宏观讲解项目配置文件(16分钟)0 m' ?( j4 ^5 k* J+ ?
应用的生命周期(11分钟)
( }7 G! L9 Y( s' ^8 { 页面的生命周期(14分钟) K6 F* \7 p! b3 M' r2 F$ b& z
固定像素px与响应式像素upx(12分钟)
9 J7 V0 a4 j+ l7 u/ I 在页面里使用{{}}表达式(7分钟)
0 u6 G& W( u# w2 Q0 J# |6 u04框架基础-下
: E; I: }- R/ `; t v-bind指令对属性的数据绑定(7分钟)
& ~( b Y8 ?- ~7 i2 i+ t 事件基础(22分钟)- b" X# ]# E3 t
条件渲染 v-if与v-show(7分钟)
# |0 V' E$ |$ E- a$ K% s P 条件渲染 三元运算(4分钟), X7 v. U! b3 l% ^: F: d+ o3 ~, ], Y
列表渲染v-for的使用(13分钟)
. x! G- B/ y) H8 n5 _& ^ 指令key实现for循环的组件唯一性(12分钟)
/ j7 O. i5 K9 z; `" O8 B 嵌套循环的下标定义(4分钟)# t4 e; w' V+ g4 N
条件编译 - 上(10分钟)
' O, f7 q9 k4 M& O: E( q 条件编译 - 下(7分钟)
9 o" l5 e/ X" N. K' r% ]05样式与flex布局-上( F# u2 z* P% ~, o+ q
flex布局介绍与模型(8分钟)8 h1 G; Z( W! M9 g6 x% I0 y
flex-direction 元素的排列4种方向(10分钟)
: q0 d: m# M& q' s5 u# n) E 导入外部css样式(4分钟)8 e% y. r' I# ?4 w! y1 Z
flex-wrap 元素的换行(12分钟)
! C) k8 z9 P1 [# a justify-content 元素在主轴的对齐方式(14分钟)
% H* w8 S- S* j3 j6 ]" ^ align-items 元素在交叉轴的对齐方式(12分钟)7 ~- c0 t5 Q' w9 C# ], J0 `- V
06样式与flex布局-下' q4 |( G" n# W' D( N
align-content 多轴线的对齐方式(13分钟)
' S. g& F6 v# `! K# y7 h flex成员项的属性 - order(4分钟)
, ` Y+ S/ E2 o flex成员项的属性 - flex-grow(4分钟)
* Z; S# N/ r# q2 w flex成员项的属性 - flex-shrink(6分钟); w- s! J9 W3 ?2 r3 s' `8 G
flex成员项的属性 - flex-basis(4分钟)
# D3 z8 G, }! K' q/ T k flex成员项的属性 - align-self(6分钟)
" s8 ~: V4 s; C4 x7 f07开发首页-上
0 |2 |6 }, ^! r1 s; q5 ^/ J8 C 创建项目，构建基础页面(8分钟) 免费试学3 I, ^+ g. F) n) B2 u: ?3 A
构建tabbar(13分钟) 免费试学( _: V1 b1 b2 c. P2 T$ c# E
设置全局page，简述view组件(6分钟) 免费试学0 t- x; w: {3 F+ Y2 ]7 Q
使用轮播图组件(11分钟) 免费试学
( `- i1 Y' h7 Z) u+ { 禁用原生导航栏达到页面全屏化(6分钟) 免费试学
! I4 N6 `; A6 x% ] 在线文档的使用(8分钟) 免费试学
2 N0 D" b3 n2 s1 n request网络请求api讲解(5分钟)
$ `6 H; N$ \! Y uni.request动态获得轮播图数据(9分钟)' ~ [+ C8 T$ `( E4 s$ t! j5 y
箭头函数 this 作用域(4分钟)1 Q! M. o7 ]. U5 J" u; C2 C% F
渲染并且展示轮播图(5分钟)& `' I6 V) P. w& E
08开发首页-中1 d5 d. K& b* N9 s3 _) L
引入组件实现全局变量(7分钟)# k+ Z, J" t6 j
使用挂载实现全局变量(4分钟)
/ F/ K. c6 Q' o, z 在手机端进行微信小程序真机预览(6分钟)
1 S' }& _! |/ a! s 微信小程序https使用事项(7分钟)
) U1 P, B0 H# }6 T 开发热门超英 - 标题(9分钟)
4 |4 n8 s8 ~! J 开发热门超英 - 简述scroll-view(4分钟)$ I- Q! h1 l5 S9 ]; V, E& [
开发热门超英-使用scroll-view实现横向滚动(3分钟)
) ]5 t* g: w4 Y 开发热门超英 - 海报与标题(8分钟)
& q; f6 Z2 z7 j0 r& K( a 开发热门超英 - 评分(6分钟)
- F' @+ T" Y6 B* b8 g 开发热门超英 - 动态渲染数据(8分钟)
/ w x# R: D6 ]$ E- D09开发首页-下* _' u$ F4 ~# }/ S( V( l- j
开发自定义组件(7分钟)
1 Q+ t) P/ b+ R3 Z9 [8 ^ 父组件向自定义组件传入值(6分钟)% L- u, Z0 {" n
完成评分自定义组件(22分钟)
7 J, I. }$ O( D% T 视频组件video讲解(9分钟)
C- d7 M# w' R. ? 获取预告片数据(3分钟)
3 J# k# Q0 L# S V D 动态渲染预告片(10分钟)
! B- [. w% ^) f5 @' u& P3 I 猜你喜欢 - flex布局嵌套编写(18分钟)
$ W6 c0 V" K+ \$ ^& r- Y: r4 N 猜你喜欢 - 编写点赞css(7分钟)0 V ?1 R4 L/ K/ F& i
猜你喜欢 - 实现点赞动画效果(14分钟)* V; p" d, k4 {7 {7 U1 q
猜你喜欢 - 还原动画(5分钟)1 |" o7 W1 w. C, j
10开发首页-终
; o% w. i: v& G* {/ ~ 猜你喜欢 - 动态渲染列表(6分钟)
; f% W: Q6 l! i3 r6 h F7 [ 猜你喜欢 - 实现动画数组(7分钟)
4 T8 O0 |' @6 t I( Y# L! C+ _ 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
3 w: f/ B; e/ _% D. \ 猜你喜欢 - 开启下拉刷新(5分钟)/ h I4 @; g5 H% a
猜你喜欢 - loading交互api(8分钟)
2 n& u! ?2 { P( j' F11构建搜索页-上/ q6 ^7 T) w$ O1 ]
搜索页面 - 编写搜索栏(19分钟)
. G3 P1 D: z5 G7 i 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
" o7 T) d# o+ d, T 搜索页面 - 动态获取最新预告并且渲染(9分钟)
" \/ a6 f# H- e 搜索页面 - 分页接口api讲解(4分钟)& `2 h- A' o6 j+ z) B0 O
搜索页面 - 搜索前置准备(6分钟)3 e2 F. ]" ?0 |
搜索页面 - 执行搜索动态渲染(8分钟)$ j" {: N' T- v' g; ]* |9 u" H
搜索页面 - 监听下拉实现分页功能(8分钟)
/ O4 m+ h" g* P+ j- u$ u; Q7 ] 页面路由api与传参(13分钟)5 r! e2 I/ q& T" w \' g( z X
页面跳转组件的使用(7分钟)3 O' W* ]! q; M
详情页 - 查询详情与视频渲染(8分钟)
" h, _' C/ V- b$ m+ w12构建搜索页-下' n8 c# R: M" t: W
构建预告片基本信息(16分钟)/ X; c6 |7 B5 B; o' ~, e
构建评分快与阴影效果(15分钟)
7 h# a& V4 g4 m5 q( g8 ]# n 解决错误数据绑定undefined(5分钟)
4 X" `% D. K. W; f- o6 P. S9 n 编写分割线以及剧情介绍(8分钟)
* W2 u- a; W; _, o 构建剧照与演职人员数据列表(10分钟)
9 P$ M, j5 N' n/ o3 G7 ] 渲染剧照列表(8分钟)5 X: I% }% C8 B* s2 E
双拼数组构建演职人员列表(12分钟)* B( y. J; G' E7 V% N, u! n0 ^2 n0 N
渐进式导航栏设置(6分钟)
1 T" m- l( G, p; E6 i5 [ 通过预览api实现剧照预览(7分钟)" T" a0 e' Z0 U6 a7 F
演职人员数组拼接预览(8分钟)
1 k& U; P6 D+ D- x4 J13电影详情页构建& z( p! ~1 }% v1 j: ^; ~
自定义预览封面图(13分钟)* W' L: o, P$ B) `
actionSheet接口api使用(6分钟)
5 M6 R- H! ~) y8 G( H* ^/ L 下载以及保存图片(15分钟); x5 L$ V- p9 S3 i) d
配置https下载合法域名(5分钟)' S4 U. H! [' T7 e }' R4 j
实现小程序中的分享转发功能(9分钟)
9 S: N0 D4 k: c% c* b3 f 自定义导航栏按钮(11分钟)3 h0 W2 z8 y7 p( Z& k8 b5 r' c
分享到朋友圈(9分钟)7 \: m1 J1 g* h1 m
微信开放平台简单介绍(6分钟)$ W! v, X3 Q( _( c* D
操作视频对象，提高用户体验(8分钟)
0 T( P$ B" T/ ^2 a& z 优化首页视频体验(13分钟)6 ~$ @5 `* x, W
14我的页面（上）
. P# V6 R" ^) n 开发个人页面-header与导航栏设置(9分钟)
8 W) L! G5 f+ u- Z$ O& j 发个人页面-用户未登录和已登录的页面展示(9分钟)# N; l' C d3 B* M l
构建注册登录页面(8分钟)
3 G% {/ O& a. p5 U1 V button与form组件讲解(6分钟)6 r6 Y9 U5 {- j1 G( l
实现一键注册登录(12分钟)1 c9 a8 S& J0 p7 e# o/ @, R
通过缓存切换是否登录状态(9分钟)
! {, i& \" a a 构建用户账号页面(9分钟)
c2 |# _( U, s6 h) n7 ^4 u 清理所有缓存api(4分钟)
, V# d& y( ]! \- K! h' n 用户登录错误提示与方法挂载(7分钟)
" `& v3 b; T" W" p/ q6 e4 ` 渲染用户信息数据(6分钟)& a' U$ D2 q+ ~9 f1 k" _
15我的页面（中）: t# W2 q5 p! Y1 F5 J
用户退出登录(6分钟); g; F8 [- Q9 R: x3 T/ S
第三方登录讲解与页面构建(16分钟)1 d" S( q" U6 J6 G3 z7 J
第三方登录-小程序端实现微信登录(15分钟)
# A+ N- l* e1 r9 L7 X 第三方登录-后端登录业务梳理（辅助理解）(10分钟)$ Q6 b2 e3 z$ t% m
第三方登录-app端授权登录(8分钟)
0 C$ m" v! {& p8 n, z9 \ 第三方登录-app端获取用户唯一id及信息(12分钟)' P" {1 p" P9 l8 M* A7 w
第三方登录-app端执行一键注册登录(7分钟); R. X, \. m) L
查看预览用户头像(7分钟)
% |, j' k0 B, M 选择用户头像(11分钟)# P8 h0 C5 N, n4 u0 e& q+ h
重新选择头像(3分钟)
@6 X. r: C8 Z- J# b16我的页面（下）: R. X& _7 C( r& ?) `1 |( E
文件上传api与后端接口讲解(5分钟)5 I; F# z; W" T- \, ?# z
token令牌讲解、实现头像上传(23分钟)) ?- q( l8 c: L3 y9 X- P
引入图片剪裁实现头像上传(7分钟)
6 p- g/ t+ w3 s7 d# _ 用户修改昵称(18分钟)
+ |2 m8 {; X4 s1 [ 用户修改生日(17分钟)
" U F# Q0 a& l0 z) z% t" ]) J 用户修改性别(15分钟). a. h# m2 {8 l
17项目发布与上线
* I3 S" t7 f# b" o$ s; i 打包H5 web应用(5分钟)
5 g3 d. N7 T& [+ L 购买云服务与简介(6分钟)
1 O J1 S4 f( i4 { 配置安全组，重置密码，上传nginx，配置ssh(14分钟)
: \0 u' O" {; t) J! y1 u% r 安装nginx(9分钟)
2 O. z$ X( n+ n7 e# } 成功发布H5端web应用(14分钟)
, n8 D! d& ?/ r9 r# X 微信小程序上传审核流程讲解(8分钟)- a7 ^! O: j( D8 H$ K
打包安卓apk(8分钟)- }% u8 L( s9 ~% i. O" P* e
简述ios打包(8分钟)! `& @+ r( D3 L+ [' c a, J
18课程总结
% ~* S( e* M4 _3 R 课程总结与展望(9分钟)
+ H1 j- _% q, a7 B e3 [! A# s0 g" X: H
& T D- n- ?5 _0 q4 V5 k
- J b9 x. A7 n
4 ^9 R* V- m0 x# t |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
