|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。0 i1 u9 \. e* U& _' v: U
课程目录：1 e& a1 T1 @+ n- s9 a( J
01导学5 e) W' s$ c2 M+ K/ x/ V; I
导学(12分钟)
, @! M& l0 Z9 y0 N) A# W& U* H2 W 学前必看！补充课：接口调用参数补充(6分钟)
! G! ^2 P/ S' | 基础框架NextHelloWorld(rar，513.7KB)1 e& S$ w7 Q; n( P0 Z/ V
超英预告最新源码(rar，8.7MB)% R; d. ^8 @3 Q7 a* e+ g, `
linux工具与ngxin安装(rar，37.3MB)3 M3 z5 T. y: h5 l
logo素材制作(rar，730.3KB)/ L& l6 o+ R2 U; u+ _$ w; v
02课程介绍
( D Y [ h7 E* g 什么是 uni-app(4分钟)
0 ? z; i0 r% M) C5 [ 为什么要使用 uni-app(8分钟)
# ^+ i3 A1 i7 ^* Z8 @2 K( s app多端发布效果展示(7分钟)# Z! B# [/ [: \0 ?% @( @6 r
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
& Q( Q" w z" P6 t5 G3 w: [ 微信、支付宝小程序开发工具调试(7分钟)) I& D5 e' T% c& p3 p8 [4 W
在Mac上使用Simulator进行调试(5分钟)
0 T7 b- W5 D5 {8 |03框架基础-上
5 C% v8 S" o O/ l! j 简述MVC模式(9分钟)! I& }% N3 f) z1 N9 J4 s
图说MVVM模式(5分钟)
+ ]$ ?' m) Q# k: P, ?. D 通过代码阐述MVVM与双向绑定(12分钟)4 s- F/ g3 i5 Q" Z, N& N
JSON对象和数组的渲染(4分钟)! F% x. T8 p5 g
页面路由以及标题配置(11分钟)
& r }8 B2 [2 R8 F* j 宏观讲解项目配置文件(16分钟)
& d% g& M2 s3 K4 x& w 应用的生命周期(11分钟)
$ T( Y( C# q6 s2 n 页面的生命周期(14分钟)' o' d# U% @5 X& X: d* s [, G
固定像素px与响应式像素upx(12分钟)
! ^& d7 d7 C' v( \ V" W: B" j 在页面里使用{{}}表达式(7分钟)
6 G5 \* L' s$ Q$ R04框架基础-下' p0 Q8 O7 H" e
v-bind指令对属性的数据绑定(7分钟)* i0 s2 x4 R% |5 i% U/ M
事件基础(22分钟)% B1 K* n. O3 E+ e0 a' |/ z. W
条件渲染 v-if与v-show(7分钟)
' m- U2 j, R( ]8 ?6 P( g, _ 条件渲染 三元运算(4分钟)
0 N- ~2 g- K* l8 h* |8 f 列表渲染v-for的使用(13分钟)# z! _ |# g6 X- B
指令key实现for循环的组件唯一性(12分钟)/ d( W7 X3 ]0 p5 }! ^5 [( G
嵌套循环的下标定义(4分钟)
; n5 v( T+ G* \: |* ? 条件编译 - 上(10分钟)" ]6 p7 X/ P* z6 e+ j, F$ ^
条件编译 - 下(7分钟)# Q; X' ]& [8 x6 R5 [
05样式与flex布局-上- N9 N: u1 \$ w% y9 f2 w
flex布局介绍与模型(8分钟)6 C. i; k2 z! p' c5 e
flex-direction 元素的排列4种方向(10分钟)
4 d# F" o. H9 S2 d8 [ 导入外部css样式(4分钟)4 \$ f. k8 P5 H
flex-wrap 元素的换行(12分钟)
" q# L+ p6 y( r, C% r# F/ j7 h9 F justify-content 元素在主轴的对齐方式(14分钟)2 F8 n2 R* P1 o; T, C& C7 x# }
align-items 元素在交叉轴的对齐方式(12分钟)5 _4 K# l; p" c! z% n
06样式与flex布局-下8 n* ~: A+ g' p& \$ g5 W
align-content 多轴线的对齐方式(13分钟)$ V$ @3 G( {0 K8 a
flex成员项的属性 - order(4分钟)
; D+ Z5 ~0 I& A4 w6 k& I flex成员项的属性 - flex-grow(4分钟)9 q8 D2 Z- _9 p, x5 T1 H2 R5 C
flex成员项的属性 - flex-shrink(6分钟)
8 h4 U! |' a3 t9 e" B- x7 K flex成员项的属性 - flex-basis(4分钟)
) T, R; m' V; P, }1 m1 z* Z0 ? flex成员项的属性 - align-self(6分钟): a; }( \# Q: A
07开发首页-上
; r& [- N6 F. L/ t8 S 创建项目，构建基础页面(8分钟) 免费试学
7 p1 l0 v0 e8 {# P* a" c% U4 }7 m 构建tabbar(13分钟) 免费试学
/ j5 n6 n- O- Y0 B5 w2 `8 J, i2 b7 D 设置全局page，简述view组件(6分钟) 免费试学: k n, c* @: e2 ?# E
使用轮播图组件(11分钟) 免费试学
" \2 Y4 K0 h) Y0 T$ Y 禁用原生导航栏达到页面全屏化(6分钟) 免费试学
' m H* Q' o+ f8 f3 [ 在线文档的使用(8分钟) 免费试学 j/ n+ D {, a8 @ q) I
request网络请求api讲解(5分钟)
# b- V# q3 W: K5 r8 F* [3 H uni.request动态获得轮播图数据(9分钟)
0 Z1 h# V5 v: u0 g 箭头函数 this 作用域(4分钟)& R# b/ V/ R, X
渲染并且展示轮播图(5分钟)' ^, N2 ~5 z7 A# r- b4 }
08开发首页-中
2 L7 x8 L2 E. B& L% Y& } 引入组件实现全局变量(7分钟)
4 J( o* U1 u3 Y4 x3 R& \ 使用挂载实现全局变量(4分钟)
$ u% z9 h8 I9 {7 c# R0 s/ P& E 在手机端进行微信小程序真机预览(6分钟)
% ~/ \1 @6 j+ I, Z' ] 微信小程序https使用事项(7分钟) D3 [ ^5 a! [
开发热门超英 - 标题(9分钟)
/ m# j d3 y* K 开发热门超英 - 简述scroll-view(4分钟)
. M5 |1 j/ v2 B 开发热门超英-使用scroll-view实现横向滚动(3分钟): i/ Q9 h6 z5 p% n# a
开发热门超英 - 海报与标题(8分钟)
' u- E; N* a+ _4 f5 _3 v' \( \ 开发热门超英 - 评分(6分钟)
7 Y1 J9 i% i j S, `+ T3 y" z S 开发热门超英 - 动态渲染数据(8分钟)
7 A4 T0 d$ e' O }# P1 v- |0 C09开发首页-下
, C' B. U$ r- j0 h3 c 开发自定义组件(7分钟). z1 ^. s( Q! h
父组件向自定义组件传入值(6分钟)) Z4 ?, d) G8 Y
完成评分自定义组件(22分钟)
3 I/ x3 ^% i7 a/ @% C 视频组件video讲解(9分钟)! M! N& e+ l( b2 C, W
获取预告片数据(3分钟)$ [8 M/ i$ @2 P/ }) e0 b& A
动态渲染预告片(10分钟)
0 i; y+ S) D9 @0 P, U. o 猜你喜欢 - flex布局嵌套编写(18分钟). x8 k/ u9 h& |. K- F
猜你喜欢 - 编写点赞css(7分钟)
1 \- }$ K. K5 x9 }# B! [% @ 猜你喜欢 - 实现点赞动画效果(14分钟)
% Q6 z0 E! p1 n9 `7 \) l 猜你喜欢 - 还原动画(5分钟)
( G8 Y2 c; v3 a( X( d' Z10开发首页-终6 C: Z1 `' L+ D
猜你喜欢 - 动态渲染列表(6分钟)" n# r. O: w# X
猜你喜欢 - 实现动画数组(7分钟) C9 x8 X# w, ^$ ]. j4 K
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
% P: \" A( Q* Q, ` 猜你喜欢 - 开启下拉刷新(5分钟)! K" R2 ?* K3 ]* e
猜你喜欢 - loading交互api(8分钟)& l+ R- m( Q9 Y0 ?2 l
11构建搜索页-上
& R0 @/ L0 Y- m& n5 T 搜索页面 - 编写搜索栏(19分钟)1 h6 C% ~& o1 |' m+ X b
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)2 Q' {( m3 Y. n4 w1 `7 Y
搜索页面 - 动态获取最新预告并且渲染(9分钟)+ a! T$ p5 ?2 o* r6 @
搜索页面 - 分页接口api讲解(4分钟)
6 K& K8 E: R, B+ q# [9 V) M 搜索页面 - 搜索前置准备(6分钟)% H' Z8 a+ m }9 F6 d* g# p+ |2 v
搜索页面 - 执行搜索动态渲染(8分钟)
$ o9 g5 Y6 S0 v" R( e- A- k8 M' E 搜索页面 - 监听下拉实现分页功能(8分钟)
. o, A3 o& W% u" E; S6 k7 A6 x 页面路由api与传参(13分钟)
5 Y( g7 y) d; ~" T+ R, e& Z 页面跳转组件的使用(7分钟)) T$ Y+ f7 H7 h2 Z3 r7 k
详情页 - 查询详情与视频渲染(8分钟)
" d+ c0 Q- {0 z0 Z* ~12构建搜索页-下6 e: Y; O4 I& i c+ @; d% d
构建预告片基本信息(16分钟)
- Z* I5 ~" U1 g( _ 构建评分快与阴影效果(15分钟)
# I4 h% E! Y" s" Z. }9 Z& j 解决错误数据绑定undefined(5分钟)9 A# [ i/ N! @( O
编写分割线以及剧情介绍(8分钟)7 [% n7 K( G0 g$ M) @. L
构建剧照与演职人员数据列表(10分钟)! Q/ h) x% K) B4 v( ^; Q! c' _
渲染剧照列表(8分钟)5 k- K3 q7 U. `! j
双拼数组构建演职人员列表(12分钟)0 u v3 E$ S) ?. I# {$ p/ N( l# O
渐进式导航栏设置(6分钟)6 i; ~) D7 Z) G" d
通过预览api实现剧照预览(7分钟)
0 g7 f* _2 }. J8 [9 F" ^ 演职人员数组拼接预览(8分钟)8 u- p) i2 Q' D$ C0 t$ R
13电影详情页构建
! H+ I4 w: J: ~; X 自定义预览封面图(13分钟)* S. c+ R! f4 K7 S
actionSheet接口api使用(6分钟)
( q+ J+ J! D) S 下载以及保存图片(15分钟)
! v! \' V N" a% [ 配置https下载合法域名(5分钟)0 p% y# k+ N! J9 e! {1 C
实现小程序中的分享转发功能(9分钟)
! f8 Q0 B" t" x k 自定义导航栏按钮(11分钟)
' t/ C1 k0 G a, d 分享到朋友圈(9分钟)
& ?* l" s" u' K2 V7 n 微信开放平台简单介绍(6分钟) j7 m* n& l1 a. e. l: E
操作视频对象，提高用户体验(8分钟)6 \, Y) c% I* ^: `) @2 d
优化首页视频体验(13分钟)+ z5 x# r: U3 W7 o! n) q& u
14我的页面（上）
" H `: D5 P/ B0 z$ [$ L 开发个人页面-header与导航栏设置(9分钟)- J4 M7 s8 F4 }- G5 d& N
发个人页面-用户未登录和已登录的页面展示(9分钟)) M( f* ~9 e2 W' y. f" i2 a1 w
构建注册登录页面(8分钟)) I' d# \! j( u: }5 @
button与form组件讲解(6分钟). c* J" `( f7 {: \& o( q6 G
实现一键注册登录(12分钟)& e5 d5 \6 q4 s8 {0 k5 L* ^
通过缓存切换是否登录状态(9分钟)1 p; p& n0 ~: s! Y( h2 _2 C
构建用户账号页面(9分钟)( W/ v' N9 h2 R5 W y \- J
清理所有缓存api(4分钟)0 ?6 M' C- E& N9 ]( e" O# N" k- g& w
用户登录错误提示与方法挂载(7分钟)
" P2 {( g, o* N, F 渲染用户信息数据(6分钟)
, p9 Z ~) q* X: ]% B4 A15我的页面（中）
8 h( c J2 f% {7 Q 用户退出登录(6分钟)
) a4 ]4 f2 \* l 第三方登录讲解与页面构建(16分钟)& ^$ A+ c8 @3 @" k( L: P- l
第三方登录-小程序端实现微信登录(15分钟)* I$ }5 S% B/ g" J% ^% r9 M3 s
第三方登录-后端登录业务梳理（辅助理解）(10分钟)& ~+ w' `$ G7 ]6 s6 I! h
第三方登录-app端授权登录(8分钟)
5 b5 e* ?, `6 p: u 第三方登录-app端获取用户唯一id及信息(12分钟)
. h' I; U6 v+ Z U. S9 l 第三方登录-app端执行一键注册登录(7分钟)
3 R; A6 a* A0 V% k 查看预览用户头像(7分钟)
- y: \$ U, Q- [ M) p L 选择用户头像(11分钟)
' c* d' v/ g" i Q9 N 重新选择头像(3分钟)3 m8 I8 i6 f, d
16我的页面（下）4 l5 U" x+ A0 I' U! }$ ~+ T* k ]( C
文件上传api与后端接口讲解(5分钟)( \/ K5 }, f* [: t2 L9 l3 w
token令牌讲解、实现头像上传(23分钟)( Q) P1 O: `+ ~2 F) V$ m) ?# ]
引入图片剪裁实现头像上传(7分钟)5 O# @( }; i! v* E5 e0 [
用户修改昵称(18分钟); x, R& _- ?9 \( [
用户修改生日(17分钟)
) b+ e' a i# b. t, a4 ^ 用户修改性别(15分钟)
- T% K* Z* l4 K2 G+ Z, z8 Y17项目发布与上线
. h/ t/ ^- c' J* Y8 Y( u1 f 打包H5 web应用(5分钟)( i: [8 x8 o+ M0 }- v$ i, L
购买云服务与简介(6分钟)
- P9 b5 L4 h& u# g. n 配置安全组，重置密码，上传nginx，配置ssh(14分钟)
1 b" W0 r L5 n H1 w" j* | 安装nginx(9分钟)' }) u$ G* h- w7 b2 N l9 T
成功发布H5端web应用(14分钟): h0 X( C B& S2 f6 ?" a
微信小程序上传审核流程讲解(8分钟)
. O" n! I$ F3 ?, c" T 打包安卓apk(8分钟)
% ?% }+ B. A7 U- l4 B" I 简述ios打包(8分钟)+ x6 J! M( P+ r4 Z2 C: s
18课程总结
8 X+ m# p' q# S 课程总结与展望(9分钟)
: l7 o* X: _( F+ D$ h% |
6 Z2 h' B7 |; b ' g. S0 v5 K4 Q& d, z
7 P0 O0 r; R. ^
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
