|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
: D2 c" h; L# b# w4 n8 d" w课程目录：
4 t7 L; \" x8 W6 d& l01导学
) @* `. l1 \( ^ 导学(12分钟) " d5 ?0 {+ n8 _' t) o4 {# r, z
学前必看！补充课：接口调用参数补充(6分钟)
( z) p- i. r3 [2 J' }; J0 u 基础框架NextHelloWorld(rar，513.7KB)
1 ]2 m: j' f1 [ x" S' _ 超英预告最新源码(rar，8.7MB)) z" v4 {: w* v4 `: h% @
linux工具与ngxin安装(rar，37.3MB)
8 {+ r' G h& a# l! f& F1 o logo素材制作(rar，730.3KB)
+ M7 `; | a; @0 o5 E02课程介绍
) k! o B; }4 i. H1 t 什么是 uni-app(4分钟)
0 O8 } S: @/ c( i6 y 为什么要使用 uni-app(8分钟)
n1 r# w* H) J/ t4 v4 p app多端发布效果展示(7分钟)/ x! F0 p: n7 a& j) l7 e9 d$ ]8 G
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
1 T) u2 ?, W0 I. z 微信、支付宝小程序开发工具调试(7分钟)6 \. \ D; q2 N4 w- P7 u' |3 F) a
在Mac上使用Simulator进行调试(5分钟)
/ t9 Y& |: s8 X5 g( A- u03框架基础-上3 O+ r0 K/ V6 v* I: D8 C1 p f' C
简述MVC模式(9分钟)
1 C( k( o3 ^3 I2 u* S 图说MVVM模式(5分钟)
! m$ J- H1 W8 S0 C/ [ j n2 s 通过代码阐述MVVM与双向绑定(12分钟)
3 a9 k( N u. k) e: M T: G JSON对象和数组的渲染(4分钟)% k* m* ~7 V3 [) I& ]
页面路由以及标题配置(11分钟)# E. M" \2 S1 c6 v2 P1 H
宏观讲解项目配置文件(16分钟)
) `0 _! q# Q" K7 K; T9 H 应用的生命周期(11分钟)
3 C8 h4 }0 q- \3 \8 S7 ?3 f. q# \ 页面的生命周期(14分钟)
% w: ^9 A& u" d 固定像素px与响应式像素upx(12分钟)
; O! U. u# P/ _8 a4 o. p/ H 在页面里使用{{}}表达式(7分钟)" s; Z7 V- _6 H( ~# c! _: x
04框架基础-下
: c4 ~4 X% i- _7 Q Z, H v-bind指令对属性的数据绑定(7分钟)3 \( n$ j/ D& ?
事件基础(22分钟)
7 G) [$ S" N" I5 f 条件渲染 v-if与v-show(7分钟)
: y/ \5 [. {6 x- @2 e 条件渲染 三元运算(4分钟). \4 W r9 d- }" O5 q1 |/ |# D
列表渲染v-for的使用(13分钟)3 i8 V$ D% ], _. H+ [! [+ V# f
指令key实现for循环的组件唯一性(12分钟)+ f+ P5 O k" N: z9 P5 X9 t0 W
嵌套循环的下标定义(4分钟)8 Q# v1 Q, g+ X; w7 Y
条件编译 - 上(10分钟)0 x4 P$ ^$ r- W$ D: M7 O/ G0 G
条件编译 - 下(7分钟)
% u1 w9 Z8 W& i2 m05样式与flex布局-上
) }7 U' K$ ~ M flex布局介绍与模型(8分钟)
) }7 _3 U7 I8 h2 u% } flex-direction 元素的排列4种方向(10分钟)! |( P1 O5 I* M! k4 `% l
导入外部css样式(4分钟)* R: m' g# D; g& a3 P
flex-wrap 元素的换行(12分钟)! f) \# }- z% ?
justify-content 元素在主轴的对齐方式(14分钟)
5 w9 V" K m) s8 \ align-items 元素在交叉轴的对齐方式(12分钟)1 J& ]. ~' k; C$ f, }
06样式与flex布局-下
D9 \% N! u/ \' x align-content 多轴线的对齐方式(13分钟)
" r4 W" V! p2 i$ }& u8 ?( ] flex成员项的属性 - order(4分钟)" n# R+ R5 C' B/ J5 j6 K
flex成员项的属性 - flex-grow(4分钟); e! Q" R, k# o: t9 o$ N( g$ R
flex成员项的属性 - flex-shrink(6分钟)7 M1 \: B) J1 S4 l3 T4 J' B7 |, J
flex成员项的属性 - flex-basis(4分钟); H1 h t! _1 b" ~8 |. u2 C
flex成员项的属性 - align-self(6分钟)- E3 e( q+ u# u6 N
07开发首页-上/ R7 K! E) n- I; k! W3 m
创建项目，构建基础页面(8分钟) 免费试学! v. b* o8 ], @1 Z. G; _* @% q
构建tabbar(13分钟) 免费试学
^, F+ `0 q; j& e1 U 设置全局page，简述view组件(6分钟) 免费试学4 E! q: G R% z/ `
使用轮播图组件(11分钟) 免费试学
' P) ~& x% T+ a1 V 禁用原生导航栏达到页面全屏化(6分钟) 免费试学
/ D& T: c* Z- r 在线文档的使用(8分钟) 免费试学. u: C8 |/ d1 d/ K$ i: G, X
request网络请求api讲解(5分钟)- T2 X+ ?" D* S0 m) b7 x
uni.request动态获得轮播图数据(9分钟)
; Z, S! H; g* N- e B 箭头函数 this 作用域(4分钟)
+ g: I% }* s' {$ S3 L7 |* y6 W 渲染并且展示轮播图(5分钟)0 M- W* S7 R9 [9 z: O5 W( P6 F: p
08开发首页-中
, D8 W5 J3 j6 }7 i, [' ~ 引入组件实现全局变量(7分钟)0 _; m2 b W' C
使用挂载实现全局变量(4分钟)
6 V1 d3 Y% e' }' R& |3 D 在手机端进行微信小程序真机预览(6分钟)1 D7 B* s6 s ?0 w# _
微信小程序https使用事项(7分钟)
* H3 N4 q) [/ y, C# @, s+ X 开发热门超英 - 标题(9分钟)+ j; u+ I' c* r, ?' ~/ }
开发热门超英 - 简述scroll-view(4分钟)6 y& G4 j2 o) j" L( C; O* M3 _
开发热门超英-使用scroll-view实现横向滚动(3分钟)
2 R( D5 U* Z" {) U l) U9 c 开发热门超英 - 海报与标题(8分钟)
( o# m" ^% ^0 o4 C! A 开发热门超英 - 评分(6分钟)" @0 A8 D% c* {
开发热门超英 - 动态渲染数据(8分钟)
, F, ^4 y3 {9 s, M, X- n7 O09开发首页-下
- @' b. B5 r* d 开发自定义组件(7分钟)
+ y1 z% R' P9 |+ a 父组件向自定义组件传入值(6分钟)
3 B! F4 m% N- |! U: s 完成评分自定义组件(22分钟)
& y& F% \" p/ p9 x% I 视频组件video讲解(9分钟): t! r+ N0 s$ \; v w) ~& G& e4 s/ A$ \
获取预告片数据(3分钟)
, Y. e5 \# K, x8 O& w$ t 动态渲染预告片(10分钟)
2 z( Y8 x' \% F g. R# R" J 猜你喜欢 - flex布局嵌套编写(18分钟)3 ?, p2 f& B% ]* \8 F5 _/ h, N8 s9 I2 ^9 W
猜你喜欢 - 编写点赞css(7分钟)* F7 e9 a. u6 O8 t; R
猜你喜欢 - 实现点赞动画效果(14分钟)" B, J3 F5 e% O' `+ H1 {% z) ^" c
猜你喜欢 - 还原动画(5分钟)
, S2 V/ } S2 }( i: X10开发首页-终: _/ i; s* \4 T
猜你喜欢 - 动态渲染列表(6分钟)
8 x: O' q5 d+ s 猜你喜欢 - 实现动画数组(7分钟)
0 L' b9 n, r q& b 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)/ R/ Y$ D. b* T6 t0 H) W
猜你喜欢 - 开启下拉刷新(5分钟)
/ X) S0 t9 U$ z4 Z; }# q 猜你喜欢 - loading交互api(8分钟)& J- N( _# q1 @) e* B% R
11构建搜索页-上
) y* B* N( S& ] 搜索页面 - 编写搜索栏(19分钟)2 `& x- c) \$ f! i; o
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
. J8 l2 K6 ?6 M C. c2 e1 { 搜索页面 - 动态获取最新预告并且渲染(9分钟)
% P: i; P* K" `" M$ J9 D4 a 搜索页面 - 分页接口api讲解(4分钟)% A5 [/ w7 z" u8 p, W: q
搜索页面 - 搜索前置准备(6分钟) H0 R' o/ e% Y" d
搜索页面 - 执行搜索动态渲染(8分钟)* I$ B0 u* H9 I0 l% O6 O6 T
搜索页面 - 监听下拉实现分页功能(8分钟)
3 T2 H1 G: ^% I6 G 页面路由api与传参(13分钟)
' ]5 E* X6 L$ l* S3 S, b 页面跳转组件的使用(7分钟)' e6 S, w& l Z J/ p* C1 h; `
详情页 - 查询详情与视频渲染(8分钟), a$ b0 {1 j F+ [8 M1 Z
12构建搜索页-下
0 p# y( _+ H) _3 c+ `: ~& S 构建预告片基本信息(16分钟)
! `9 d4 F7 A7 o8 n% q3 f 构建评分快与阴影效果(15分钟)7 z8 j" u+ A/ [5 a6 ~* J& _
解决错误数据绑定undefined(5分钟), H1 ^, }( n# V: W
编写分割线以及剧情介绍(8分钟)' {6 e* e2 r& L4 s+ q& |
构建剧照与演职人员数据列表(10分钟)# d i6 | f7 E, e7 H" F
渲染剧照列表(8分钟)' A4 M2 h4 E" o. O6 E
双拼数组构建演职人员列表(12分钟)
6 h. `1 I3 ?1 A { 渐进式导航栏设置(6分钟)
3 d+ a( v* b ?$ Z- l! U( }: ]* S 通过预览api实现剧照预览(7分钟)
' e; G* ?3 C0 _8 Z9 c 演职人员数组拼接预览(8分钟)
9 b3 ]- H. Q# i0 ~& h13电影详情页构建
5 I: G% b( v: t# P- C- S 自定义预览封面图(13分钟)+ D: Z D, e/ Y
actionSheet接口api使用(6分钟)4 J9 {0 T- ]0 `# Y: X* K( r
下载以及保存图片(15分钟)
) k( J, d" L2 |; O- f1 P z: G 配置https下载合法域名(5分钟)
1 ]6 ?3 @( z0 [& Y 实现小程序中的分享转发功能(9分钟)
- c; }/ R2 p; [1 e' P& C" |" O7 K 自定义导航栏按钮(11分钟)
- m3 ?- c0 T/ e( G7 B( _ 分享到朋友圈(9分钟)
) @& @% U8 n9 ]3 h; L 微信开放平台简单介绍(6分钟)6 V) k8 \% l! v [
操作视频对象，提高用户体验(8分钟)% k) p/ t; [: L& J/ ]9 W* ]( [
优化首页视频体验(13分钟)
/ A. I1 P$ n7 t! R5 D; d3 E' ?; P+ U14我的页面（上）
2 B+ m! ]. _ T3 j2 T: l 开发个人页面-header与导航栏设置(9分钟)1 f7 z5 _/ H( W
发个人页面-用户未登录和已登录的页面展示(9分钟)0 f2 Z8 z" S1 Q. v' q6 K3 K
构建注册登录页面(8分钟)% Y2 U; U3 V7 N; _" P( Z
button与form组件讲解(6分钟)
' J, P3 B d5 j* C4 ` 实现一键注册登录(12分钟)
0 X+ A' B% ]4 ?% z% [# [) F5 q8 u2 B 通过缓存切换是否登录状态(9分钟)7 ~+ g( \+ W0 f# b0 e0 s
构建用户账号页面(9分钟)$ b, q/ e+ Q% K! g
清理所有缓存api(4分钟)4 @7 k$ X+ L2 x( a* H+ D* ^
用户登录错误提示与方法挂载(7分钟) N* X& ^" ^' K: B( Z* b
渲染用户信息数据(6分钟); D$ ?1 q: S6 S7 r, R
15我的页面（中）
# ~% m( W9 k0 F3 X( q' s 用户退出登录(6分钟)5 S0 `$ r! i9 U. `$ G G4 M3 p
第三方登录讲解与页面构建(16分钟)! O+ U% _- D- N1 V5 y
第三方登录-小程序端实现微信登录(15分钟)
9 E6 ^1 ?3 D5 Z$ }* K7 N; A/ i" d 第三方登录-后端登录业务梳理（辅助理解）(10分钟): k5 P) b9 n# k0 E% t! [. C f2 ]
第三方登录-app端授权登录(8分钟)
' ]& |0 u2 K7 i* W/ N( a( g 第三方登录-app端获取用户唯一id及信息(12分钟)" ]2 {: I, @# F+ s' M
第三方登录-app端执行一键注册登录(7分钟)
* q% Q) b1 V: m, e, [ 查看预览用户头像(7分钟)
' N R% t% |2 N. ]9 A0 L* J. a- k 选择用户头像(11分钟): E. g7 D7 _) _2 S( j
重新选择头像(3分钟)
! X5 } l) e: p2 f, T W) K. U" |16我的页面（下）( z4 E8 M% A5 U. b
文件上传api与后端接口讲解(5分钟)
; X+ m1 ^( v; d4 _ token令牌讲解、实现头像上传(23分钟)
* u* ?% v. O+ l2 W0 ^ 引入图片剪裁实现头像上传(7分钟)9 `% O' |9 y* h
用户修改昵称(18分钟)* V$ K8 t8 T# p: ?; k9 H2 Q/ i
用户修改生日(17分钟) I+ Y; `! U! r3 k9 M$ u2 j
用户修改性别(15分钟)
+ v3 { p; }5 G4 h4 e+ s17项目发布与上线4 f3 C9 p' x7 f* r
打包H5 web应用(5分钟), I4 }; M! ^* ~; P5 W& o
购买云服务与简介(6分钟)' I: R+ L+ d( h; \8 }8 D ?
配置安全组，重置密码，上传nginx，配置ssh(14分钟)/ }( {1 h/ c) `5 i6 H+ O: C* L
安装nginx(9分钟)
, M) `% y- N1 f! V' W 成功发布H5端web应用(14分钟)
7 ~' C% i- i( |" c 微信小程序上传审核流程讲解(8分钟)8 s q# E. O2 G8 A3 q6 k
打包安卓apk(8分钟): \- e0 O* }# e! W- k* k
简述ios打包(8分钟)/ P9 ^0 y3 T& t5 n. C# U3 P; Y6 N* Q
18课程总结- W' d" @) q* ^$ K/ z; r
课程总结与展望(9分钟)
2 B: L! w8 k* o2 o Z' w8 w" U* W5 v, N) q8 t8 E* ~. I4 m: |
+ C$ Y7 [8 L1 Z+ I* v
$ ]# y& o6 B1 p# i |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
