|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
2 h+ V* c5 X& O: p* i课程目录：% i$ ~4 E. x0 N) ]6 W
01导学
3 H/ K% H9 y, x5 p6 p+ R 导学(12分钟) _% K; u) N, v+ ]
学前必看！补充课：接口调用参数补充(6分钟), c, b! J4 Q _) P: Z
基础框架NextHelloWorld(rar，513.7KB)# I& f+ t8 U+ Y9 ?, g
超英预告最新源码(rar，8.7MB)0 e$ @# f( m! X \/ ?* v8 J, t4 b
linux工具与ngxin安装(rar，37.3MB)
( D9 p$ Y# d5 u- w7 F% y logo素材制作(rar，730.3KB)
2 I1 Y+ b' F! ~* k02课程介绍1 o6 F2 z S: q- _, m
什么是 uni-app(4分钟)1 o+ J, J9 B3 G X+ V2 v1 t5 f
为什么要使用 uni-app(8分钟)
& Q/ e6 @9 W& A E q app多端发布效果展示(7分钟)
7 @) _' p3 d: V2 U; K 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)4 Q* m4 l5 t+ \ E, p
微信、支付宝小程序开发工具调试(7分钟)" p( T( \& u1 o0 C q
在Mac上使用Simulator进行调试(5分钟)$ h, V9 P4 j& @9 m: `" V
03框架基础-上! t, o) |# }: z. }' A2 V
简述MVC模式(9分钟)& p6 X" }: ^5 V" q9 e) C, X
图说MVVM模式(5分钟)6 c0 }& V& ^0 s" k1 b4 ]8 z6 w
通过代码阐述MVVM与双向绑定(12分钟)
$ Z7 G) A4 X) m1 R JSON对象和数组的渲染(4分钟)
) y( k4 _2 @5 f, {! ^/ z- T 页面路由以及标题配置(11分钟)
G* l" _$ `( G% N2 J/ ?( [ 宏观讲解项目配置文件(16分钟)' {' O$ c" Q" z$ G t r3 ^
应用的生命周期(11分钟)2 E2 u7 e3 t6 f
页面的生命周期(14分钟) B' D/ t8 W8 M+ y5 @; F* w: r' U
固定像素px与响应式像素upx(12分钟)
) K: E4 A; @3 `* D; I$ T1 W 在页面里使用{{}}表达式(7分钟)$ f! r7 V9 P1 j. v/ `
04框架基础-下' L" T8 K7 y0 o
v-bind指令对属性的数据绑定(7分钟)( D% |- w% J$ t6 f q
事件基础(22分钟)* j' L/ F. F4 p
条件渲染 v-if与v-show(7分钟)2 s" e5 n( Z" P
条件渲染 三元运算(4分钟)
, u3 x; n' N1 I 列表渲染v-for的使用(13分钟)" t- E" c' C" _0 s5 w# y
指令key实现for循环的组件唯一性(12分钟)4 K4 u* u+ V5 I& M/ `
嵌套循环的下标定义(4分钟)2 s% `, s2 ^$ ~# P
条件编译 - 上(10分钟)
& @3 P( `8 X8 B- X7 J8 m 条件编译 - 下(7分钟)
! k. T O* Q4 d1 I/ x$ s$ S; A05样式与flex布局-上7 C: w5 y* \/ ~4 v" B" K
flex布局介绍与模型(8分钟): U& Z& h! \8 Y6 w
flex-direction 元素的排列4种方向(10分钟)
8 \& j/ V& P# ^( B7 b 导入外部css样式(4分钟)
; I- p( h. D6 i flex-wrap 元素的换行(12分钟)! |' O0 }' l5 }& M' ^; M
justify-content 元素在主轴的对齐方式(14分钟)
( j" o( J- V0 j align-items 元素在交叉轴的对齐方式(12分钟)5 u8 M' P! s6 ^8 m/ O! f
06样式与flex布局-下
7 V! _3 v' T- h" M x4 w align-content 多轴线的对齐方式(13分钟)
( o- z- X+ E$ Z( _ c flex成员项的属性 - order(4分钟)
( x0 `; E2 N2 f6 S0 E& R& f& c flex成员项的属性 - flex-grow(4分钟)" I/ M* E7 k" K9 L5 s# y
flex成员项的属性 - flex-shrink(6分钟)& ^3 n: g) W4 R. Y3 a
flex成员项的属性 - flex-basis(4分钟)% f& d/ h% c: O
flex成员项的属性 - align-self(6分钟)- e0 I& Q+ _, w1 p
07开发首页-上9 b5 A6 T# q* I% x) l
创建项目，构建基础页面(8分钟) 免费试学
6 C, Q4 @- c' Z2 a! W$ D% e* U 构建tabbar(13分钟) 免费试学( E) e2 G: `# X- N2 |
设置全局page，简述view组件(6分钟) 免费试学, n, P+ J/ {. G9 r4 q2 x
使用轮播图组件(11分钟) 免费试学' e( o7 g4 _7 C1 v9 e- R
禁用原生导航栏达到页面全屏化(6分钟) 免费试学
1 \! l: t7 Z2 [3 t' s' w* B( l 在线文档的使用(8分钟) 免费试学, P3 q$ U% V! p T
request网络请求api讲解(5分钟)
) [2 D7 ]" V6 }' x$ b uni.request动态获得轮播图数据(9分钟)0 K" Y1 I$ s, e$ P
箭头函数 this 作用域(4分钟)
& z6 s* i- h( O9 A+ r" |9 Z0 ?$ R% O6 i+ R 渲染并且展示轮播图(5分钟)+ |+ W" |! A8 |3 c g* Z+ T
08开发首页-中
5 e B( T# j! [, M C) d, R/ o 引入组件实现全局变量(7分钟)
0 |# _: Q! N* o2 ^4 y1 a 使用挂载实现全局变量(4分钟)
$ n8 w6 s: t( _ 在手机端进行微信小程序真机预览(6分钟)
0 F% F$ H/ x+ U$ ~/ y 微信小程序https使用事项(7分钟)
; k1 E6 W( H- q7 G" G5 z: n 开发热门超英 - 标题(9分钟)
; W8 c2 A1 S8 O2 L 开发热门超英 - 简述scroll-view(4分钟)
0 {6 H/ \3 S9 R 开发热门超英-使用scroll-view实现横向滚动(3分钟)# _8 s$ _) {1 f; ?5 G
开发热门超英 - 海报与标题(8分钟)! T/ e4 R4 b9 f$ W( L- i
开发热门超英 - 评分(6分钟)
; e/ E# b# u' Y* J 开发热门超英 - 动态渲染数据(8分钟)
% K, y. H" I8 g3 M- I09开发首页-下
7 t2 X& v' k4 b- J0 E 开发自定义组件(7分钟)# h. }6 H S# D
父组件向自定义组件传入值(6分钟)
/ C t& `9 A4 }& {" ~ 完成评分自定义组件(22分钟)
, y1 d T7 t& c1 U% m& v 视频组件video讲解(9分钟)$ W7 i5 h* I* {
获取预告片数据(3分钟), p; S, j# F0 N: U
动态渲染预告片(10分钟)
/ m: C( N9 E6 p! F+ p# K9 r 猜你喜欢 - flex布局嵌套编写(18分钟)+ q8 P) w: A' l- ?; N; Z. B
猜你喜欢 - 编写点赞css(7分钟)
* @- [1 \7 g! g/ i, f+ b3 V 猜你喜欢 - 实现点赞动画效果(14分钟)( j7 l4 m) \ F e4 z5 F* c
猜你喜欢 - 还原动画(5分钟)4 R$ n2 G7 Y' X# c- ~
10开发首页-终
5 v3 l7 [9 |7 f/ N7 V/ M6 Q6 C 猜你喜欢 - 动态渲染列表(6分钟)9 E5 U9 P* D3 Q( X* \
猜你喜欢 - 实现动画数组(7分钟)
% r6 _/ W4 L3 G9 V' X6 `; k; q! M 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)( l3 x" a% [% @/ \4 p
猜你喜欢 - 开启下拉刷新(5分钟)7 a h! T# P# D% M3 e( {
猜你喜欢 - loading交互api(8分钟)
; o$ s2 w- h5 ?0 e+ F H6 {) n, _11构建搜索页-上2 {5 v7 [5 |0 f* D0 F
搜索页面 - 编写搜索栏(19分钟)
! V( {1 g8 T$ Y V" | 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)8 i& f# r! z, g
搜索页面 - 动态获取最新预告并且渲染(9分钟)
7 ?' O& e, V2 K: j* ^ ~. q; U 搜索页面 - 分页接口api讲解(4分钟)
% F( f% a& @0 Q 搜索页面 - 搜索前置准备(6分钟)
5 w7 Q/ @6 c+ F6 p& n7 F9 Y, i 搜索页面 - 执行搜索动态渲染(8分钟)
1 v! Q2 U: K0 B; Y 搜索页面 - 监听下拉实现分页功能(8分钟)" J' d: R6 {4 {, u7 g; }
页面路由api与传参(13分钟)" v$ [2 ~3 W2 j4 {2 ~% Q- n0 F3 T
页面跳转组件的使用(7分钟)
5 m! l) |4 N8 n; Y4 T! b 详情页 - 查询详情与视频渲染(8分钟)- Y" V$ l3 q6 P' k% Y
12构建搜索页-下
1 ?; G8 y; f6 k+ L* G8 ^$ V7 v& @ 构建预告片基本信息(16分钟)
8 u; g7 }/ s, y 构建评分快与阴影效果(15分钟)5 a j6 m2 c# L( p$ F
解决错误数据绑定undefined(5分钟)
/ E: u: H ^8 `$ Z, ?* n1 B 编写分割线以及剧情介绍(8分钟)
+ i' Y3 b+ H1 W& A3 w* Q# u 构建剧照与演职人员数据列表(10分钟)
8 h l+ L% @! f# ^ y J5 K 渲染剧照列表(8分钟)) m# e, c9 s9 `+ S6 Q! l
双拼数组构建演职人员列表(12分钟)3 g! O1 h; j8 C, F% \; k
渐进式导航栏设置(6分钟)
( C! ^+ P4 D% t! I: T; \3 e 通过预览api实现剧照预览(7分钟)4 P! A( s3 s( U! e
演职人员数组拼接预览(8分钟)0 s! l n& a9 A m' @, D% @
13电影详情页构建
1 a5 S! Z. D, _+ [5 }3 ` 自定义预览封面图(13分钟)2 q% D5 @ n! s: e" E
actionSheet接口api使用(6分钟): L$ a' X" w2 `/ u& E; R y/ y% r* j
下载以及保存图片(15分钟)
8 h7 I1 D, w/ } 配置https下载合法域名(5分钟): y2 k7 k @+ K( j
实现小程序中的分享转发功能(9分钟)" {; d3 B/ W* v+ b
自定义导航栏按钮(11分钟)9 @$ S& z' Z, D! L9 |. g. ?, r2 F
分享到朋友圈(9分钟)5 M1 `2 C0 ^% W$ e! l" b0 Z7 o
微信开放平台简单介绍(6分钟)
8 k8 D9 T& M2 G+ o( }2 N# N 操作视频对象，提高用户体验(8分钟)& v8 P) R+ K+ w' s
优化首页视频体验(13分钟)
8 T9 k' L3 U- m* U5 \/ e14我的页面（上）
' v j/ p1 M# X+ `. | 开发个人页面-header与导航栏设置(9分钟)
! g% d1 S, X7 a: Z' V; a6 Q- D 发个人页面-用户未登录和已登录的页面展示(9分钟)
8 s! C8 P; E1 S 构建注册登录页面(8分钟)& u: i, q% A* W1 Q
button与form组件讲解(6分钟)
8 a6 y1 }& k$ z( q5 _% y 实现一键注册登录(12分钟)
; n/ O2 k- R& D% }- ? 通过缓存切换是否登录状态(9分钟)% U, w! a) S% c! b }% F7 I
构建用户账号页面(9分钟)
. _6 x1 m, b( ]) V& g! ]7 G) v 清理所有缓存api(4分钟)
6 c! c3 y8 S% j$ V. t: ^9 ~9 h 用户登录错误提示与方法挂载(7分钟)8 Q, g( K! C4 u% I& `4 Z
渲染用户信息数据(6分钟)
7 {2 Q" L1 c e* i1 K& \- a15我的页面（中）
/ a7 d! R1 R" d0 T$ a 用户退出登录(6分钟)
Y+ T: F4 {& R7 ~5 F 第三方登录讲解与页面构建(16分钟)
3 N+ ~5 n. I! n" i: l 第三方登录-小程序端实现微信登录(15分钟): l/ B+ S* z1 G5 F/ e( E7 B
第三方登录-后端登录业务梳理（辅助理解）(10分钟)
F7 ?6 i5 e3 |0 r# o 第三方登录-app端授权登录(8分钟)
7 |. g Q, s/ n* N# `! a 第三方登录-app端获取用户唯一id及信息(12分钟)
( G0 }; H* l# t( Q U1 P0 n 第三方登录-app端执行一键注册登录(7分钟)
* @4 j' o' K! n! J 查看预览用户头像(7分钟)
$ z) E+ Q' B# m) x 选择用户头像(11分钟)
7 x! E+ a$ Q1 O* v- R3 V 重新选择头像(3分钟)
! x# H- y0 D0 Y& g8 K- F; l16我的页面（下）
% d( B, d1 j6 z- v 文件上传api与后端接口讲解(5分钟)6 f/ |# ~2 S7 G
token令牌讲解、实现头像上传(23分钟) T c+ n i* ]; u/ b( J
引入图片剪裁实现头像上传(7分钟)9 o: p% L2 S8 G$ r' Z4 \5 c
用户修改昵称(18分钟)
! C- z3 V5 v% O" x+ L 用户修改生日(17分钟)
0 G5 h" N# b; }6 k8 J! t _8 E- A 用户修改性别(15分钟)
# p3 A1 e/ c" v( ]$ ^( f" t17项目发布与上线
8 x% R' t9 {3 u) ?0 ~/ _ 打包H5 web应用(5分钟)% L0 E" Z# I/ b
购买云服务与简介(6分钟)% ]( n5 \* F& Y$ L
配置安全组，重置密码，上传nginx，配置ssh(14分钟)
9 L- Y7 O8 T: l* v 安装nginx(9分钟)
3 I) n+ e3 @. D7 Z z 成功发布H5端web应用(14分钟)8 W2 v) G3 `& d! D9 N
微信小程序上传审核流程讲解(8分钟)
& ^- U3 d( G! Z m/ c; `% \$ |: X 打包安卓apk(8分钟)( n" E6 r8 e% T% @# ?4 K/ W& T
简述ios打包(8分钟)
* B9 t" U. P# J, F18课程总结: I: _: L5 ]) j9 b5 ]# U
课程总结与展望(9分钟)
" r0 p" D) b6 Z8 K! _' v$ R
+ \+ a% U; I" T& ?3 \( N* c # _2 b ^; h3 K5 O* |* y
# n7 Z: }( }4 l |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
