|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。' P0 E/ D }: g4 U8 i
课程目录：; }. V4 |8 Y% A, `' g0 [, i
01导学
' B6 n" T' R: D' d' M 导学(12分钟)
" @( @+ J5 p: l# q- b7 C 学前必看！补充课：接口调用参数补充(6分钟)" E7 f+ K$ g; x# @
基础框架NextHelloWorld(rar，513.7KB)! r$ U7 j% x& i$ h- V$ N' Q7 ?. B
超英预告最新源码(rar，8.7MB)
# j6 @& f$ o# M( [0 F1 L2 R linux工具与ngxin安装(rar，37.3MB)
, t* o' M7 g$ n M$ [7 x logo素材制作(rar，730.3KB)$ C; e" W0 k. A
02课程介绍" ]0 A, W( `9 E3 x
什么是 uni-app(4分钟)( b+ ?5 _- X0 ]
为什么要使用 uni-app(8分钟)( n- ^% {+ r- J v# W, M
app多端发布效果展示(7分钟)
# @& \2 J4 V* r" y( ]! r" G 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
3 R7 ?5 Y0 X. N j3 c: x 微信、支付宝小程序开发工具调试(7分钟)0 \4 Y. {$ c! N4 I4 f0 C- R" E
在Mac上使用Simulator进行调试(5分钟)
1 E/ J; ^, [5 k8 M: C6 ?, q0 G5 ~03框架基础-上- F3 d, s/ E3 Q0 B- M! v
简述MVC模式(9分钟)7 Y5 t' m: X! t8 i
图说MVVM模式(5分钟) b( z8 z+ L* `8 A& U
通过代码阐述MVVM与双向绑定(12分钟)
( I1 _ h$ i( u/ ? JSON对象和数组的渲染(4分钟)
0 c3 ^7 y# H; L$ \9 Z! m 页面路由以及标题配置(11分钟)
C7 A; G. U/ _. a1 n, Y" g' q# y 宏观讲解项目配置文件(16分钟)
! s0 i) @; b* m4 H 应用的生命周期(11分钟); u* S% e& n( Q
页面的生命周期(14分钟)7 x' |) K# K% j8 C% r# o* g! q
固定像素px与响应式像素upx(12分钟)
& n( _4 L. @6 V0 y8 O 在页面里使用{{}}表达式(7分钟)
8 h. G3 K7 J2 ~/ B04框架基础-下$ T! q$ M+ o8 R, x6 j7 |
v-bind指令对属性的数据绑定(7分钟)( G8 E, s, f+ k; X) }
事件基础(22分钟)
% Y' p/ l3 f7 B. b, J 条件渲染 v-if与v-show(7分钟)
( [9 Z9 p5 F9 V' K# u; j. ~ 条件渲染 三元运算(4分钟)8 |( y' z8 ^% | ?4 f" ~6 S
列表渲染v-for的使用(13分钟)
* ~2 ?, \! x0 W$ [ 指令key实现for循环的组件唯一性(12分钟) q( k6 g& t( ~- q
嵌套循环的下标定义(4分钟)4 E, o% L7 V% _6 r. x9 R$ k; z
条件编译 - 上(10分钟)
# W! O. N! u; K7 H+ O 条件编译 - 下(7分钟)
D" t# U" c( R( E05样式与flex布局-上
1 T; j7 @ S; ^7 [" w( u1 X flex布局介绍与模型(8分钟)/ J/ h6 I! A8 t5 J8 h
flex-direction 元素的排列4种方向(10分钟), Q! d5 w" M( I
导入外部css样式(4分钟)
' D5 o0 h7 K! D# |, w1 I( I: d7 \4 o7 S flex-wrap 元素的换行(12分钟)
$ w( @; s% R1 `: z; N, ]/ j justify-content 元素在主轴的对齐方式(14分钟)
\! p, t( |+ _' [1 j align-items 元素在交叉轴的对齐方式(12分钟)& Q2 k4 x: H7 V0 P% w" J2 ~
06样式与flex布局-下
0 G$ m& w0 R* ?' L. w. e" s: O3 n align-content 多轴线的对齐方式(13分钟)
8 c% `7 d j( E1 i2 D+ G flex成员项的属性 - order(4分钟)
- v1 j( L( k: _7 R7 I- N flex成员项的属性 - flex-grow(4分钟)
; \$ T5 O1 I. ?8 w flex成员项的属性 - flex-shrink(6分钟)' T4 F& d2 } d" |, p% @+ t% Q
flex成员项的属性 - flex-basis(4分钟)
/ X, g! a; t& Z8 s; I0 ] flex成员项的属性 - align-self(6分钟)8 t6 D& I6 x4 t& k5 d4 I
07开发首页-上
. H c0 ?. l8 P 创建项目，构建基础页面(8分钟) 免费试学: T4 Q0 m: J1 L
构建tabbar(13分钟) 免费试学
5 t( H3 K0 e: o2 W: w' J5 C, y 设置全局page，简述view组件(6分钟) 免费试学 c5 I6 G. [2 L- Q. F. O
使用轮播图组件(11分钟) 免费试学
0 a4 `1 o2 a! _0 ]: \0 }7 m% Q) s 禁用原生导航栏达到页面全屏化(6分钟) 免费试学
* r8 y; Y9 k1 f$ n 在线文档的使用(8分钟) 免费试学
$ x, |+ N) T1 A7 T7 v& t" v0 E request网络请求api讲解(5分钟)
0 f9 P' y( N# { uni.request动态获得轮播图数据(9分钟)! j# B+ Y6 } u/ M
箭头函数 this 作用域(4分钟)
) i) `; m4 P P& f 渲染并且展示轮播图(5分钟)0 C0 k( J* z% N, T0 Z0 F0 h4 \7 ]
08开发首页-中1 M/ l. U! `* `: U8 R+ |9 I
引入组件实现全局变量(7分钟) H5 ?; ?5 s2 ^7 u
使用挂载实现全局变量(4分钟). F# O* H+ f7 i6 ^" v; }8 Y
在手机端进行微信小程序真机预览(6分钟)0 d3 v/ o r& z9 K7 ~
微信小程序https使用事项(7分钟)+ q1 g" N1 z/ e9 _, K$ Y/ b; Q% j
开发热门超英 - 标题(9分钟)
4 n @0 F! J/ z! o0 r5 Z 开发热门超英 - 简述scroll-view(4分钟). I& y2 y+ _' A" w/ A( d
开发热门超英-使用scroll-view实现横向滚动(3分钟)" W N9 J* m* b5 ]9 ]
开发热门超英 - 海报与标题(8分钟)
! q1 n" h0 A6 d* F* q 开发热门超英 - 评分(6分钟)
; }: n" k- ~9 J+ ~. Z 开发热门超英 - 动态渲染数据(8分钟)
/ k! s' ?8 {0 y09开发首页-下
4 y# h7 i2 ]% z3 z: d$ m 开发自定义组件(7分钟)
! ` `$ W$ _" D+ ]- _7 r 父组件向自定义组件传入值(6分钟)
3 W: s2 S3 o: T: q6 u 完成评分自定义组件(22分钟)
) b6 u1 V- V) T3 w3 |6 B6 M( F 视频组件video讲解(9分钟)$ n8 C1 |" x# r; W# q, J
获取预告片数据(3分钟)
$ e. @6 p& |3 c7 ?, Z% B 动态渲染预告片(10分钟)
, ^ c9 L) r% g/ S2 j" |# s+ v3 E 猜你喜欢 - flex布局嵌套编写(18分钟)8 A3 r) l6 U% c: U
猜你喜欢 - 编写点赞css(7分钟) B, I0 `9 F6 E9 f
猜你喜欢 - 实现点赞动画效果(14分钟)* ?1 ?7 ~9 Y. f2 z" y4 i3 t
猜你喜欢 - 还原动画(5分钟)
1 Z0 e" t2 K: @( I: \10开发首页-终7 e, }$ c! O, a6 N+ b* N
猜你喜欢 - 动态渲染列表(6分钟)
, t2 ~% Q) D) U- Y 猜你喜欢 - 实现动画数组(7分钟). W; U/ T$ c: Z( n" V0 o
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)" R8 I4 y3 k; {- t
猜你喜欢 - 开启下拉刷新(5分钟)
: s! I* T$ Z/ K, z 猜你喜欢 - loading交互api(8分钟)6 }3 q9 P c9 k" \4 \
11构建搜索页-上
r# B5 e1 p) x 搜索页面 - 编写搜索栏(19分钟)
1 \8 G* l" y; h& I0 r: R. y 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
3 z, Z4 r8 t0 @ 搜索页面 - 动态获取最新预告并且渲染(9分钟)- Q" M3 {+ E* b4 E; Z! ?
搜索页面 - 分页接口api讲解(4分钟)/ L3 M. H7 [! [# N
搜索页面 - 搜索前置准备(6分钟)7 G* ~ x) n; A7 }" U: t4 ?
搜索页面 - 执行搜索动态渲染(8分钟); e4 W8 ^& J. Y7 C; v) q
搜索页面 - 监听下拉实现分页功能(8分钟)% }' o; ?! ~6 U. B
页面路由api与传参(13分钟)
2 r* @) K3 c. o) J 页面跳转组件的使用(7分钟)
/ |& c% c4 x2 @" G 详情页 - 查询详情与视频渲染(8分钟)2 M$ B- X; T' O. q. e, D; n
12构建搜索页-下# Y; z; E0 m$ H$ h5 w
构建预告片基本信息(16分钟)
5 @0 L( X8 z* p! b" Y 构建评分快与阴影效果(15分钟)
# q& F$ o E! B& Y: | M 解决错误数据绑定undefined(5分钟)
! L5 A9 B5 c' Y& c) _) X 编写分割线以及剧情介绍(8分钟)
* `5 F# k+ @5 |- I7 ] 构建剧照与演职人员数据列表(10分钟)
6 l2 E# l. X8 Q) D 渲染剧照列表(8分钟)
4 v& U. h* d9 D4 t 双拼数组构建演职人员列表(12分钟)
* z+ K! x: E4 J( M1 P! R 渐进式导航栏设置(6分钟)
4 ^6 u# o2 [8 s# X/ G5 ` 通过预览api实现剧照预览(7分钟)7 Z0 L- W1 A5 E( m5 I
演职人员数组拼接预览(8分钟)
7 L& o! A4 K: l; u* |+ @) Q" J13电影详情页构建
, [2 m* m9 H' u9 K4 m; G( \+ p 自定义预览封面图(13分钟): p7 S1 }! }2 Q% Z
actionSheet接口api使用(6分钟)
5 V8 B# [. M& l1 v" s& y% C( E2 O* U 下载以及保存图片(15分钟)
2 {) p" {- k; v, [+ ` 配置https下载合法域名(5分钟)& [+ ]# F9 L; A7 s7 R
实现小程序中的分享转发功能(9分钟)2 A, B; h; B2 I) ~" U
自定义导航栏按钮(11分钟)
! \$ n: \* y- o* `* U8 |. N 分享到朋友圈(9分钟)
$ V- F7 `* U- H* ^. [ 微信开放平台简单介绍(6分钟)( \/ s% g8 b6 x$ a
操作视频对象，提高用户体验(8分钟). J2 X: s& o; R8 h
优化首页视频体验(13分钟)
3 t8 X9 [' e. A14我的页面（上）: e% Y3 L4 L' \4 h2 @! B
开发个人页面-header与导航栏设置(9分钟)
9 o# Z+ r( t' o( g2 \ 发个人页面-用户未登录和已登录的页面展示(9分钟)
+ Y6 o0 R9 c6 _0 H/ g 构建注册登录页面(8分钟)
! K! p' `- U- g- } button与form组件讲解(6分钟), ?. c D2 H/ K
实现一键注册登录(12分钟)4 F2 \0 ~3 m- t, L. f% e {
通过缓存切换是否登录状态(9分钟)
5 p3 A- b, G+ Y 构建用户账号页面(9分钟)/ _- B. n! M) l. k7 b
清理所有缓存api(4分钟)
1 W E8 i! P: Y4 m$ ~ 用户登录错误提示与方法挂载(7分钟)
+ d7 w+ \) U* W8 V* L+ d 渲染用户信息数据(6分钟)
# Q3 ]& D! C: B6 k15我的页面（中）
" Y4 n5 Z% B/ U1 y7 l2 V8 B 用户退出登录(6分钟), w. x8 y' _4 U2 K- E
第三方登录讲解与页面构建(16分钟), v4 }. P" X" o% R% w7 F+ A
第三方登录-小程序端实现微信登录(15分钟)3 Z- K+ g. |( B
第三方登录-后端登录业务梳理（辅助理解）(10分钟)- S ?! g/ N# q5 v
第三方登录-app端授权登录(8分钟)
2 b7 j8 W. w4 x" S* y 第三方登录-app端获取用户唯一id及信息(12分钟)
* H o' {, h- U2 q. e* B 第三方登录-app端执行一键注册登录(7分钟)
) g* s7 z) w& b" ?- N7 C% I& t 查看预览用户头像(7分钟)7 j' P4 V, j9 Z! g" `: I
选择用户头像(11分钟)
5 w+ s! @% U6 [* m9 T' M2 p4 Z 重新选择头像(3分钟)( f/ h" m' g7 m
16我的页面（下）9 X: ?( V& G1 H7 x# G: K
文件上传api与后端接口讲解(5分钟)% j) M5 B3 g1 t9 D& S. l% V
token令牌讲解、实现头像上传(23分钟)# J2 \0 `( i, A. i: ]- `+ J
引入图片剪裁实现头像上传(7分钟)5 A6 C# z0 Y" D' C; x* N9 G3 F
用户修改昵称(18分钟)( J+ ]3 o' J( Q7 K) j
用户修改生日(17分钟)$ s E3 |, x+ Y' w
用户修改性别(15分钟)( ]4 w! F" v1 ~8 ?1 V6 W. v
17项目发布与上线
; I% m6 B) O4 z) K+ V; n 打包H5 web应用(5分钟)
, w# r; E9 k' f0 ?( S- {2 ~ 购买云服务与简介(6分钟)# G8 k% q0 B. n# R" ?( x% I
配置安全组，重置密码，上传nginx，配置ssh(14分钟)) {% \; Q# ^. ^" [2 j
安装nginx(9分钟)
: X, }, N+ S4 R7 W2 a, w 成功发布H5端web应用(14分钟)
6 j% f" Y7 {' H$ l# Q( y 微信小程序上传审核流程讲解(8分钟)! J& t$ D7 F/ H2 C
打包安卓apk(8分钟)
& J$ [, W+ N$ Q1 ^2 \& m% F 简述ios打包(8分钟)0 z* H" g5 z7 v- j0 ^
18课程总结( I* z9 I( q* g' Z: p u
课程总结与展望(9分钟)9 L3 P0 |9 M! y% M
! c" r6 p& k* X0 m; |2 [
0 ~9 _6 E) P: |
" v& L0 }, i5 ^9 l% V8 m6 X0 g
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
