|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
0 |7 ]( O6 i9 A$ U( V! r7 V0 ?2 G7 i课程目录：: g/ H$ F' ]% S/ B* f
01导学
0 F# J2 ] O4 {( R" [ 导学(12分钟) ! C, \8 F$ e# J
学前必看！补充课：接口调用参数补充(6分钟)9 \* r: \1 p2 `+ D c
基础框架NextHelloWorld(rar，513.7KB)! X3 Q9 d! s) o+ e9 R
超英预告最新源码(rar，8.7MB)7 y; Z2 H x4 E7 ^# I1 r
linux工具与ngxin安装(rar，37.3MB)
; F' s+ I4 q8 J( A8 C" M0 D: l logo素材制作(rar，730.3KB)% ^* W' X0 h/ w A' I( S- x
02课程介绍
! o" Z) O/ ?5 }' A/ n t2 X 什么是 uni-app(4分钟)
" i. v7 U4 `: t) w; A; | 为什么要使用 uni-app(8分钟)- ~+ y; z$ }3 X* [& ~# |4 I2 a
app多端发布效果展示(7分钟)" Y# O9 \1 `2 Q2 A
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)% |8 V- b" s \
微信、支付宝小程序开发工具调试(7分钟)# { \0 i1 H9 C( O5 k. p0 F3 M
在Mac上使用Simulator进行调试(5分钟)
3 d) }' v1 u8 O! Z03框架基础-上
' q$ B1 g4 m4 d: E$ [* T# B* B6 U2 K 简述MVC模式(9分钟)$ U( l: U8 O0 w* r4 T2 E
图说MVVM模式(5分钟)1 ` m' f* z9 w2 V& c
通过代码阐述MVVM与双向绑定(12分钟)
4 ]2 B1 E* S$ }* t0 @0 N JSON对象和数组的渲染(4分钟)9 D0 ?; H. Q* N, B' u
页面路由以及标题配置(11分钟)6 M2 R+ P3 Z, ]# |7 b( B1 N( S
宏观讲解项目配置文件(16分钟)- A4 s. g5 ?/ Y) i: E0 u% F
应用的生命周期(11分钟)
: s5 K; q y+ B. c9 n: S9 T! s 页面的生命周期(14分钟)1 W2 Q0 g/ h% _/ v$ B- ?
固定像素px与响应式像素upx(12分钟)5 D' a4 m2 y& m/ H4 Y4 H
在页面里使用{{}}表达式(7分钟)
9 K! B& w0 ^" q6 ^ W6 D; X04框架基础-下
" j4 D$ B5 D v* b v-bind指令对属性的数据绑定(7分钟)
3 E6 L; t2 ?" G1 {1 x6 {" [ 事件基础(22分钟)
{8 W( j7 K6 f" b1 K 条件渲染 v-if与v-show(7分钟). u' C- c# f4 m7 g/ k. ~) `
条件渲染 三元运算(4分钟); I6 n$ }* I4 M& ~% r" z
列表渲染v-for的使用(13分钟)
; k8 b. f' `' C& ] 指令key实现for循环的组件唯一性(12分钟)% l* q) v8 @5 K5 m# b. P* M
嵌套循环的下标定义(4分钟)4 Y. S5 A. n7 S2 y% J
条件编译 - 上(10分钟)
( M5 k5 B! U! @4 P/ A 条件编译 - 下(7分钟)
4 w1 _ F6 P* q" R; ?+ }, j& H05样式与flex布局-上
9 [# k% j: D* ?8 X" l flex布局介绍与模型(8分钟)7 l3 j4 g- @, p5 O! G$ g
flex-direction 元素的排列4种方向(10分钟)6 `: m) b3 C% B2 o1 f e) b
导入外部css样式(4分钟)
; `' C- @ M$ R+ _2 u3 Q: { flex-wrap 元素的换行(12分钟)
" z4 O& F$ c9 |* e: L7 y justify-content 元素在主轴的对齐方式(14分钟)$ E3 ^+ T/ p$ U5 x0 Y2 d
align-items 元素在交叉轴的对齐方式(12分钟)
Z* H E- X/ f& b' O06样式与flex布局-下1 h2 o4 R/ f) a9 z9 w4 Q5 S
align-content 多轴线的对齐方式(13分钟)- W* A9 q+ X. `6 x$ m
flex成员项的属性 - order(4分钟)% b/ j0 S% R4 F" @; y1 \3 o" ?
flex成员项的属性 - flex-grow(4分钟)
3 E9 Z s4 l( | G4 ]0 O flex成员项的属性 - flex-shrink(6分钟)
9 ]2 W/ W" A4 p; h9 W flex成员项的属性 - flex-basis(4分钟)( P9 y0 w+ g5 d1 ~8 D5 C
flex成员项的属性 - align-self(6分钟)4 R- e1 G5 _' I
07开发首页-上1 A8 }3 R4 S. w7 ~4 a
创建项目，构建基础页面(8分钟) 免费试学- r% z2 E, @* W: f4 @
构建tabbar(13分钟) 免费试学' {: j- `3 H5 {) }' w0 k4 y
设置全局page，简述view组件(6分钟) 免费试学" B' z' l/ s8 p7 F
使用轮播图组件(11分钟) 免费试学
* } X; O7 O$ m 禁用原生导航栏达到页面全屏化(6分钟) 免费试学
0 x P6 o$ I- g* Z& j 在线文档的使用(8分钟) 免费试学
2 F0 `$ ]( k% Y5 _$ Q3 N3 k# \ request网络请求api讲解(5分钟)
# W: b- ~& q6 x4 F. |- T1 r4 K uni.request动态获得轮播图数据(9分钟)2 E0 K, B4 o/ |7 q2 r4 d% r
箭头函数 this 作用域(4分钟)4 A7 F' S" ?: U
渲染并且展示轮播图(5分钟)
0 M9 b! V) R# n6 ^3 c08开发首页-中
$ G" |1 x/ I O 引入组件实现全局变量(7分钟)
1 @" [8 C0 k I! L8 `& k% x 使用挂载实现全局变量(4分钟)/ K) U/ k1 y+ R2 {2 K' _
在手机端进行微信小程序真机预览(6分钟)/ ?7 P3 B. U4 j4 O5 |9 I
微信小程序https使用事项(7分钟)5 e* P, u. [5 F8 w( K
开发热门超英 - 标题(9分钟)& R! d! \# p; ], F9 k4 x
开发热门超英 - 简述scroll-view(4分钟)6 u$ b( }: P1 {. ]# |0 A
开发热门超英-使用scroll-view实现横向滚动(3分钟)
6 d0 G G$ a1 S: U1 _6 r; k 开发热门超英 - 海报与标题(8分钟). v- _9 H9 Y d) Z
开发热门超英 - 评分(6分钟)( y+ h; I, u0 s
开发热门超英 - 动态渲染数据(8分钟)
4 [' J& e0 t# t09开发首页-下
" {6 \) G, t5 j, K# H/ s! [ 开发自定义组件(7分钟)7 a% r% m; U, `0 C( T% j& U* \
父组件向自定义组件传入值(6分钟)& r4 }- ?6 @ o
完成评分自定义组件(22分钟)/ r- ^6 D4 c0 ?* G+ F2 C1 l- c
视频组件video讲解(9分钟)5 o& Y2 G# H% l+ l8 H! N. f
获取预告片数据(3分钟)
- V8 n0 C X8 C2 j 动态渲染预告片(10分钟)
; w4 @% R3 k$ E 猜你喜欢 - flex布局嵌套编写(18分钟)
5 r% d8 y m# j2 T- S9 |7 I: n 猜你喜欢 - 编写点赞css(7分钟)
. H+ ^" l3 o# q9 {' V 猜你喜欢 - 实现点赞动画效果(14分钟)
0 m! H* [6 Y* J 猜你喜欢 - 还原动画(5分钟)
! e: R/ z1 K$ I) p* d5 T9 a10开发首页-终# z" a+ Q* B6 N7 o( U; ?
猜你喜欢 - 动态渲染列表(6分钟)
/ w% V. _. v, b! p 猜你喜欢 - 实现动画数组(7分钟)- N4 c. G2 u0 L3 J
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)9 @7 ]% z8 I, z% V# V( y6 E
猜你喜欢 - 开启下拉刷新(5分钟)
7 N0 J) Y7 j0 r- h 猜你喜欢 - loading交互api(8分钟)
0 ]' ^6 D! | h0 }9 [3 ]1 x1 D11构建搜索页-上
' L6 ]9 z3 @! _+ t, |" J, g 搜索页面 - 编写搜索栏(19分钟)( K# \) b" n( w6 h2 o. J; @' g9 W
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
7 P4 p- C# q: A2 P) ]2 q# n 搜索页面 - 动态获取最新预告并且渲染(9分钟)# k, @, M8 i1 p& ^% f; B: _
搜索页面 - 分页接口api讲解(4分钟)5 R# G/ ^3 i: C, ] Q" L5 t4 C
搜索页面 - 搜索前置准备(6分钟)
8 D# t: h- Z5 T* x# i5 y 搜索页面 - 执行搜索动态渲染(8分钟)
0 c. `8 n+ o, t 搜索页面 - 监听下拉实现分页功能(8分钟); F6 i1 H0 o8 v7 f
页面路由api与传参(13分钟)3 t: k; a% c9 ?# E5 l
页面跳转组件的使用(7分钟)8 Q! F6 G' x* n
详情页 - 查询详情与视频渲染(8分钟)
4 C1 G# x0 e+ ~5 U3 G/ I12构建搜索页-下5 }$ ~7 J0 g( G0 Z s/ F1 w
构建预告片基本信息(16分钟)& E4 s! Z/ g* A% e& Y
构建评分快与阴影效果(15分钟)
5 j3 \! t9 \* m) i4 P" n3 m. o 解决错误数据绑定undefined(5分钟)1 _; e# k& g: E3 @2 M; R
编写分割线以及剧情介绍(8分钟)8 j7 t% @0 Y$ w' }0 j
构建剧照与演职人员数据列表(10分钟)2 o6 F3 d [3 j! }5 v4 P
渲染剧照列表(8分钟). Y6 n9 `: W2 s7 R8 }8 K0 b
双拼数组构建演职人员列表(12分钟): k% u' Y9 l8 \! T8 y
渐进式导航栏设置(6分钟)/ u, B3 z! r4 l
通过预览api实现剧照预览(7分钟)
! l. ? d0 K( o, G! u6 I 演职人员数组拼接预览(8分钟)
5 d. q2 l/ h# V8 f- j1 i# ]" S, j" p13电影详情页构建
! ?. c2 ?7 N; s% p# ~. `& O& U 自定义预览封面图(13分钟)
$ F2 ~$ M0 o% ^& T& L, I actionSheet接口api使用(6分钟)
% K5 ]; Y$ a1 w w- ?3 o8 }3 a 下载以及保存图片(15分钟)4 O( f3 b! s7 D( S/ E( }
配置https下载合法域名(5分钟)
+ M- R! I) X4 K" L: Y, C 实现小程序中的分享转发功能(9分钟)
' {6 M( M u' e6 ^- Z% @7 K 自定义导航栏按钮(11分钟)
5 Q1 k+ n+ Q. G9 ?: j6 S G! i 分享到朋友圈(9分钟)% e. H# d# \. f w
微信开放平台简单介绍(6分钟)
5 B' w- _8 m6 F# p 操作视频对象，提高用户体验(8分钟). C2 g0 x0 |' g" B. z; h: O% L3 C
优化首页视频体验(13分钟)
9 O- O# s+ K. @# x @5 m# P14我的页面（上）2 a; i, k+ b4 H5 R3 ?4 d- i: b
开发个人页面-header与导航栏设置(9分钟)3 Y6 r5 d, l$ f( k; J6 G$ \
发个人页面-用户未登录和已登录的页面展示(9分钟)
" B( H+ L ]% r3 Z* _" } 构建注册登录页面(8分钟)
% b* W& w- q7 u3 e+ O( a button与form组件讲解(6分钟)
4 c$ V; |/ R h! r* X 实现一键注册登录(12分钟)5 `6 m# h2 ~& C' G% G% O
通过缓存切换是否登录状态(9分钟)/ a* A9 r5 X- V2 {& O
构建用户账号页面(9分钟)
0 `# `& M- V7 z5 P0 }& z 清理所有缓存api(4分钟)% }' D8 c) T: \- p! m
用户登录错误提示与方法挂载(7分钟)
% }: P1 K/ |1 Z) d 渲染用户信息数据(6分钟)
! E. M2 _7 w5 A& |15我的页面（中）
+ G$ y9 x1 V6 b! w 用户退出登录(6分钟) U5 X4 J1 w' p, t, J1 }* _2 A- @
第三方登录讲解与页面构建(16分钟)
/ @0 R: G1 `7 A, m/ |$ W' d 第三方登录-小程序端实现微信登录(15分钟)
. X% e1 s# \; R% E. J& | 第三方登录-后端登录业务梳理（辅助理解）(10分钟), F. O# U6 G, `" y& p: a5 @0 o
第三方登录-app端授权登录(8分钟)* A# N2 p1 v, Y
第三方登录-app端获取用户唯一id及信息(12分钟)# @# M0 @" u- X0 O
第三方登录-app端执行一键注册登录(7分钟)1 @3 l+ u" }* e3 C: i6 a
查看预览用户头像(7分钟)/ q: C" c7 {8 v
选择用户头像(11分钟)( F1 U, E7 a2 N1 ?
重新选择头像(3分钟)/ i/ z" `# U& z
16我的页面（下）
* `3 B1 I" v' l; t, j 文件上传api与后端接口讲解(5分钟)
$ a) F9 x: U- |- C. `( {' v( i/ H token令牌讲解、实现头像上传(23分钟) H& p$ {0 J- G5 D
引入图片剪裁实现头像上传(7分钟)
$ o$ N" @$ A- R2 z) b1 K2 B 用户修改昵称(18分钟)
# M. Y3 K1 {; q! } 用户修改生日(17分钟)
- P8 x3 I! k7 _% a9 P7 S" b 用户修改性别(15分钟), Q* I+ T ]' a
17项目发布与上线1 {5 j, I$ k7 A& {/ f" W. M" C3 E
打包H5 web应用(5分钟)
; H X W; Z0 h' r6 _% L 购买云服务与简介(6分钟)* D3 s" F8 F5 K0 j5 o [0 M' n
配置安全组，重置密码，上传nginx，配置ssh(14分钟)
" W& v6 D( q/ c2 o B, c 安装nginx(9分钟)
% P; I8 G: s% L1 s1 Q4 n, \ 成功发布H5端web应用(14分钟)" J d# N( z/ D% }9 U. _
微信小程序上传审核流程讲解(8分钟)
. G% }' o; g' C 打包安卓apk(8分钟)) V* f! v2 G" E: {
简述ios打包(8分钟)
' k2 E& Q6 ]2 u- \" J18课程总结$ T' l* i0 L1 I( q
课程总结与展望(9分钟)( n% O; b. D8 _
* o m O6 ~2 @8 _6 F: Q: @$ b
7 O" A+ w) ?$ A9 ^* \
5 ^6 }% b5 d3 ]% _
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
