|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。9 ^, h- I& [9 g- ?1 @( f7 |
课程目录：/ s# G8 d8 m* u7 L6 R
01导学
# o- k8 l ^+ z0 l! R& f) G 导学(12分钟)
; C6 S7 k# ^% e4 p5 g- n 学前必看！补充课：接口调用参数补充(6分钟)
, `8 i0 L& L. e+ r1 Z9 A 基础框架NextHelloWorld(rar，513.7KB)
* L) V8 S' C5 y, Q. {# C# C# Q 超英预告最新源码(rar，8.7MB)/ h& D- Q9 q- I& E7 b8 O+ K
linux工具与ngxin安装(rar，37.3MB)
" _( t* o+ Y9 d. N o0 ?6 H" s logo素材制作(rar，730.3KB)9 k' r: E! h" U8 z$ n* a
02课程介绍
- U$ g. u! X7 q& b$ o% S 什么是 uni-app(4分钟)
0 z% u9 n3 c8 H \+ n/ i 为什么要使用 uni-app(8分钟)2 P+ w2 p+ p# J. ]
app多端发布效果展示(7分钟)
- ~% W. f4 U. \3 N6 h. z 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
2 c9 e' _! H, [2 p4 z7 p 微信、支付宝小程序开发工具调试(7分钟)
4 O! a$ v2 B5 w 在Mac上使用Simulator进行调试(5分钟)
/ I f4 K$ {) q' R0 m7 B03框架基础-上
! q1 G$ k2 ?3 ^4 H 简述MVC模式(9分钟)/ ~2 p' g( \# I! C2 J* k
图说MVVM模式(5分钟) o; s% ? w5 V, Q- L- Y1 D
通过代码阐述MVVM与双向绑定(12分钟)
2 U* b! g! P4 P/ N# G! K JSON对象和数组的渲染(4分钟)
7 x; X) b9 n) f3 d! c9 X 页面路由以及标题配置(11分钟)9 e% s2 ~; V" j6 K/ R1 ?# L
宏观讲解项目配置文件(16分钟)" P& l. D. p) ]/ J! U1 w
应用的生命周期(11分钟)
% E; r, X0 `, f4 C! t 页面的生命周期(14分钟)
) `" s' a u2 D5 p 固定像素px与响应式像素upx(12分钟)
, @( Q7 }0 K2 n2 B9 E 在页面里使用{{}}表达式(7分钟)( f- Q4 l1 L, x }- F6 b( i, j
04框架基础-下
, p. _ o$ M- t( [ v-bind指令对属性的数据绑定(7分钟)- g# l+ L) D7 c5 f
事件基础(22分钟)" j) @# W4 T" J+ U
条件渲染 v-if与v-show(7分钟)
( Y- \7 [' `/ z* o9 i: @, L 条件渲染 三元运算(4分钟)* Q4 n e: H" _/ ~5 m; c, Y
列表渲染v-for的使用(13分钟) t* M! d3 S5 _6 x v" t
指令key实现for循环的组件唯一性(12分钟)6 e: m: x, m$ x4 F8 H" J
嵌套循环的下标定义(4分钟)% M4 |0 S" Q+ T( o/ x# f; E2 r
条件编译 - 上(10分钟)
+ U' t9 w- V6 t# G: w 条件编译 - 下(7分钟)
9 p6 r- O! ~8 b# Y05样式与flex布局-上" O2 M; o5 Z) h; e @1 g* f
flex布局介绍与模型(8分钟)2 J! U4 Q9 V' n, [- N/ _7 O
flex-direction 元素的排列4种方向(10分钟)
/ B; n/ R9 L" W: X5 y 导入外部css样式(4分钟)
) Y. g5 ]* a' q flex-wrap 元素的换行(12分钟)
" T; n2 t" Y* F justify-content 元素在主轴的对齐方式(14分钟)
5 m% o6 b8 o! s align-items 元素在交叉轴的对齐方式(12分钟)* w' K) F; w; |* }, F0 y
06样式与flex布局-下8 l$ m% s# |" d! K/ A, E% ^) N) t
align-content 多轴线的对齐方式(13分钟)
" }6 v4 c1 N" K! m& ? flex成员项的属性 - order(4分钟)5 p7 ?" h D$ ]2 @$ |, R2 |) h
flex成员项的属性 - flex-grow(4分钟)/ a$ ?3 F4 Q* V" G
flex成员项的属性 - flex-shrink(6分钟)" G" q$ d/ e9 T: Z7 t" c( G% Z
flex成员项的属性 - flex-basis(4分钟)( u- q+ a/ \6 ]9 Y' _
flex成员项的属性 - align-self(6分钟)
. i% h# F0 s* p/ y- V2 }: z0 m07开发首页-上
4 ?+ d! L' L o9 Q 创建项目，构建基础页面(8分钟) 免费试学
8 y7 r, h% d" W9 P! n 构建tabbar(13分钟) 免费试学 ^* C$ B; m) a
设置全局page，简述view组件(6分钟) 免费试学
: L% V# N8 a( A! O- D) g% V+ m- K 使用轮播图组件(11分钟) 免费试学
6 q$ X' l- Q- i: {$ Q, e* v 禁用原生导航栏达到页面全屏化(6分钟) 免费试学
7 @* a% u5 r4 }) d# k( {! p 在线文档的使用(8分钟) 免费试学1 j1 J8 t/ @* J- N
request网络请求api讲解(5分钟)# I5 B/ W2 z; X; `$ |
uni.request动态获得轮播图数据(9分钟)
% \3 r+ J1 U: E4 B! I 箭头函数 this 作用域(4分钟)
4 g' w6 b$ P2 N2 G+ ^# p 渲染并且展示轮播图(5分钟) C9 J1 t% D# p# h
08开发首页-中
- f% @; u7 L4 |6 x0 H* I- n& _ 引入组件实现全局变量(7分钟)
6 b; k5 H( ]$ s0 [( R, \3 z 使用挂载实现全局变量(4分钟)
7 S, s) v1 m# s/ | 在手机端进行微信小程序真机预览(6分钟); p) l; u8 A- ]+ D7 J `" A+ \
微信小程序https使用事项(7分钟): Y5 u0 |( ]# @8 r: v8 h% A* ?+ a2 P# j. Y
开发热门超英 - 标题(9分钟)
$ g% U0 r8 U& r0 R9 `/ Z 开发热门超英 - 简述scroll-view(4分钟)1 S' N q/ I0 H* G z6 [% U/ q! `. K' e
开发热门超英-使用scroll-view实现横向滚动(3分钟)
3 u: k4 [6 x P' j# B' ] 开发热门超英 - 海报与标题(8分钟)
' c" T1 y1 a4 K8 c6 r 开发热门超英 - 评分(6分钟)9 Q M4 D2 v; e+ Y( x6 ]6 s6 Q" ]
开发热门超英 - 动态渲染数据(8分钟)4 ?! F/ z9 }9 ^4 G( W& z
09开发首页-下
0 Q& e7 w! D# A" ^" {$ ] 开发自定义组件(7分钟)
9 O1 ], I. @6 v5 g- Z' A. |. u, Q, d 父组件向自定义组件传入值(6分钟)- F: G1 B# e1 i1 i$ f
完成评分自定义组件(22分钟)
8 ]# k2 u$ h; A ?) o 视频组件video讲解(9分钟)+ O. b' |8 `) F
获取预告片数据(3分钟)
+ @$ l% E( b7 ]6 s9 c7 a) I3 F 动态渲染预告片(10分钟)
~0 K6 _# k1 ?- @2 a! R 猜你喜欢 - flex布局嵌套编写(18分钟) P3 H" y5 g* ] Z8 r" _3 h
猜你喜欢 - 编写点赞css(7分钟)2 I) R# a/ `" s, Z u3 G% X6 u
猜你喜欢 - 实现点赞动画效果(14分钟)- F/ `0 n! U$ }8 D" B
猜你喜欢 - 还原动画(5分钟)) U, F- f% D" F( q2 M
10开发首页-终
4 @/ E" x) F: `, |( H8 r3 _ 猜你喜欢 - 动态渲染列表(6分钟), S" h( j- i, q. p* ?. a% P* A
猜你喜欢 - 实现动画数组(7分钟)7 R% S' X/ D4 b+ _
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
/ T( {$ i. O H5 H6 { 猜你喜欢 - 开启下拉刷新(5分钟)( G0 {3 U. D2 @, J+ K
猜你喜欢 - loading交互api(8分钟)' e! p$ g. t4 [6 { q9 x- z& C
11构建搜索页-上
7 E1 @0 P- V- f" C) T 搜索页面 - 编写搜索栏(19分钟)6 \' C7 a$ l* y1 \9 D) O2 R
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟); e* W2 O8 E) i/ Q! y& L3 K
搜索页面 - 动态获取最新预告并且渲染(9分钟): p$ k! j% x& P: l) u- `9 P
搜索页面 - 分页接口api讲解(4分钟)
3 Y+ L: G- H( `* j! {8 _; W 搜索页面 - 搜索前置准备(6分钟)4 Z8 u" u" p3 s
搜索页面 - 执行搜索动态渲染(8分钟)& F- B4 Q0 P! c7 l# E+ Y! K/ k
搜索页面 - 监听下拉实现分页功能(8分钟)2 k1 C: e& h p
页面路由api与传参(13分钟)
7 f. f& q6 v ~# x. l4 ?( F- t 页面跳转组件的使用(7分钟)
% F- g3 u' t8 K 详情页 - 查询详情与视频渲染(8分钟)
+ X3 B( H# h7 l+ S3 i/ x9 I& @12构建搜索页-下: L7 C6 k7 B+ T2 q
构建预告片基本信息(16分钟)
. i' R4 t8 X6 u2 Q7 a+ L 构建评分快与阴影效果(15分钟) b2 w+ Z& q- ?, s
解决错误数据绑定undefined(5分钟)- L& _) p; N) u, p4 L5 {# Y
编写分割线以及剧情介绍(8分钟)
. \2 [' Z7 j4 ^) l3 Q9 Q. K 构建剧照与演职人员数据列表(10分钟)4 @; D' ^. y3 R
渲染剧照列表(8分钟)
1 M5 |, ?% _, ^ 双拼数组构建演职人员列表(12分钟)$ V: t9 j& Z' X1 H' w
渐进式导航栏设置(6分钟)
, c, v. q6 e, {: N9 m& O 通过预览api实现剧照预览(7分钟)
2 z* ~/ f. T" S! X' b 演职人员数组拼接预览(8分钟)6 Y/ q5 J0 k! i, c: _
13电影详情页构建 n$ i! D4 l( @2 P3 B. [' s) u! j
自定义预览封面图(13分钟)
+ {) I2 ]8 z! t, ?9 D6 p actionSheet接口api使用(6分钟)% G( i |4 {3 t+ y7 K$ r
下载以及保存图片(15分钟)
$ P- k0 e; j9 s% a; W$ H# L5 v 配置https下载合法域名(5分钟)' _- }- e) N2 o6 h. Z% o1 K" H8 ]
实现小程序中的分享转发功能(9分钟)% S, n7 O4 {1 c. x+ h6 I
自定义导航栏按钮(11分钟), m7 k0 J9 b4 x; s1 |# |
分享到朋友圈(9分钟): n' U9 c) R0 j5 n+ q$ d
微信开放平台简单介绍(6分钟)2 C; G; B6 Y8 V Q* b* S V9 {7 n" h- o
操作视频对象，提高用户体验(8分钟)5 Q5 A/ X2 z6 r' w% B$ C
优化首页视频体验(13分钟)1 D" b% q: K0 Y; s/ N
14我的页面（上）
& T S! X( A! a" P- d 开发个人页面-header与导航栏设置(9分钟)
# y, ]3 V" y" S: R2 x) D; l 发个人页面-用户未登录和已登录的页面展示(9分钟)
! p. [" I8 J: J- z3 k; k" P 构建注册登录页面(8分钟)- A5 x8 h5 s7 p8 Z0 I
button与form组件讲解(6分钟)
$ s! `# m# r; L% b' `* Y& f 实现一键注册登录(12分钟)
4 F+ k& y% O0 O 通过缓存切换是否登录状态(9分钟)
/ _; l- P2 D8 G1 U; L, k3 M 构建用户账号页面(9分钟)
4 k' m, S3 x3 _ 清理所有缓存api(4分钟)4 R' ~; \5 U. z4 ?% e. b3 [
用户登录错误提示与方法挂载(7分钟)" S, ^( Q; a( x
渲染用户信息数据(6分钟)" Q! ]: s2 W4 z7 ^
15我的页面（中）4 T6 o1 K" a. j/ N
用户退出登录(6分钟)
7 D7 S4 E5 N* x; g: U) t/ ? 第三方登录讲解与页面构建(16分钟)- l, a+ ]3 [# u4 p$ ?' t5 Y
第三方登录-小程序端实现微信登录(15分钟)
4 c' x* \/ n5 q% K$ S6 N 第三方登录-后端登录业务梳理（辅助理解）(10分钟)9 V7 h& C o3 c9 j
第三方登录-app端授权登录(8分钟)9 {2 T g4 z2 d8 A: h' L
第三方登录-app端获取用户唯一id及信息(12分钟)
* W7 q, g) F- W5 t" v6 x' T 第三方登录-app端执行一键注册登录(7分钟)# X4 A2 F! I1 J- m, a) _
查看预览用户头像(7分钟)1 ]8 L2 t ~+ I# u8 J d
选择用户头像(11分钟)
( R% P. e% G0 N0 h8 _ 重新选择头像(3分钟)
/ ^5 v8 Y1 L4 D5 |% z' ^ q l16我的页面（下）! M. i: l5 L7 K1 Q- g& @) L) W
文件上传api与后端接口讲解(5分钟)7 T+ U% S- q! {" a, T
token令牌讲解、实现头像上传(23分钟)# ]' v7 ^# A( l* J! F
引入图片剪裁实现头像上传(7分钟)! _. d0 e. m K) m, v
用户修改昵称(18分钟) X- b* O5 K; d! k# e7 t8 q
用户修改生日(17分钟)" @8 S; }7 J" L) a# u$ P( B
用户修改性别(15分钟); p4 N/ b* k! M8 n8 b* Z' Z! |
17项目发布与上线
8 \6 ]3 p. k+ o7 _* Q, | 打包H5 web应用(5分钟)
# o% _5 _6 T" M7 t! S: Q 购买云服务与简介(6分钟)
& Q$ P9 V* n) z0 w% t. m2 Q 配置安全组，重置密码，上传nginx，配置ssh(14分钟)
8 t* ^' @8 @ S, I 安装nginx(9分钟)4 J' k( C- V: f W
成功发布H5端web应用(14分钟)
# V0 U" d0 B5 R# ?7 x 微信小程序上传审核流程讲解(8分钟)
/ G3 g) s- \" A0 q E 打包安卓apk(8分钟)
9 D3 o$ o4 ]( G/ x: U- O 简述ios打包(8分钟)
, w3 P. A% Q3 P; w18课程总结
+ }' q3 \" C" G 课程总结与展望(9分钟)
; p/ t3 x6 ]3 P! N2 K. }& |. S$ i, z2 ^, C2 D* G3 S# o$ ]
3 a- j1 i& y) S1 W. \+ @
1 D C/ J9 R; b ] |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
