|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。/ s: y A2 `. f6 u# R/ A$ h" m3 z
课程目录：- L2 z5 h! Q4 ?' C( c# B0 |6 D
01导学
' z4 p- p/ v7 |5 u& ]7 z 导学(12分钟)
. q M5 A( b$ @" c& O( [) p 学前必看！补充课：接口调用参数补充(6分钟)% i b! u& J* | H* `5 ]
基础框架NextHelloWorld(rar，513.7KB): \$ v/ E( ^6 s3 w
超英预告最新源码(rar，8.7MB)
7 u; W9 B* ^& H linux工具与ngxin安装(rar，37.3MB)
. Z# }8 m, e( @" U7 x logo素材制作(rar，730.3KB): ^) u. G. V- g. l
02课程介绍
# l% i/ n, U- E8 i M- g! z 什么是 uni-app(4分钟)+ j% i4 k2 m: Q3 |1 J, ~( Q
为什么要使用 uni-app(8分钟)
% @# s& q' V; T app多端发布效果展示(7分钟)
2 y6 p, { ?4 w' q; q) q1 d- ^6 R 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟), [; V" ^. j. I% M3 u
微信、支付宝小程序开发工具调试(7分钟)
2 r: Y0 |8 @1 _, K, B' u 在Mac上使用Simulator进行调试(5分钟)
8 }7 V V7 o% F4 s) i7 [4 @9 P03框架基础-上4 `; e, h& V# `" s& r* \6 ^
简述MVC模式(9分钟)3 O% h) O' `& G' E2 G! F
图说MVVM模式(5分钟)5 a- R: P H; U1 x, V" G0 A8 ]$ ?
通过代码阐述MVVM与双向绑定(12分钟)3 a4 i4 U' m4 e' A/ [! S
JSON对象和数组的渲染(4分钟)) f9 ?% ~6 K; j* ~6 j( B3 l
页面路由以及标题配置(11分钟)
% Q) m6 J9 V& ^* f4 r! d; f 宏观讲解项目配置文件(16分钟)6 s" l+ E' Y% C
应用的生命周期(11分钟)
! Q: F7 N; Y5 L 页面的生命周期(14分钟)
+ x" B% J9 R) \5 K% q* b3 O 固定像素px与响应式像素upx(12分钟)
: c( @% C: t; I" N: ?) h4 R" j# Z5 h 在页面里使用{{}}表达式(7分钟)
+ Q& `0 ` O; @. r0 r0 O04框架基础-下
: [; q, X+ u6 u! A6 D. w v-bind指令对属性的数据绑定(7分钟)$ E- Y+ B" D! \ }% y& e0 T+ |
事件基础(22分钟)
4 L- t) F* O9 |. D e4 X- o3 o4 ? 条件渲染 v-if与v-show(7分钟)
; _) e3 C9 j6 S8 f4 Z 条件渲染 三元运算(4分钟): [% e8 `' V) m
列表渲染v-for的使用(13分钟)8 t# \% x N# }& g% s0 @
指令key实现for循环的组件唯一性(12分钟)
. R: d' U3 `2 K2 ]) d k 嵌套循环的下标定义(4分钟)
8 L2 u, _' o3 X. Y 条件编译 - 上(10分钟)0 }4 d, j8 c e3 Z$ p
条件编译 - 下(7分钟)
" @# y/ @5 F+ o5 y; Q( o05样式与flex布局-上
$ Q U, G& t! D( j flex布局介绍与模型(8分钟)$ e7 q, K! H" b% J
flex-direction 元素的排列4种方向(10分钟)& B/ c! O2 }# O$ T/ F2 o6 ^
导入外部css样式(4分钟)
0 z* L1 {+ W0 O" G flex-wrap 元素的换行(12分钟)
- e+ ?% s: w2 n: `9 y j6 O justify-content 元素在主轴的对齐方式(14分钟)
$ O5 e2 v8 F* i r align-items 元素在交叉轴的对齐方式(12分钟)
( C# \2 s# w0 W0 M+ F& F# @06样式与flex布局-下
u4 M+ s/ R- T7 b: y align-content 多轴线的对齐方式(13分钟)
% g. H" E6 }% q2 t flex成员项的属性 - order(4分钟)
3 j! g2 `8 T! [- A" Q) o flex成员项的属性 - flex-grow(4分钟)
" B3 F# m; `8 c; ~/ R, S3 B( { flex成员项的属性 - flex-shrink(6分钟)7 f- B ^* m6 [' o* j
flex成员项的属性 - flex-basis(4分钟)
! H6 b" z3 }2 Y flex成员项的属性 - align-self(6分钟)% E, y& _5 n9 I5 r0 y! @! i! l
07开发首页-上
& `* r( X# r. o$ w7 w8 S% q7 Z 创建项目，构建基础页面(8分钟) 免费试学. t6 t* N$ `8 e t) A
构建tabbar(13分钟) 免费试学
% a- a' z( J- u 设置全局page，简述view组件(6分钟) 免费试学) {+ \9 i6 N2 u+ i
使用轮播图组件(11分钟) 免费试学8 [4 j3 U# s) u3 M7 n- h3 U
禁用原生导航栏达到页面全屏化(6分钟) 免费试学9 ?/ ?+ T+ a: E( h- d/ D0 R
在线文档的使用(8分钟) 免费试学5 R( L* o( ^, C
request网络请求api讲解(5分钟)
- y8 h( S3 ?) X& e/ f/ } uni.request动态获得轮播图数据(9分钟)
0 ~: v& A$ n( O+ z- l6 i* h5 W 箭头函数 this 作用域(4分钟); ^: n3 Y8 B U! D- _" I
渲染并且展示轮播图(5分钟)
& D/ w7 V4 _- }. _08开发首页-中( ^4 k' r; T2 @6 ?# u4 G, J4 G- O
引入组件实现全局变量(7分钟)
& N, ?, e( D4 R1 H* B 使用挂载实现全局变量(4分钟)
2 Z$ x. p0 R9 G; \7 _" a 在手机端进行微信小程序真机预览(6分钟)
J$ H) |3 v- a8 l5 v 微信小程序https使用事项(7分钟)/ ~8 Z% V- h* ]$ T& q5 W; u
开发热门超英 - 标题(9分钟)
) f& y. m; K4 \ 开发热门超英 - 简述scroll-view(4分钟)7 _4 \0 Y. f+ v Z
开发热门超英-使用scroll-view实现横向滚动(3分钟)% n" K: c( J( o
开发热门超英 - 海报与标题(8分钟)
% s7 \/ O, r) A5 | 开发热门超英 - 评分(6分钟)8 X2 P8 q2 x7 [0 M
开发热门超英 - 动态渲染数据(8分钟)
' x/ J, r; ?/ a$ _09开发首页-下0 v+ w; C5 ]7 y. c$ [
开发自定义组件(7分钟)
- C2 h: ~$ G, N+ _/ M/ Q9 ` 父组件向自定义组件传入值(6分钟)
/ D' u; V0 E1 M k! P# N; @ 完成评分自定义组件(22分钟)- \3 e/ H' `0 d% U. ?/ v( Z9 y
视频组件video讲解(9分钟)
% a. y1 l% t L Z0 f' |4 ] 获取预告片数据(3分钟), h# X, `( [6 D7 {- F! ?" H( m
动态渲染预告片(10分钟)
( p* [9 d' Z+ K3 h 猜你喜欢 - flex布局嵌套编写(18分钟)* _' h9 J" c; A5 @0 t
猜你喜欢 - 编写点赞css(7分钟)
9 j' K t: B) i$ n' y F 猜你喜欢 - 实现点赞动画效果(14分钟)( u0 X! W" _. r# i, Q* [
猜你喜欢 - 还原动画(5分钟)
- k2 _4 p; k: E( _* z( k& f- ~10开发首页-终# \0 G9 ^8 p. f3 |% ~) L
猜你喜欢 - 动态渲染列表(6分钟)
/ F; Q% d3 ^1 h4 r ` L$ t* s2 P 猜你喜欢 - 实现动画数组(7分钟)/ }" a6 A8 h- s, s" O, r) m, k
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟): T, X: v' z/ l9 B1 d* ^5 v# @9 B
猜你喜欢 - 开启下拉刷新(5分钟)
" |0 \$ v" C0 S8 }* U4 s$ m2 p 猜你喜欢 - loading交互api(8分钟)
6 D% J5 N* J) M4 u2 ^11构建搜索页-上( f% O1 {- {; f. [' s: k/ ^: D
搜索页面 - 编写搜索栏(19分钟)$ z3 ^; S5 D' B' A
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
' |& v4 m! r) |3 H9 l' l, |1 M 搜索页面 - 动态获取最新预告并且渲染(9分钟)$ W" I" R# k* U- F& V
搜索页面 - 分页接口api讲解(4分钟); j$ {% ^ E% F' s" R4 M( n0 k# i7 W
搜索页面 - 搜索前置准备(6分钟)3 o6 Q+ L! k5 ?' A2 y% Q% b+ K
搜索页面 - 执行搜索动态渲染(8分钟)
. f/ _0 o% u' e' G L; I7 x1 D 搜索页面 - 监听下拉实现分页功能(8分钟)
* w5 B: b/ Z3 |7 j; p7 p 页面路由api与传参(13分钟)
) U8 p& N2 n8 w) G 页面跳转组件的使用(7分钟)
' A$ O; h2 e( J1 p+ E" B 详情页 - 查询详情与视频渲染(8分钟)
4 w0 H+ K. z) h0 [# z0 b+ U1 x12构建搜索页-下
! H7 D+ S9 v9 I" u( l# ]9 v 构建预告片基本信息(16分钟)% m5 J, F3 D+ [5 h" q5 ^
构建评分快与阴影效果(15分钟)0 }% v) e) C8 M6 O% O
解决错误数据绑定undefined(5分钟): I1 y+ \( v2 B+ q; O) J i& R
编写分割线以及剧情介绍(8分钟)
7 ?' O# q" p7 K3 G& S7 ? 构建剧照与演职人员数据列表(10分钟), A' x. a. `, t6 @4 t. Z2 L
渲染剧照列表(8分钟)
) r" }- M; K) ^7 _2 z3 a 双拼数组构建演职人员列表(12分钟)
$ h" ]8 @ c; B. I6 S9 M 渐进式导航栏设置(6分钟)
5 ]" }$ C X: h# B 通过预览api实现剧照预览(7分钟)3 @$ J) R! |* k, \+ e9 e$ _* \" J
演职人员数组拼接预览(8分钟)! ~( `( r" J+ H: |+ G) \* i
13电影详情页构建" s' g: k: w# Z4 a
自定义预览封面图(13分钟)! |2 w3 A3 ?8 T( \
actionSheet接口api使用(6分钟)
: [4 p2 E# f9 [ 下载以及保存图片(15分钟)5 G8 r& q( y7 E2 ~9 h7 Y% t1 `
配置https下载合法域名(5分钟)
/ `" T. W7 I- B$ f7 \7 W 实现小程序中的分享转发功能(9分钟)8 d$ A) P2 H+ I3 k$ x2 G! {; ?
自定义导航栏按钮(11分钟)
# M4 O! O$ ?" L+ ~8 D, C3 m 分享到朋友圈(9分钟)
- e: Q+ I8 s7 \1 y 微信开放平台简单介绍(6分钟)" l/ R2 X. Y' V
操作视频对象，提高用户体验(8分钟)
* P5 m! V+ X& G! o6 `5 L 优化首页视频体验(13分钟)
K: E9 h( I% R* A5 ^# J: i14我的页面（上）" J" f2 `! X/ y" B* q( g
开发个人页面-header与导航栏设置(9分钟)3 b: i2 M- `9 y2 b$ u, c
发个人页面-用户未登录和已登录的页面展示(9分钟)9 }" |+ _* Q! T7 f( C4 ~
构建注册登录页面(8分钟)
5 [2 c M. d, v8 R button与form组件讲解(6分钟)
( u. U& T r: W# Z- | 实现一键注册登录(12分钟): t9 I" g$ i: |2 T% v5 `
通过缓存切换是否登录状态(9分钟)
; e: s1 X6 d1 Y) e: P, o' @4 | 构建用户账号页面(9分钟)
9 q* `1 C* d- { s8 t 清理所有缓存api(4分钟)& o9 t2 y$ e9 e! K# \# v
用户登录错误提示与方法挂载(7分钟)1 P% l2 i' E+ z; P! Y8 u
渲染用户信息数据(6分钟)
2 Y: T; J: M, M. y. c5 N15我的页面（中）
9 q" H2 y. ~/ w0 Z, O! E 用户退出登录(6分钟)- y( i* Z7 ]& K6 r' r- J
第三方登录讲解与页面构建(16分钟)* p2 _& x2 S0 v7 t, \, z5 W; T
第三方登录-小程序端实现微信登录(15分钟)
: P4 W0 o9 B! B" q 第三方登录-后端登录业务梳理（辅助理解）(10分钟)" y7 V/ j4 H4 H+ h7 u |
第三方登录-app端授权登录(8分钟)
3 P: } [& e" H: y 第三方登录-app端获取用户唯一id及信息(12分钟)
4 a# i, D9 e( R: u% v5 o 第三方登录-app端执行一键注册登录(7分钟), p0 Y6 a) T6 p# o2 W" v" Z( }8 K, A8 l
查看预览用户头像(7分钟)
8 r+ }# ^9 j0 K& J# ` u% N 选择用户头像(11分钟)' X" W! A$ E% `! d9 z
重新选择头像(3分钟)
( Q1 N2 b& p9 ~4 s$ z z16我的页面（下）
. T0 F& I8 V. E( n" [ v; H 文件上传api与后端接口讲解(5分钟)
6 O! X. y6 W3 L/ {& C token令牌讲解、实现头像上传(23分钟)
( Q1 N- k' e# d2 t0 ` 引入图片剪裁实现头像上传(7分钟)
3 Z2 r) f5 G: z/ k! c 用户修改昵称(18分钟)
* I9 A& L6 r# q" X 用户修改生日(17分钟)7 n# I8 c+ {9 k- C0 n5 m! C3 D
用户修改性别(15分钟)
6 P, i- j. w6 l% e$ C1 s17项目发布与上线1 W' M* |+ ]0 X
打包H5 web应用(5分钟)
' |7 ^/ {) b, g7 I% w" O5 K, p 购买云服务与简介(6分钟)& |, k: K; m1 C* K/ c. P$ t/ s
配置安全组，重置密码，上传nginx，配置ssh(14分钟)) o' a+ M. m- p' f/ e. Y8 B3 H
安装nginx(9分钟)
. J* s+ F7 H0 T4 e 成功发布H5端web应用(14分钟)
3 D' f) v7 D( c$ Q: F) b6 B 微信小程序上传审核流程讲解(8分钟)2 R$ |; B+ e- s2 d8 P7 `2 N
打包安卓apk(8分钟)
5 ^) l5 O; J0 q3 o* g 简述ios打包(8分钟)4 }+ c, Y* s: [
18课程总结
, e( ` A1 C9 h1 @+ V H; g 课程总结与展望(9分钟)
, m- M, M, g! Z1 p/ m2 E3 v- t7 _3 o* J, s1 o
/ \% a- j- G! N F
9 E' H' D8 k) p6 ^3 n3 j- W
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
