|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。0 s/ @; k* u u6 y2 @4 G! k3 C! A
课程目录：4 a1 t( h. k1 x# _* l: y) J
01导学
" V/ N, |% |* I6 _, Z0 z 导学(12分钟)
/ \* a9 F( b" [# u 学前必看！补充课：接口调用参数补充(6分钟)
+ ?+ f; S" B. ^5 Q2 a9 h3 y 基础框架NextHelloWorld(rar，513.7KB)+ _$ Q! e! A7 M0 P1 K
超英预告最新源码(rar，8.7MB)3 f3 n* O J% E2 q
linux工具与ngxin安装(rar，37.3MB)% c" U& v+ f: u- g4 B8 p
logo素材制作(rar，730.3KB)1 n1 y$ {$ z! A' K9 z( ?7 B
02课程介绍
8 Y4 i- ^7 p- t R 什么是 uni-app(4分钟): T7 t+ N v9 }% M3 c, x
为什么要使用 uni-app(8分钟)/ c( Z3 x# ^* f- n/ i7 K
app多端发布效果展示(7分钟)! ~2 `. X. B+ A* N
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
# T2 u4 |1 N5 P9 h" e% \ 微信、支付宝小程序开发工具调试(7分钟)
( l# {8 o' J' |7 G: H 在Mac上使用Simulator进行调试(5分钟)3 X4 l# n# M& ?2 A2 x! Z: c- w
03框架基础-上
% q$ G! P% @9 Q( K1 p; ? 简述MVC模式(9分钟)1 z5 x7 @+ V& n
图说MVVM模式(5分钟). Y& o, c9 L6 [$ P
通过代码阐述MVVM与双向绑定(12分钟)) `, e9 ~: o# ~) `8 R' q9 |
JSON对象和数组的渲染(4分钟)2 g7 S" z4 X: [, |/ ]6 q' w
页面路由以及标题配置(11分钟)
. c* Z: ]1 V" H 宏观讲解项目配置文件(16分钟)0 r H. C: `: |% M. z2 M8 w) z
应用的生命周期(11分钟)( f# q3 {% Y9 z7 E. W8 f1 A* D
页面的生命周期(14分钟) p Y9 f2 z& ~0 \
固定像素px与响应式像素upx(12分钟)
2 U" X& `; E) p& S0 T8 S; b. } 在页面里使用{{}}表达式(7分钟)
( j3 B% I; S# ]* Y" L! l7 L04框架基础-下4 x5 \; z! A0 q: Z7 L8 n, A# t- n- h
v-bind指令对属性的数据绑定(7分钟), p# p+ @1 v7 \) l$ L0 [5 v2 d
事件基础(22分钟)
3 H% e1 n* Y9 |* q+ H0 V3 G. v4 G 条件渲染 v-if与v-show(7分钟)+ B7 U# ~8 h+ a% L2 Q# o7 _3 p
条件渲染 三元运算(4分钟) O& e B8 }. F7 `8 ]
列表渲染v-for的使用(13分钟)
8 c7 U: w( |$ k) N! o8 n7 R 指令key实现for循环的组件唯一性(12分钟)
2 p5 }: l h! |) t- m7 N1 }9 \ 嵌套循环的下标定义(4分钟)) N( d ]8 Q: Y4 Q1 ~7 x6 v
条件编译 - 上(10分钟)
6 X3 G/ e c3 h. M" F2 b/ L 条件编译 - 下(7分钟)' J7 T" `& v* n- U# E ~
05样式与flex布局-上
* J( W6 A1 e" C- k6 _& y3 ]1 b flex布局介绍与模型(8分钟)8 Y$ Q! `* E; }/ v% e0 w% g7 H
flex-direction 元素的排列4种方向(10分钟)
! e1 K- }* C% u. e 导入外部css样式(4分钟)0 o( s# b! Y" o1 u- {, F* v2 r
flex-wrap 元素的换行(12分钟)0 |( M) p6 ]7 z2 x* {% H( J+ Y/ @9 B
justify-content 元素在主轴的对齐方式(14分钟)2 E- N- b6 U( f: m
align-items 元素在交叉轴的对齐方式(12分钟)
7 b) F0 t' l8 x7 P3 i# P2 J06样式与flex布局-下
2 B/ h# v/ `7 u* N |) G0 `" _ align-content 多轴线的对齐方式(13分钟)0 a$ i" l. ^' H' K- k
flex成员项的属性 - order(4分钟)9 A) k5 m: G* D' ]8 @2 }8 y5 J# G
flex成员项的属性 - flex-grow(4分钟); \+ H' o. T) Q" ?
flex成员项的属性 - flex-shrink(6分钟)1 D) X6 f$ \" P# r% ?6 D) X3 c
flex成员项的属性 - flex-basis(4分钟)" g% k, ?6 ]: k U: w* `. g! ^
flex成员项的属性 - align-self(6分钟)3 f- y* z! ?0 |9 N# {! |) w* i7 O
07开发首页-上$ g4 [* u/ Z! h4 k& U( q
创建项目，构建基础页面(8分钟) 免费试学
3 G- N- P. N% n0 h" p8 k- f9 M 构建tabbar(13分钟) 免费试学
5 V4 c, ]# D1 r+ R9 ~- K' Q- } 设置全局page，简述view组件(6分钟) 免费试学8 N2 Q- X+ \* d
使用轮播图组件(11分钟) 免费试学
H# H5 Q/ V2 v9 k 禁用原生导航栏达到页面全屏化(6分钟) 免费试学 ^" W5 M7 B2 `8 l8 w
在线文档的使用(8分钟) 免费试学2 F( m3 ^, R7 h' V" K5 e; i
request网络请求api讲解(5分钟)2 W, G- I+ c! \5 I: j
uni.request动态获得轮播图数据(9分钟)
6 Y1 I0 A- L3 Q, t' N! c- | 箭头函数 this 作用域(4分钟)
. ]& ^0 y# T" V6 }4 j 渲染并且展示轮播图(5分钟)
6 f9 z3 x/ s8 x6 u- l08开发首页-中
% b& q# R, X$ I2 o: Q; Q 引入组件实现全局变量(7分钟), U2 x) m I9 l* n
使用挂载实现全局变量(4分钟)0 J& I2 M m6 Y7 }
在手机端进行微信小程序真机预览(6分钟)& h- b$ g9 Y( S8 a
微信小程序https使用事项(7分钟)& |9 K6 c0 j% ]) X# ?% `
开发热门超英 - 标题(9分钟). x' ]0 k7 l0 v d1 S# h* O8 h
开发热门超英 - 简述scroll-view(4分钟)# F4 I: K) A/ @$ f, |/ y
开发热门超英-使用scroll-view实现横向滚动(3分钟)
% E! @8 w6 a& S5 T* ]1 f; Q 开发热门超英 - 海报与标题(8分钟)
3 F- Y x4 P: `* h 开发热门超英 - 评分(6分钟)
/ o+ E( c- C6 z" x% P0 m6 h 开发热门超英 - 动态渲染数据(8分钟)& D1 Z7 a2 b. J- A1 a2 R! h& J' H
09开发首页-下9 `. o5 s3 U# p5 E
开发自定义组件(7分钟)! ^ j `' j& O$ `7 R3 }
父组件向自定义组件传入值(6分钟)
0 H. @8 a. q; `, {6 V 完成评分自定义组件(22分钟)
# }" n$ v9 g% j) W 视频组件video讲解(9分钟)
4 p9 o( A" ^ C# U- m 获取预告片数据(3分钟)% {, W" N- {: x* A% I
动态渲染预告片(10分钟) i3 K8 ^; T. V7 P* x. `& l
猜你喜欢 - flex布局嵌套编写(18分钟)
+ |" X8 V% r: y9 R' M0 A8 P 猜你喜欢 - 编写点赞css(7分钟)
7 w7 Y6 H2 T( D6 d7 w 猜你喜欢 - 实现点赞动画效果(14分钟)
7 R, s* m5 d- R+ w5 ~$ g 猜你喜欢 - 还原动画(5分钟)$ H* i% `. U2 J6 @' O
10开发首页-终
' B1 `% n* g: ~( c& y# L% g/ L; r 猜你喜欢 - 动态渲染列表(6分钟)
( @9 q2 D3 u0 q+ [: V% m( S5 I1 E/ z2 G 猜你喜欢 - 实现动画数组(7分钟)
( L2 d+ U y4 c' n 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)2 B( ^+ C. \1 V! ^6 |1 O
猜你喜欢 - 开启下拉刷新(5分钟)
5 U" V$ j5 K- ^& w( L5 W# S q 猜你喜欢 - loading交互api(8分钟)( d s6 U- h* x% l% q- ?
11构建搜索页-上
* n: m: g4 [9 t; r/ C# K; P- c 搜索页面 - 编写搜索栏(19分钟)6 a1 A$ j0 ?, J, Q7 v
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)- E% d% H E' _2 O$ H: u- {2 Y7 Z/ p
搜索页面 - 动态获取最新预告并且渲染(9分钟)
- n8 g! J) m0 ]+ G7 ?7 J 搜索页面 - 分页接口api讲解(4分钟)6 k& @) a/ \) V6 ^
搜索页面 - 搜索前置准备(6分钟)
. B0 N( m$ O7 m( k 搜索页面 - 执行搜索动态渲染(8分钟) n, c( p! v" V" i- v. e! d
搜索页面 - 监听下拉实现分页功能(8分钟)' r) ^; `$ b `8 n2 u
页面路由api与传参(13分钟)
# }9 Q: ~. g3 a& Y1 c7 Z 页面跳转组件的使用(7分钟)2 d, H( T# J3 ?7 ~4 e( `6 i# d' C
详情页 - 查询详情与视频渲染(8分钟)
! ^0 J1 n# \$ ?* C% _" P12构建搜索页-下: y7 c: W/ @6 |6 d& ?+ O$ x. x
构建预告片基本信息(16分钟)2 ?" t+ M6 k9 u- t% D
构建评分快与阴影效果(15分钟)" c0 t, M: R( z
解决错误数据绑定undefined(5分钟)1 f) z4 O, Z, C- o t% `
编写分割线以及剧情介绍(8分钟)
$ }- ^/ P. ?9 T+ D9 { 构建剧照与演职人员数据列表(10分钟)2 y0 W# N& Y9 }: y: x2 Y1 _6 P# Y/ E
渲染剧照列表(8分钟)* C1 E7 A& z& H
双拼数组构建演职人员列表(12分钟)
, x; p6 R( ^7 w1 a5 w1 T7 j" y 渐进式导航栏设置(6分钟)# k: N) P8 T1 K2 ^, W' t+ V
通过预览api实现剧照预览(7分钟)1 J: W" B! A ]/ i+ \9 @
演职人员数组拼接预览(8分钟)' g( n. U8 X/ e9 W9 ]
13电影详情页构建8 ]2 h/ Z" E* f2 p
自定义预览封面图(13分钟)* Z& r% T$ ~" q2 ]& K7 |
actionSheet接口api使用(6分钟)& n5 G, H& @" Y. C" A' u0 @; Y
下载以及保存图片(15分钟)
! H: Y9 h, H; _. ?" v, H 配置https下载合法域名(5分钟)
: A% v, A2 B: Z8 ~ 实现小程序中的分享转发功能(9分钟)
! ~! j; v: ]) _" c6 G 自定义导航栏按钮(11分钟) F9 H8 f, P. a( _& I; T6 E
分享到朋友圈(9分钟)
# W& ^6 q) T+ W% }. W+ ] 微信开放平台简单介绍(6分钟)
1 [' L& e3 l' e% l* X 操作视频对象，提高用户体验(8分钟)" I, N' }/ }, @% L* I4 l2 Q
优化首页视频体验(13分钟)
5 I& ?9 {: N5 d9 Y. u: ]14我的页面（上）
1 p( g2 i5 z7 [ 开发个人页面-header与导航栏设置(9分钟)
! D7 d9 X8 n/ Q2 A3 x( M& O 发个人页面-用户未登录和已登录的页面展示(9分钟)
# i2 P+ ]; s1 U! \+ f 构建注册登录页面(8分钟)
! D. F% j0 `/ \" M0 T! t button与form组件讲解(6分钟)+ [+ O. x2 R$ u0 ]
实现一键注册登录(12分钟)
$ q" @, x5 x9 Q% X& f w 通过缓存切换是否登录状态(9分钟)
5 T9 |% `0 b3 ]/ i5 ^& Y5 Y, _ 构建用户账号页面(9分钟)7 V* l3 L. n: \: i
清理所有缓存api(4分钟)% O2 m' E* d9 H
用户登录错误提示与方法挂载(7分钟)
$ m5 b* @, s- g1 J 渲染用户信息数据(6分钟)
. R& ~6 Z& L) {/ \. S. ~15我的页面（中）0 \$ S' X$ S2 q2 A1 k
用户退出登录(6分钟), O# n: k( R/ V/ T# G5 t
第三方登录讲解与页面构建(16分钟)
% C3 c4 T/ W/ s) p7 y- G6 u- ], T+ k 第三方登录-小程序端实现微信登录(15分钟)1 i/ V0 s' |2 b" t- Y
第三方登录-后端登录业务梳理（辅助理解）(10分钟)
7 e/ E. F; b' W8 W3 p6 g1 [! V 第三方登录-app端授权登录(8分钟)
, p8 j; F8 Y! ^ 第三方登录-app端获取用户唯一id及信息(12分钟)
# X) J4 o" ]# f6 d% { 第三方登录-app端执行一键注册登录(7分钟)
1 p: |9 s7 p. O3 S2 } 查看预览用户头像(7分钟)/ t8 y8 ?; }7 ?* H( Y6 V
选择用户头像(11分钟)+ w5 |6 ^0 |: B# A! Y" }% B2 _: s' Y" s
重新选择头像(3分钟)
! J$ f" K8 z* [3 s1 i16我的页面（下）0 ?) s. b Y5 B5 L: N
文件上传api与后端接口讲解(5分钟)
# |# ]* B4 {" a* M' i8 S$ [4 K9 v% @ token令牌讲解、实现头像上传(23分钟)
' C. J. d& y& ?" r 引入图片剪裁实现头像上传(7分钟)
* M: N6 f; ?, j. q& R" p# A0 h 用户修改昵称(18分钟)
/ j$ I$ Z* a; C- o 用户修改生日(17分钟)
+ u; _+ k7 r4 s& l 用户修改性别(15分钟)
8 f- D0 {& T q7 _3 k17项目发布与上线
# H9 k! s, q: y' c$ } 打包H5 web应用(5分钟)- v1 u3 T( a+ s, `6 h
购买云服务与简介(6分钟)
: }6 l, l3 c& ^, n 配置安全组，重置密码，上传nginx，配置ssh(14分钟)
% _/ h& ^6 d( e& I% g- o2 w 安装nginx(9分钟)
1 X3 ?& o4 P/ m, t9 H 成功发布H5端web应用(14分钟)
/ j( ], v; W$ c# ]' J5 i; o" t( w2 [ 微信小程序上传审核流程讲解(8分钟): X, y1 ]5 Y% J6 u6 A C
打包安卓apk(8分钟) L) e$ Z$ d" x p. z6 p
简述ios打包(8分钟)" t8 B4 s4 R$ P6 ?9 Q
18课程总结
4 B" g) G" i1 S( p5 V 课程总结与展望(9分钟)" V$ b) U4 }3 O5 k9 r4 J
5 H& g2 ~+ K+ S( r8 }0 F) H # k# Y" w" X1 w8 e! ~
+ t& O2 s: _4 V1 L6 M3 J: P |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
