|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。/ V. O+ I* q: C2 Z; ^% s
课程目录：
5 G! H+ {4 z7 M$ r. y) C; D01导学1 }6 @* n8 j7 R$ B6 |0 B
导学(12分钟) 2 r3 z- `; O/ y
学前必看！补充课：接口调用参数补充(6分钟)8 O, f: A) y' l. y, B
基础框架NextHelloWorld(rar，513.7KB): D1 E: Z \& T" q( v$ w
超英预告最新源码(rar，8.7MB)
2 }+ @$ ^7 j& E3 \8 T: x9 a2 { linux工具与ngxin安装(rar，37.3MB)
' i( [$ I% P' l1 v1 c logo素材制作(rar，730.3KB)
- f! A, b8 X3 J+ I( w) C v& D02课程介绍
& }9 f g) U, I: \0 I7 z1 p ? 什么是 uni-app(4分钟)
2 g# Z- l q( U, k4 c+ m2 f 为什么要使用 uni-app(8分钟)
% O1 H3 X7 ~1 ]4 e P app多端发布效果展示(7分钟)$ g# ~* A9 C' }5 N% A
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟): ~$ A) k8 R9 A8 i# i) W
微信、支付宝小程序开发工具调试(7分钟)
& W1 p( p% c: F! y1 @1 g 在Mac上使用Simulator进行调试(5分钟)
" k2 V5 l( W( s- b/ s7 i. i03框架基础-上6 X7 f2 K9 T0 g& |
简述MVC模式(9分钟)
1 U* W9 C, L0 q# F! k 图说MVVM模式(5分钟)8 C' {# j+ n8 I F
通过代码阐述MVVM与双向绑定(12分钟): E/ ]. L/ D2 q; q) j/ |1 t
JSON对象和数组的渲染(4分钟)
; p) ~' }( b' x; |6 l( Y' L 页面路由以及标题配置(11分钟)8 ~, |1 E8 z3 H8 Q# J4 v& x* X, I
宏观讲解项目配置文件(16分钟)
3 K/ z- L( l# o+ Q `4 b- P 应用的生命周期(11分钟)7 p( N# B- R- s& b8 h6 d( t
页面的生命周期(14分钟); d4 F* z% E3 R- K
固定像素px与响应式像素upx(12分钟)# l C6 u5 j+ F: R: B1 K" \
在页面里使用{{}}表达式(7分钟) j3 M0 z) ?" @
04框架基础-下
8 ^# f5 i* r& G& A4 h' y% k v-bind指令对属性的数据绑定(7分钟)
8 F% m: `( z- S 事件基础(22分钟)
1 Q9 d9 h- _& r- u7 i- j 条件渲染 v-if与v-show(7分钟)
4 g' C6 M; P, e+ j* K 条件渲染 三元运算(4分钟)
3 l7 d2 m1 T% _0 s; \: ~+ {$ g 列表渲染v-for的使用(13分钟)( X" D) T2 H2 W1 B1 G
指令key实现for循环的组件唯一性(12分钟), ~8 s1 h- e) ?3 q7 R3 n% m& o
嵌套循环的下标定义(4分钟)
4 x5 s6 _, S8 u) V8 r 条件编译 - 上(10分钟)
+ o% K- k# M. d+ m+ ]3 H$ C 条件编译 - 下(7分钟)
" n5 r% V' [ O4 }$ b05样式与flex布局-上5 i4 M. z2 l# N& r% C
flex布局介绍与模型(8分钟)3 F2 N. w$ c$ V8 G
flex-direction 元素的排列4种方向(10分钟): k* r- A6 _# t1 p% \, O
导入外部css样式(4分钟); |* D2 t7 t) y
flex-wrap 元素的换行(12分钟)/ J; m% b; x- A$ A c
justify-content 元素在主轴的对齐方式(14分钟)2 `8 ~7 i+ ^" W& R0 ~2 Q* |0 q
align-items 元素在交叉轴的对齐方式(12分钟)
T/ w3 A( C/ U) w06样式与flex布局-下
' d) |- m: q: H4 C align-content 多轴线的对齐方式(13分钟)3 [3 j: G4 |6 L& t! O w
flex成员项的属性 - order(4分钟)
/ H, g. b/ H R! J1 |' ]* V flex成员项的属性 - flex-grow(4分钟)
2 ^8 k* w+ W5 ?9 s flex成员项的属性 - flex-shrink(6分钟)
0 d7 c3 Y i' j, _$ b6 `& i flex成员项的属性 - flex-basis(4分钟)! P% D4 N* u3 V. _* F
flex成员项的属性 - align-self(6分钟)) f$ N- e, B1 i6 P/ j8 A
07开发首页-上
3 ~6 q. C" G. g0 W$ U m1 k5 X 创建项目，构建基础页面(8分钟) 免费试学
% k8 v) ]0 s9 ^% P: V0 `- U 构建tabbar(13分钟) 免费试学* D/ P9 X# ~: Y R, s1 Z# G2 T
设置全局page，简述view组件(6分钟) 免费试学
+ C/ B+ T% c' j/ v. E" s+ u2 R 使用轮播图组件(11分钟) 免费试学2 P5 P% s T0 O0 F# H9 M; F
禁用原生导航栏达到页面全屏化(6分钟) 免费试学" U9 U- m. s8 D9 m( R8 l6 S
在线文档的使用(8分钟) 免费试学
7 t, y( w3 u! O1 ~ A! o8 U! t request网络请求api讲解(5分钟)
4 C/ W! p" F! S) _ W uni.request动态获得轮播图数据(9分钟): R: [+ j6 |# l9 l
箭头函数 this 作用域(4分钟)+ n; M# v0 m. g3 W9 E% L8 M1 v- N
渲染并且展示轮播图(5分钟)! |' m4 @' E: N4 o, ]* P3 r
08开发首页-中
& {) G: H# W; b 引入组件实现全局变量(7分钟)- i; G8 s9 u4 P" O, ^) x
使用挂载实现全局变量(4分钟)3 y( w' R9 Z3 G5 \/ T/ A
在手机端进行微信小程序真机预览(6分钟)
1 m& P$ k& R0 n2 r9 } 微信小程序https使用事项(7分钟)
+ H# _& _" C2 u7 [* C$ o/ l 开发热门超英 - 标题(9分钟)2 I0 l" \0 u1 ^4 D" G( N1 [3 ?2 Q
开发热门超英 - 简述scroll-view(4分钟)
. R6 h! [8 G! Q" c T4 x% }( C6 E 开发热门超英-使用scroll-view实现横向滚动(3分钟)
& I* b, L- F) A6 d4 d 开发热门超英 - 海报与标题(8分钟)
% n* {: @6 a) D( Y* B 开发热门超英 - 评分(6分钟)
" Z3 U. t: }9 S+ |7 U6 @. h4 U 开发热门超英 - 动态渲染数据(8分钟)
( B, ]) A: B6 t0 o& d' `09开发首页-下( B; I% d6 w! ]6 k9 a5 B( @
开发自定义组件(7分钟)
9 P2 O) L) P5 ?: k 父组件向自定义组件传入值(6分钟)
$ A% t/ X2 r8 K# P4 b3 h8 y8 p- m 完成评分自定义组件(22分钟)( i2 {5 q' |+ V5 F2 B. A
视频组件video讲解(9分钟)4 q6 _: r# @6 |- Q4 ^
获取预告片数据(3分钟)
$ F8 ~/ U) H) r 动态渲染预告片(10分钟)3 |: Z* K1 Z. R5 N! H) p7 r1 F. a
猜你喜欢 - flex布局嵌套编写(18分钟)* W9 E3 _ Q4 a- T1 S4 F
猜你喜欢 - 编写点赞css(7分钟)
7 Z; f* c0 w# s F0 F- F, ]7 Z1 r2 n) s 猜你喜欢 - 实现点赞动画效果(14分钟)5 k" z$ s6 O K$ n; R
猜你喜欢 - 还原动画(5分钟)
! I% F+ f$ W8 d3 V! @! `10开发首页-终2 R0 ^; u) V a: ~* z! m4 K
猜你喜欢 - 动态渲染列表(6分钟)& M/ L8 @3 d2 L1 C
猜你喜欢 - 实现动画数组(7分钟)
8 q$ P! j+ g1 o& S6 B& D3 u; r 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
6 r: B1 ^& ^# Y7 e0 B 猜你喜欢 - 开启下拉刷新(5分钟)$ j+ n7 w4 X4 i
猜你喜欢 - loading交互api(8分钟)
) P, @' e8 X$ _/ l11构建搜索页-上+ U& M3 ?4 Z e3 k8 m$ v
搜索页面 - 编写搜索栏(19分钟)/ M( d4 d: G+ b6 G
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)- g3 t; E4 Q3 {2 ], f9 R. m
搜索页面 - 动态获取最新预告并且渲染(9分钟)7 @+ P- e! f9 m: A# M* G( {
搜索页面 - 分页接口api讲解(4分钟)
3 o: w) s3 I* v 搜索页面 - 搜索前置准备(6分钟)! u% l5 o, ], m' F7 J
搜索页面 - 执行搜索动态渲染(8分钟)& B( d' ?% S6 Z# f9 F; y
搜索页面 - 监听下拉实现分页功能(8分钟)" B0 h. K# t8 y' i6 H
页面路由api与传参(13分钟)
3 @9 x: x. }5 l$ K; J: W4 s 页面跳转组件的使用(7分钟)( F% c$ {7 _0 ~' m& h. P9 v0 |' t
详情页 - 查询详情与视频渲染(8分钟)
0 B# p7 q1 M5 x$ @$ f+ o12构建搜索页-下
& ~' Z) }7 |3 V0 _) `& N1 n 构建预告片基本信息(16分钟)0 @2 K t8 \* v) H" n4 |3 X
构建评分快与阴影效果(15分钟), d' B4 V0 w8 p7 d8 @0 f N
解决错误数据绑定undefined(5分钟): [1 H7 [. u1 C1 E3 r6 H) |8 p
编写分割线以及剧情介绍(8分钟)* r! |( ~$ w0 J! Y7 H" x
构建剧照与演职人员数据列表(10分钟)8 R$ n H; @- U+ U$ N
渲染剧照列表(8分钟)# V: |+ R% e0 p _; Y+ ]7 O
双拼数组构建演职人员列表(12分钟)
1 |/ s& w; b" [% |: A' z8 O S 渐进式导航栏设置(6分钟)
5 T! I8 Z; Q. `& c 通过预览api实现剧照预览(7分钟)0 O4 {" \5 d! `3 @0 |" M
演职人员数组拼接预览(8分钟), _# C! I" W! O/ y
13电影详情页构建
, {+ @9 T0 [9 I6 M% p) H 自定义预览封面图(13分钟)
& {# r8 A& x @1 _# ?' s actionSheet接口api使用(6分钟)1 U, v# |0 w" m' C$ y8 M1 G. i
下载以及保存图片(15分钟)
5 g2 Q8 M9 @9 e7 X* ^ 配置https下载合法域名(5分钟)
& W0 _/ n- Y) k7 c/ a5 Z- x 实现小程序中的分享转发功能(9分钟)
( I8 E; ?# E, k% w6 E 自定义导航栏按钮(11分钟)/ M+ B& `- H( H9 B5 K0 \
分享到朋友圈(9分钟)
6 ^. B9 _' ]7 K" q; m3 R5 ^) z 微信开放平台简单介绍(6分钟)+ ]9 y# E1 _8 N: \0 c' _
操作视频对象，提高用户体验(8分钟)
# N& I$ `$ b9 Q 优化首页视频体验(13分钟)! A$ K; h& o( r5 Y
14我的页面（上）
0 s& j/ h! Q& G* U2 C ^ 开发个人页面-header与导航栏设置(9分钟)
; f2 ?! p. \2 d3 { 发个人页面-用户未登录和已登录的页面展示(9分钟)9 k Q- F( |+ C) M0 ^5 m2 [
构建注册登录页面(8分钟)
) O# ~9 I$ ?6 L! X7 \4 n button与form组件讲解(6分钟)5 j, @& y: f4 \2 M, |- a
实现一键注册登录(12分钟)9 r/ H6 A5 |" f0 b y
通过缓存切换是否登录状态(9分钟)
4 s$ g/ _7 E) F9 p. k 构建用户账号页面(9分钟)' t' p: E- Y+ l; y- j
清理所有缓存api(4分钟)+ J, _5 t3 F+ {; L+ l7 z3 y/ U* h
用户登录错误提示与方法挂载(7分钟)( m+ z& B9 @" @0 Q) V6 Y
渲染用户信息数据(6分钟)
8 ?) S' ^& N0 u: z4 B, V15我的页面（中） \2 i3 B& k$ _5 g5 |6 i8 c$ g
用户退出登录(6分钟)
1 \& [& m: V: c 第三方登录讲解与页面构建(16分钟)/ O% F7 r% J( u7 n
第三方登录-小程序端实现微信登录(15分钟)+ c8 P5 P. K+ e1 r& m
第三方登录-后端登录业务梳理（辅助理解）(10分钟)1 y9 P! `& k4 x% N2 O
第三方登录-app端授权登录(8分钟)# U- M' u" _( o6 x7 U$ U
第三方登录-app端获取用户唯一id及信息(12分钟)
8 X1 `( F$ @: Z& J$ B 第三方登录-app端执行一键注册登录(7分钟); @5 o# b0 n$ J* E8 D- j+ {- L4 s
查看预览用户头像(7分钟), E. s, [, o5 {/ T4 r# N7 z
选择用户头像(11分钟)+ ^7 S& P( Q% R0 F Q! [
重新选择头像(3分钟)
( ?1 E- S k4 K8 r3 f16我的页面（下）3 i" ]" h' y; [7 L, L1 @3 }
文件上传api与后端接口讲解(5分钟)$ q1 P. Q8 t) ~) S G) v
token令牌讲解、实现头像上传(23分钟)+ J* C- A+ p+ |- [* H
引入图片剪裁实现头像上传(7分钟)
% I' ~# w3 ]2 q: `7 L, a# K1 Y 用户修改昵称(18分钟)
2 R; v" {' @2 }" H1 o6 i3 i# ~ 用户修改生日(17分钟)
; }5 b$ a8 I- O) w0 Y2 o$ g4 m 用户修改性别(15分钟)7 j7 l; o$ t9 x' ^! X
17项目发布与上线
, K( F1 p. m' F# r7 M. G 打包H5 web应用(5分钟)' k" x; V5 H2 z5 E
购买云服务与简介(6分钟)
( m1 O+ _$ r6 p4 h8 y 配置安全组，重置密码，上传nginx，配置ssh(14分钟)6 A s4 \2 Z8 j; n
安装nginx(9分钟); G, k" _+ T( h1 ?3 o
成功发布H5端web应用(14分钟)
, X8 z& A0 H U/ Z6 ?3 i 微信小程序上传审核流程讲解(8分钟)* C2 E$ W0 H k0 Z2 E* W
打包安卓apk(8分钟)
2 Q8 c5 T+ v5 t2 s+ E+ D8 T 简述ios打包(8分钟)
E7 X& D, h& N$ G6 i18课程总结$ c1 N* |! Q( i' R$ p3 b3 b
课程总结与展望(9分钟)4 d+ y) J. a1 u- _
% E& O7 t/ o3 t% i6 q6 V/ T
0 u7 H$ Q: a' \, V# ]
% c: x* l# [% s
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
