|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。& s- U7 `3 T: I8 P# ~. C! o' V7 s( S
课程目录：- h# g6 c7 s# h2 H
01导学
4 ?4 \0 S' h( A: h* E4 D 导学(12分钟)
% H+ [9 C! U) C( c% g 学前必看！补充课：接口调用参数补充(6分钟)% h8 Q. o/ @& U3 s l+ h. ?
基础框架NextHelloWorld(rar，513.7KB)
8 n# k, n$ x+ ~) s4 [ 超英预告最新源码(rar，8.7MB)
# A/ h# P" R, c, a, a( R7 N linux工具与ngxin安装(rar，37.3MB)
; X; `% q# ~! g logo素材制作(rar，730.3KB)
6 E0 r0 T" c. ]3 @3 a$ o. c3 g6 f# Y02课程介绍1 n. F6 c5 H5 H. T! a, s
什么是 uni-app(4分钟)2 T0 K" T& R9 H3 h/ D# \& L
为什么要使用 uni-app(8分钟), b1 U* t, Y; @' j) |( P
app多端发布效果展示(7分钟)" p- D7 ?& |4 d# u7 G, l
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)! D' Q# Y" U2 ^9 p) w8 \( H+ O
微信、支付宝小程序开发工具调试(7分钟)
7 U) s$ }2 _# p7 Y3 @$ g 在Mac上使用Simulator进行调试(5分钟)
/ q$ S$ f$ N9 u, k9 W6 Q03框架基础-上
1 p2 I+ Z& e: M8 l" a& y7 B5 [ 简述MVC模式(9分钟)
# p3 P. E$ n+ p) v1 K+ H" O# n9 ] 图说MVVM模式(5分钟)5 f; e; F6 W& R6 m& c
通过代码阐述MVVM与双向绑定(12分钟)
, t9 Q& |" x, l& a E# V: ?; C JSON对象和数组的渲染(4分钟). N% X( K. }# P1 r0 O
页面路由以及标题配置(11分钟)
K) A- H K0 p1 [/ y3 Y( p F 宏观讲解项目配置文件(16分钟)4 i) o4 s% Z2 D
应用的生命周期(11分钟)
* \/ L, k: c8 g$ P% V: t8 R 页面的生命周期(14分钟)/ L. D1 [5 @8 c+ N$ o
固定像素px与响应式像素upx(12分钟)
5 Q& a8 R" @/ z. M4 x 在页面里使用{{}}表达式(7分钟)5 X& ^# [$ Z1 a& u; L a: E
04框架基础-下
/ p/ W4 }1 D& y v-bind指令对属性的数据绑定(7分钟)1 D, U3 S" g" X. s( Q" h
事件基础(22分钟)
- x. m6 u, s2 c) M. y2 q1 c 条件渲染 v-if与v-show(7分钟)! b7 Y3 ^ ^/ l6 H8 i- X
条件渲染 三元运算(4分钟)
4 x, \8 P% N; f* E2 H& v 列表渲染v-for的使用(13分钟)
% X, v, c: P/ ] M% O" d 指令key实现for循环的组件唯一性(12分钟)
* X4 B* Y" Q$ Z# S4 e, f( _ 嵌套循环的下标定义(4分钟)
4 M$ r5 [: h' v9 y* C& Q8 C( u 条件编译 - 上(10分钟)
, |/ @8 d. w: T+ h7 q0 o 条件编译 - 下(7分钟)4 M$ Q/ U3 Y& Y W- Y
05样式与flex布局-上
) {: j. i4 ]$ N flex布局介绍与模型(8分钟)
1 G; x6 R; j( W4 O: s flex-direction 元素的排列4种方向(10分钟)
# B) W# Z$ l5 B 导入外部css样式(4分钟)
! l% W; D. @7 u% E* E; L3 J flex-wrap 元素的换行(12分钟)! p1 h! d. i% Q0 b
justify-content 元素在主轴的对齐方式(14分钟)' b& W/ l5 y5 S% u6 H5 E( d! h
align-items 元素在交叉轴的对齐方式(12分钟)
; e) w( E# A% p1 T& z1 i b3 _, i06样式与flex布局-下
) G" r, g- ~) I e* P align-content 多轴线的对齐方式(13分钟)
' x+ z& a6 N8 d* F3 U7 w3 I flex成员项的属性 - order(4分钟)
* n* |& b1 e L0 Z flex成员项的属性 - flex-grow(4分钟)
) ?/ s+ U3 c& g2 u flex成员项的属性 - flex-shrink(6分钟)
. A0 b# g# G& H* e) N2 D flex成员项的属性 - flex-basis(4分钟)5 I1 j* R- b, j
flex成员项的属性 - align-self(6分钟)
4 D9 Y4 o, U' v: F: t07开发首页-上) w( }2 H5 K* R! k, h- g; T! T
创建项目，构建基础页面(8分钟) 免费试学) V4 ?% ~) D- Y( }; M
构建tabbar(13分钟) 免费试学! K& n5 j w) X" o
设置全局page，简述view组件(6分钟) 免费试学
- A: O$ a* O d% U2 N; b6 i0 D) ` 使用轮播图组件(11分钟) 免费试学
~- H; V u' ?6 {; @; u 禁用原生导航栏达到页面全屏化(6分钟) 免费试学: a! _0 X$ w: `5 H: ^
在线文档的使用(8分钟) 免费试学
4 R$ Q9 x. W/ W request网络请求api讲解(5分钟)
/ K' o- _" S+ h- ~5 A' q uni.request动态获得轮播图数据(9分钟)0 P4 o$ q; u, Q: v- d4 `/ Y0 _# X
箭头函数 this 作用域(4分钟)
3 ^6 r0 A/ l6 F: s* i$ X8 f9 b4 e 渲染并且展示轮播图(5分钟)# H3 I/ V5 \& f0 F' ?0 J
08开发首页-中
! t+ o0 ?$ m+ H# [- q/ x# t8 X1 u5 m 引入组件实现全局变量(7分钟)1 }6 f) c) q4 {0 ~4 f+ r
使用挂载实现全局变量(4分钟)/ d8 @" Z0 ]$ M$ M: Y+ M5 X/ x0 f
在手机端进行微信小程序真机预览(6分钟)
" d" w3 C4 Y9 k; s1 m( V 微信小程序https使用事项(7分钟)
& I' \ x2 i# h+ i 开发热门超英 - 标题(9分钟)
* z1 R9 t9 }" R# F, H* n/ W, m6 f 开发热门超英 - 简述scroll-view(4分钟)
* f8 v) [3 u3 s) g3 `( C 开发热门超英-使用scroll-view实现横向滚动(3分钟)+ u6 R9 e& y2 h7 W
开发热门超英 - 海报与标题(8分钟)- B) t2 x$ r8 B
开发热门超英 - 评分(6分钟)
, g; v$ E: _' h2 Z% \5 X/ c5 B 开发热门超英 - 动态渲染数据(8分钟)
6 F7 G7 u* P3 C2 j3 ]1 b09开发首页-下
. g2 d t4 e. e) E9 F+ d# j/ ~- K/ C 开发自定义组件(7分钟)5 k$ u8 X' D% m9 \3 V
父组件向自定义组件传入值(6分钟)
$ ~6 r2 W5 v- g5 k8 Z3 w) i 完成评分自定义组件(22分钟); D/ w M# j n: a$ P0 k7 l
视频组件video讲解(9分钟)1 M. e+ ~1 h i
获取预告片数据(3分钟)
' p1 G6 ]5 R- `3 q& C6 O0 A( d; z; G- Y 动态渲染预告片(10分钟)
9 Q1 M( d. X }4 a. h/ {6 u9 l 猜你喜欢 - flex布局嵌套编写(18分钟)
5 b( h, j, F, f0 p- Z 猜你喜欢 - 编写点赞css(7分钟)5 w" u- y' E" l$ L) R
猜你喜欢 - 实现点赞动画效果(14分钟)
% ?: Q: d* R* `% y9 [2 @$ G% }8 [% C8 W 猜你喜欢 - 还原动画(5分钟)% ]) q3 W8 X+ M0 ~* f1 c$ c) d& \
10开发首页-终9 m6 c2 ?/ Y/ L# |0 P
猜你喜欢 - 动态渲染列表(6分钟)
8 i; y1 X7 Q' v 猜你喜欢 - 实现动画数组(7分钟)4 w( S! o+ g3 }% Z) U9 Z8 G
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
# `5 y, u1 i* t; T1 L 猜你喜欢 - 开启下拉刷新(5分钟)! B$ W+ R% F' v) ]' M! [' }1 v: y( c5 x- \
猜你喜欢 - loading交互api(8分钟)/ M6 ~' a6 ]5 X4 s( ?3 H
11构建搜索页-上, w* x2 w1 _! D6 o1 s& U
搜索页面 - 编写搜索栏(19分钟)
$ T% q! X; s6 R1 c a/ C( L4 ~ 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
2 K O& k( m e1 _ 搜索页面 - 动态获取最新预告并且渲染(9分钟)9 D0 P# x& Z5 n. I1 t
搜索页面 - 分页接口api讲解(4分钟), P1 I& u. e6 Y( j9 m9 o
搜索页面 - 搜索前置准备(6分钟)
* \9 |3 s! l4 s$ q7 u 搜索页面 - 执行搜索动态渲染(8分钟)& P2 _9 @- X9 g- }" a9 i9 S" ~3 }
搜索页面 - 监听下拉实现分页功能(8分钟)
- n! i1 I9 C( {( Q# ?/ U( G$ y 页面路由api与传参(13分钟)7 x% A- ?% m1 d* f, [$ k% X
页面跳转组件的使用(7分钟)
% X# {0 v: w1 Q8 U& P! c1 E6 R 详情页 - 查询详情与视频渲染(8分钟)9 k2 ]+ K8 X: f Z7 K, B8 i5 L) {
12构建搜索页-下+ r3 k" V O1 s
构建预告片基本信息(16分钟)8 Y3 Y$ U0 D( V- n, V( E: N
构建评分快与阴影效果(15分钟)
# @! G: H: ]8 G1 l0 {# d 解决错误数据绑定undefined(5分钟)) u- X, f5 ?/ o; m3 i
编写分割线以及剧情介绍(8分钟)
4 ?$ g, X3 N% E. n/ l# J7 ~( d1 _8 z 构建剧照与演职人员数据列表(10分钟)
0 D6 l4 l8 d. c7 e! ~+ ?9 r" Z% @' i 渲染剧照列表(8分钟)
) O1 n0 l2 n' V" z! \ 双拼数组构建演职人员列表(12分钟)
7 k! j/ ]) a/ l% n9 a$ j* S 渐进式导航栏设置(6分钟)
: \, |! U3 } C7 z3 A# {, G0 h 通过预览api实现剧照预览(7分钟)
/ F, |7 z! ?* D9 u# C) G3 J 演职人员数组拼接预览(8分钟)$ V5 F5 k( W; P
13电影详情页构建' R% r. S3 G4 C+ P$ w
自定义预览封面图(13分钟)
, j* ~" B8 i2 t" p! O actionSheet接口api使用(6分钟)) f3 K0 \' O- j* _- K3 n6 `' T
下载以及保存图片(15分钟)
* b0 J# ^: h/ w; n* x9 u 配置https下载合法域名(5分钟)
! j d, O2 _. n3 c* _% X 实现小程序中的分享转发功能(9分钟)$ _( ?) k- k. c# {
自定义导航栏按钮(11分钟)
( X: i S3 N2 q, v 分享到朋友圈(9分钟). ? I+ S4 [ d3 x* O! K9 W: d
微信开放平台简单介绍(6分钟)
5 ^, b. u3 p' m+ L# m 操作视频对象，提高用户体验(8分钟)
+ f8 T5 y0 X- E$ B# n/ S* S7 R 优化首页视频体验(13分钟)
- v8 V' w4 J% m& L6 }9 e6 V) D14我的页面（上）% g9 ^! O& B) Z! F. v0 ]$ e) I
开发个人页面-header与导航栏设置(9分钟)
) {0 N6 |: r0 ]0 G1 p 发个人页面-用户未登录和已登录的页面展示(9分钟)" P1 S! U6 V% Y7 f5 C
构建注册登录页面(8分钟)5 u1 |6 W! @) J) K
button与form组件讲解(6分钟)
4 u% F1 k* b+ J i' ~ 实现一键注册登录(12分钟)* _8 C5 K2 ?) M1 M8 K7 a/ v5 E
通过缓存切换是否登录状态(9分钟)
. V* K6 i' |. @# b$ Y# m- u 构建用户账号页面(9分钟)
9 p) g7 [) k! k6 ]$ W9 M 清理所有缓存api(4分钟) f- k9 v# K/ T7 G+ t
用户登录错误提示与方法挂载(7分钟)0 E6 R; |' s+ o
渲染用户信息数据(6分钟)
$ F# Z3 q3 i6 X- s15我的页面（中）9 ?' ~' V8 ?2 O; F; a ~
用户退出登录(6分钟)
/ h6 l( @ G" K+ e 第三方登录讲解与页面构建(16分钟)9 w' t6 q3 ^. f+ r8 C6 X
第三方登录-小程序端实现微信登录(15分钟)
+ p8 J2 W& i( y 第三方登录-后端登录业务梳理（辅助理解）(10分钟)
5 b& A( Q- B% K1 K8 P3 d 第三方登录-app端授权登录(8分钟)
$ v% m! t! o) E% Q. \ 第三方登录-app端获取用户唯一id及信息(12分钟)
" D' l0 f! o9 o, E } 第三方登录-app端执行一键注册登录(7分钟)
2 v5 ]3 {8 E1 x P% { 查看预览用户头像(7分钟)' i1 R w- m$ G/ E# c
选择用户头像(11分钟)
- |( N" Y* N3 p* `- s* c6 y 重新选择头像(3分钟)
0 ^3 w! f6 Y V16我的页面（下）
# `) c* C$ p1 y6 q! [8 l3 A 文件上传api与后端接口讲解(5分钟)! c2 c: l( U9 q
token令牌讲解、实现头像上传(23分钟)
: Y1 [* W; F7 R+ I1 V x 引入图片剪裁实现头像上传(7分钟)3 _2 v# n9 D! d. f0 w6 D
用户修改昵称(18分钟)
3 l; q& ^; m+ h% |" Z; G/ t 用户修改生日(17分钟)8 F# a+ U1 w! Y* P9 I' G
用户修改性别(15分钟)
' N8 {. r; c8 ~1 M I( V( z- D% l17项目发布与上线2 U$ Q! v2 q- Q! M5 m6 S
打包H5 web应用(5分钟)
- f. V; h0 T L0 o 购买云服务与简介(6分钟)- }+ ?- Y) t/ ?$ `8 M
配置安全组，重置密码，上传nginx，配置ssh(14分钟)
/ K/ F5 D! q5 i% W7 P U* A 安装nginx(9分钟)
N7 f+ }; {, K1 N 成功发布H5端web应用(14分钟)
) y0 [- h: r! K( E/ O0 r4 L9 j- D 微信小程序上传审核流程讲解(8分钟)/ ^$ }0 c( s- s. ?0 T4 d
打包安卓apk(8分钟)! e( G% `) N. N4 B
简述ios打包(8分钟)
' C) J7 ]0 T$ g/ J" I! N18课程总结7 I+ d! E Y6 r! S( _
课程总结与展望(9分钟)$ N+ l7 `* I4 ^& a! }
+ R" X1 Y1 Z2 F/ l! ?
* ]( U6 E0 O1 B. S+ e# `
1 L6 S" _% V; [1 R4 w2 W- X |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
