|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
. k7 j8 p- r. {5 q课程目录：: Y8 J( u" S' r# k* g
01导学3 E3 P9 K2 @1 `4 U c
导学(12分钟)
9 [$ Y1 d, e- k* @0 D1 a" J- C 学前必看！补充课：接口调用参数补充(6分钟)
1 u+ Z2 |* r, G* k J6 I 基础框架NextHelloWorld(rar，513.7KB)
7 N4 n% B9 N+ d. b/ F# g$ z; c8 s9 e" g 超英预告最新源码(rar，8.7MB)
: a7 ]# Y& R! L" ? linux工具与ngxin安装(rar，37.3MB)0 s9 S5 c, z% P( w
logo素材制作(rar，730.3KB)3 L6 t X( I! b0 M1 e
02课程介绍) w( B% r& ]/ F9 a4 Y4 ]& g% V
什么是 uni-app(4分钟)
) K4 ^. m9 s8 ?7 D* ?& G 为什么要使用 uni-app(8分钟)
$ |) u r! `/ u( K# Q& k, ^ app多端发布效果展示(7分钟)" {& V: [2 y' j; E8 |: f
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
) n1 u7 i1 Z; V2 i 微信、支付宝小程序开发工具调试(7分钟)
' t% n" q$ ?- f0 Q4 ^5 q 在Mac上使用Simulator进行调试(5分钟)
1 A! [/ T4 ], A( D' n% n" y$ e03框架基础-上5 j4 f/ Y% A- B4 {3 t: ^* \1 z
简述MVC模式(9分钟)- S Y5 }# E- ^: f7 [
图说MVVM模式(5分钟)
* \5 o2 |8 g1 ~' V0 b/ r 通过代码阐述MVVM与双向绑定(12分钟)( ^' G' X. V" Y" W3 @9 B
JSON对象和数组的渲染(4分钟)
- P; [ J: F* ^5 f- H( Z! L 页面路由以及标题配置(11分钟)
. h" J6 O1 O7 `: _! h5 K 宏观讲解项目配置文件(16分钟)" d; j# V' U9 s
应用的生命周期(11分钟)8 @2 E' s% d# S# N9 \5 `9 J. Z
页面的生命周期(14分钟)$ w0 T8 w; I7 z6 `, N9 {! }) b' \
固定像素px与响应式像素upx(12分钟)
0 O" B# Z) O+ @3 k+ K+ r 在页面里使用{{}}表达式(7分钟)
# P8 s$ T' F m6 R# Y/ F) c9 ]& X04框架基础-下8 |( P8 d9 L* |( i8 `) c* J0 f3 s
v-bind指令对属性的数据绑定(7分钟)
) z& L' X8 z0 O5 k* c# k4 ] 事件基础(22分钟)! i. `- m, D! r8 L
条件渲染 v-if与v-show(7分钟)
A( T6 t& d& w, G# n2 } 条件渲染 三元运算(4分钟)
6 v" U! @+ \) E% X7 a+ \ 列表渲染v-for的使用(13分钟)2 H, [& F6 s1 P5 T& E5 b: N
指令key实现for循环的组件唯一性(12分钟)
' Y M2 s- a; ^8 l% z, m: ? 嵌套循环的下标定义(4分钟)
d" U6 H( A+ X 条件编译 - 上(10分钟)
4 ~" D3 k: t: [6 @/ _+ e 条件编译 - 下(7分钟)
4 W7 x& \3 t9 R+ h; h# H1 ?, K05样式与flex布局-上$ O% P, h/ _6 H8 w1 ?
flex布局介绍与模型(8分钟)4 |# g) Z# Q) F4 `/ {# [
flex-direction 元素的排列4种方向(10分钟)- l8 Y3 q0 B1 h; W" ^
导入外部css样式(4分钟)* l0 f( ?& ?0 b I- w3 F
flex-wrap 元素的换行(12分钟)
8 I( t; D- H& S0 [ justify-content 元素在主轴的对齐方式(14分钟)" i3 l2 t# i( w; J; f
align-items 元素在交叉轴的对齐方式(12分钟)
! _% a p! \5 r; `7 h) G06样式与flex布局-下
' ~ R/ n, y- T% l: P# C align-content 多轴线的对齐方式(13分钟)
: h& m( H% h! N6 U) k t flex成员项的属性 - order(4分钟)
9 A2 Q" j- m2 }/ ? flex成员项的属性 - flex-grow(4分钟)
6 N8 y; |& A- G+ Q, [* k6 r* v flex成员项的属性 - flex-shrink(6分钟)5 Y6 e4 t/ m5 k3 w. E" t
flex成员项的属性 - flex-basis(4分钟). \1 G( H" F% X
flex成员项的属性 - align-self(6分钟)% H+ @. a3 F, O" b4 V
07开发首页-上
4 n6 T. s& q8 u) b 创建项目，构建基础页面(8分钟) 免费试学6 u0 \' K, L0 p1 R8 |
构建tabbar(13分钟) 免费试学
$ |/ V1 Q6 n( q; ]3 ?; Q3 o 设置全局page，简述view组件(6分钟) 免费试学
( c5 I" q! Z/ `9 r 使用轮播图组件(11分钟) 免费试学
0 l# c5 \5 a9 l" Q) V9 U 禁用原生导航栏达到页面全屏化(6分钟) 免费试学% X+ W6 N6 y7 o* J( @7 b( h4 G
在线文档的使用(8分钟) 免费试学
3 e1 v" N6 Z* C$ [( S request网络请求api讲解(5分钟), b) f; h# _/ K) c4 I" Q
uni.request动态获得轮播图数据(9分钟)
; s/ l, q( s7 ?/ m 箭头函数 this 作用域(4分钟)8 }0 z5 Y! }# ~: d( G
渲染并且展示轮播图(5分钟)
4 X8 X$ U1 q( j9 l08开发首页-中
' a1 [6 N6 d8 s* D 引入组件实现全局变量(7分钟)/ M7 ?" U( h; y4 r* j$ y
使用挂载实现全局变量(4分钟)( k ?: ]6 {9 u
在手机端进行微信小程序真机预览(6分钟)
$ m2 z+ }) j- W# o 微信小程序https使用事项(7分钟)- Q" Q, S. x& Z$ g/ `) r
开发热门超英 - 标题(9分钟)3 t T; F* ]0 ~0 V* i6 x2 E
开发热门超英 - 简述scroll-view(4分钟) k: N) p/ W* u- |1 Y2 v/ Z
开发热门超英-使用scroll-view实现横向滚动(3分钟)5 E* S# |$ b% g5 n8 t, h
开发热门超英 - 海报与标题(8分钟)% Q, X+ A/ V) m$ R- J4 m' @
开发热门超英 - 评分(6分钟)' B; s J: m& D
开发热门超英 - 动态渲染数据(8分钟)8 h- D5 a9 [' h! `# ^0 c! G0 v+ a
09开发首页-下0 \% Y8 G9 d9 `
开发自定义组件(7分钟)+ M% u; g2 [4 O8 B; g& W$ l
父组件向自定义组件传入值(6分钟)
2 \6 Y- J1 t8 S 完成评分自定义组件(22分钟)- |- }* O0 [( O5 l. I6 l- T! \2 l
视频组件video讲解(9分钟)
5 {0 u$ m' f9 q9 x! U1 Q- M- } 获取预告片数据(3分钟)# F9 n( i3 n( f# M
动态渲染预告片(10分钟)7 d/ D0 k- J! R/ T' e
猜你喜欢 - flex布局嵌套编写(18分钟)8 ~! Q9 x% U& y1 o9 D `! c/ N
猜你喜欢 - 编写点赞css(7分钟)
7 i+ Z: k& w1 z+ x2 n 猜你喜欢 - 实现点赞动画效果(14分钟)
! ?1 U7 s0 x$ ~$ x' c7 { ` 猜你喜欢 - 还原动画(5分钟) @+ `; F4 q6 z4 W4 ?
10开发首页-终, X( Z3 C9 [* m; W
猜你喜欢 - 动态渲染列表(6分钟)
* b% Q4 R) @4 d4 p0 ?' Y 猜你喜欢 - 实现动画数组(7分钟)+ W" O `: M- h% Q# Y: r1 s
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
* ^# u* X) F5 l6 u N5 U 猜你喜欢 - 开启下拉刷新(5分钟)" h8 Y& ]7 Q0 }
猜你喜欢 - loading交互api(8分钟)3 ]7 n; X- P9 b! x) D9 ?
11构建搜索页-上$ i8 i, i! w* n, H8 O$ o
搜索页面 - 编写搜索栏(19分钟): @6 ^7 w' w' ^: I2 ]% z9 J
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
$ B, S/ U5 q) M, V& J: a: G W' A 搜索页面 - 动态获取最新预告并且渲染(9分钟)! B, ]; { u7 p0 r8 q' e
搜索页面 - 分页接口api讲解(4分钟)
* P8 k' v* X; l# w$ X. Z 搜索页面 - 搜索前置准备(6分钟)7 W9 \! h% F- s& L! X( m D
搜索页面 - 执行搜索动态渲染(8分钟)1 a2 |1 N5 Y; |0 d Q* {
搜索页面 - 监听下拉实现分页功能(8分钟)
2 D- M# x8 R: R( @+ S2 T1 B1 L8 Z) Y 页面路由api与传参(13分钟)
+ ?4 F. m( F, \* H5 h4 w7 G 页面跳转组件的使用(7分钟)6 \1 R8 c' b: v" W
详情页 - 查询详情与视频渲染(8分钟)
# ^7 R ^2 @5 @7 X12构建搜索页-下
$ I. T8 I& k$ K9 k% Y 构建预告片基本信息(16分钟)
; N% L- S$ d/ Y1 i) n 构建评分快与阴影效果(15分钟)& ~9 Q3 }/ `. f; h% N. z
解决错误数据绑定undefined(5分钟)
+ W" q$ ?' V `" Z. e3 r: e0 i, I 编写分割线以及剧情介绍(8分钟)
) k s) H( \5 Q7 m0 V+ G 构建剧照与演职人员数据列表(10分钟)
L! z- y3 B6 S7 w* o 渲染剧照列表(8分钟)
* x/ ^8 d3 p# A 双拼数组构建演职人员列表(12分钟)
4 v8 {0 l" V( X! R* s8 w 渐进式导航栏设置(6分钟)$ _. s) n7 p7 s$ X; {4 H% C
通过预览api实现剧照预览(7分钟)
# W# O% r% L8 {3 ?- ~/ b1 w5 _6 x; n 演职人员数组拼接预览(8分钟)
5 C9 Y1 U) z6 l% O13电影详情页构建
4 |8 A7 @+ {9 Q8 N' c/ x 自定义预览封面图(13分钟)' V& Q/ i3 m" o2 Z7 t
actionSheet接口api使用(6分钟)
+ c) j' k' u! t1 [+ F0 C9 n# W 下载以及保存图片(15分钟) |, y7 R* A' n+ t( b
配置https下载合法域名(5分钟)- Q5 i; P' b3 `/ n7 Q; S1 M
实现小程序中的分享转发功能(9分钟)
+ n8 [4 [5 u' s. i 自定义导航栏按钮(11分钟)' A2 t, F1 X' F. W- ~% R
分享到朋友圈(9分钟). ^4 O: Q/ N" ~6 J) [$ ]0 C
微信开放平台简单介绍(6分钟)
9 I+ @* P7 J' [3 s 操作视频对象，提高用户体验(8分钟)" ^2 D8 L9 P- T% y) o
优化首页视频体验(13分钟)
5 w+ O; Y) y. V, t14我的页面（上）4 R7 e* s7 i: z6 F3 e0 x$ r1 e
开发个人页面-header与导航栏设置(9分钟)
4 g" z2 K( O+ E$ o) W 发个人页面-用户未登录和已登录的页面展示(9分钟)
% Q8 Q2 w9 S; I2 @( g. V- n 构建注册登录页面(8分钟); l2 o9 V! {: G2 h
button与form组件讲解(6分钟)
* o- k) r5 o' F( | 实现一键注册登录(12分钟)5 s* F9 a1 V$ {3 M/ j( Y
通过缓存切换是否登录状态(9分钟)
6 ~9 v3 d' T- Y5 ~7 ] 构建用户账号页面(9分钟)5 e$ j9 M! ~6 z* O( `! U' t3 K; G
清理所有缓存api(4分钟)( u/ p* C' c6 ?7 T& [
用户登录错误提示与方法挂载(7分钟)
* j |& t" D4 f; u" Z* ] 渲染用户信息数据(6分钟)+ y8 C, ]( X3 o j) A2 g o
15我的页面（中）
( I4 X% ~: x, H2 _. @ 用户退出登录(6分钟); L6 U* N' f7 a( L/ T
第三方登录讲解与页面构建(16分钟)
) f# z& Q4 N1 f8 ~& Z! g 第三方登录-小程序端实现微信登录(15分钟)
7 r4 Q; X9 M; X1 { 第三方登录-后端登录业务梳理（辅助理解）(10分钟)0 x8 v5 U6 l4 z+ `1 A
第三方登录-app端授权登录(8分钟)' m: `( E( }0 S# R" M7 Q
第三方登录-app端获取用户唯一id及信息(12分钟)
$ N3 i/ l K* C1 ^ 第三方登录-app端执行一键注册登录(7分钟)# c7 g+ ^0 `! _ `( K2 h
查看预览用户头像(7分钟)2 u. v- s* P8 k9 ^2 c, T6 V* k" |0 z
选择用户头像(11分钟)
3 x- x* |9 P7 x m1 O7 Q 重新选择头像(3分钟) p+ I1 N/ w8 l
16我的页面（下）
# r% i! C' [; Y1 R# H0 l& W3 z 文件上传api与后端接口讲解(5分钟)
) s2 r9 V' S. e w token令牌讲解、实现头像上传(23分钟)# o6 [# L7 j" h' j( |! Y
引入图片剪裁实现头像上传(7分钟)
" O+ E3 w; o# `" @7 G 用户修改昵称(18分钟)( M4 w: l* ~/ I/ v+ ^8 c
用户修改生日(17分钟)* T8 I ? k- u8 c2 j- n
用户修改性别(15分钟)
4 W0 J2 d+ r6 q0 p17项目发布与上线6 w u! z. B$ \- t* V9 P
打包H5 web应用(5分钟), {- t* F# P* S1 u
购买云服务与简介(6分钟)
# H/ q6 Q8 t1 D* w6 F! e# L3 C 配置安全组，重置密码，上传nginx，配置ssh(14分钟)- F/ ^+ r p3 [ k
安装nginx(9分钟)
- n0 O) ^& J1 g7 q/ j. a 成功发布H5端web应用(14分钟)- P. W" E& N2 w4 y
微信小程序上传审核流程讲解(8分钟)% i: E. ~9 Y) j X% @
打包安卓apk(8分钟)
1 c3 }4 S$ |- W, H$ w& }- U8 c 简述ios打包(8分钟)
* j! b& L _# P+ s' g+ g4 P# a T18课程总结
7 O/ i5 Q4 d# c" ?% }( E/ W 课程总结与展望(9分钟). [3 X( |. D9 n3 f, A8 r* _: L' T
9 B" j q: N) Y) K$ r: w
" g: q1 j! e, r+ T$ A
1 P0 r5 _; h& Z6 U& e |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
