|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
; E9 I7 u5 B- P- y T6 ?" q1 K课程目录：
* j- R9 \8 _9 H0 k' F' ]( {2 U01导学
}$ F" Q) w2 Q. b" [. Z 导学(12分钟)
* e' s1 s4 q1 V% E 学前必看！补充课：接口调用参数补充(6分钟)7 ]' o. `1 y: x( y0 A. S: ?
基础框架NextHelloWorld(rar，513.7KB)
( D% I: \) H; N 超英预告最新源码(rar，8.7MB)
3 N. z; {. d- O' P U linux工具与ngxin安装(rar，37.3MB)4 e( V' G. O! i# {& K" `- ?
logo素材制作(rar，730.3KB)- m) F8 G( |) I4 H( p4 E7 m
02课程介绍
( }) \ b# F" \! q1 {4 g 什么是 uni-app(4分钟)
2 q# ^6 e; U3 B& K) m6 o# e! N 为什么要使用 uni-app(8分钟)
2 _& m! \$ C7 Z/ y* e app多端发布效果展示(7分钟)
* f% V- h, {9 k 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
% w/ D( J( @0 g. B 微信、支付宝小程序开发工具调试(7分钟)
* ?3 d7 ^& {8 {- \) |1 m 在Mac上使用Simulator进行调试(5分钟)+ D( ]% L* Q. U; r
03框架基础-上
: N5 h" M# j9 o2 l. {4 Z 简述MVC模式(9分钟)
. ?- u: }4 b L& h1 H 图说MVVM模式(5分钟)% C' |# B M3 o/ ]7 Q
通过代码阐述MVVM与双向绑定(12分钟)
$ o8 Z! k( H2 L$ z4 e- c JSON对象和数组的渲染(4分钟)
2 T& [: d! x P$ u/ v# C( X9 I" M 页面路由以及标题配置(11分钟)" z7 I) L2 F3 E8 {" f. f
宏观讲解项目配置文件(16分钟)
2 `/ K& W" F& F. M- G" s: \ 应用的生命周期(11分钟)
5 z& F# u9 ]' d! k 页面的生命周期(14分钟)% X5 ~" c+ a% |! l9 D! w
固定像素px与响应式像素upx(12分钟)' p/ d* t% R5 F/ h
在页面里使用{{}}表达式(7分钟)
. l1 D3 s! _) ~4 J04框架基础-下$ x0 f% s/ @9 P0 }5 D. |- X
v-bind指令对属性的数据绑定(7分钟)8 r* Z% {6 l. ?* G. d Q1 v
事件基础(22分钟)
: q+ e5 |& l2 m. u+ { l 条件渲染 v-if与v-show(7分钟)5 A' w* w* C# t6 _: B
条件渲染 三元运算(4分钟)# y& v: U+ E% D) H( j
列表渲染v-for的使用(13分钟); ^% e6 v7 a1 R
指令key实现for循环的组件唯一性(12分钟) t4 [+ j4 c: F4 X1 P
嵌套循环的下标定义(4分钟)- Y: E7 J. K) @: U3 B8 U5 @, l
条件编译 - 上(10分钟)& A( y& m5 n. Z- z& [
条件编译 - 下(7分钟)
m# \( ]9 `, }" |05样式与flex布局-上
8 _2 S( o/ p, u, s% `( L# j; p flex布局介绍与模型(8分钟)
( p0 z+ m* f: x8 s5 C+ X flex-direction 元素的排列4种方向(10分钟). W) h0 b8 [% J* E( s+ ]2 b1 B
导入外部css样式(4分钟)
' r3 @2 ]3 f/ D, R' L4 E flex-wrap 元素的换行(12分钟)
2 Y5 B6 x7 T/ @; c* s% l3 b justify-content 元素在主轴的对齐方式(14分钟)' I4 Q: n! f- q7 Z1 M
align-items 元素在交叉轴的对齐方式(12分钟)" p3 z; {+ Z% t# j, o" n8 T: l
06样式与flex布局-下# E4 q$ @6 h/ i- E1 H+ a
align-content 多轴线的对齐方式(13分钟)) ]+ I' A8 _! k g
flex成员项的属性 - order(4分钟)
! W6 R7 F4 D2 A$ h+ R. _: W" \! M flex成员项的属性 - flex-grow(4分钟)
! g/ E9 g5 z4 }; H flex成员项的属性 - flex-shrink(6分钟)8 R# Y9 T+ I1 J3 F* q9 H- @
flex成员项的属性 - flex-basis(4分钟)# T# y! H: A' @6 y
flex成员项的属性 - align-self(6分钟) @: _$ y9 {' ]6 ?9 O0 Z% c6 Y
07开发首页-上
9 q5 ~, `4 K, y" }! {9 p7 [0 c 创建项目，构建基础页面(8分钟) 免费试学
3 M: F5 m) B0 e$ F& ] 构建tabbar(13分钟) 免费试学" V0 G! Z. {* ? B$ K, V5 u: M
设置全局page，简述view组件(6分钟) 免费试学
' a! K* X/ B9 G, [4 r 使用轮播图组件(11分钟) 免费试学& J2 N6 E; z$ i
禁用原生导航栏达到页面全屏化(6分钟) 免费试学# t) Y+ z3 A$ f- C6 g7 h9 d0 z# m
在线文档的使用(8分钟) 免费试学8 p3 Y" \8 W" A( M% J+ f
request网络请求api讲解(5分钟)
2 ]# {, r }; [( }3 | uni.request动态获得轮播图数据(9分钟)
; M% D9 l) I$ E 箭头函数 this 作用域(4分钟) P9 Y3 S' J) F$ Y, ]
渲染并且展示轮播图(5分钟)
! m3 K, A) h4 J/ W6 Q* ]08开发首页-中6 A8 z) Q8 l# u, X% i
引入组件实现全局变量(7分钟)* G$ Y4 M1 l8 a- Y; E/ H) K
使用挂载实现全局变量(4分钟), b% q. F8 B. ]6 Y/ A8 {! Q5 k
在手机端进行微信小程序真机预览(6分钟), B/ K2 m" q; D7 c. N$ u5 z: n+ k
微信小程序https使用事项(7分钟)0 N. T, D, Z/ H, G" E- ~. T7 v
开发热门超英 - 标题(9分钟)
( W Z( W3 i( z3 ^ 开发热门超英 - 简述scroll-view(4分钟)
; E% K. L* c# L d$ K5 s, E- c 开发热门超英-使用scroll-view实现横向滚动(3分钟)2 }- Q; w7 J/ m# U
开发热门超英 - 海报与标题(8分钟). h& c, r& y. n5 m
开发热门超英 - 评分(6分钟)& q$ X6 r' B' W4 Z
开发热门超英 - 动态渲染数据(8分钟)
' z% T5 `" s, x09开发首页-下$ [* Z# k" ?! o% C
开发自定义组件(7分钟)
9 @6 U" a/ J* f9 Y: W! ~( c2 i, r 父组件向自定义组件传入值(6分钟)$ y+ y9 X8 P1 t
完成评分自定义组件(22分钟)$ ?# z: s/ a n D m5 r5 B
视频组件video讲解(9分钟)* v" ~8 A6 @; Y5 K
获取预告片数据(3分钟)! {/ x1 d& X5 J, C: S3 | K7 F
动态渲染预告片(10分钟)
5 t$ p( F' Z5 M" A 猜你喜欢 - flex布局嵌套编写(18分钟)
" V! I; C! `1 E4 q 猜你喜欢 - 编写点赞css(7分钟)
( S! E; k# `! l6 c6 {6 p' ?; z 猜你喜欢 - 实现点赞动画效果(14分钟)
" P( F7 |- ?* O4 s5 b 猜你喜欢 - 还原动画(5分钟)
( G7 s4 u4 `0 d6 ^8 |- l10开发首页-终
; `8 Z9 }0 W5 |; w0 q' P8 u- @2 }# ^ 猜你喜欢 - 动态渲染列表(6分钟)
* O$ ~+ j; p x7 T 猜你喜欢 - 实现动画数组(7分钟)6 M- m( w* L' }( `3 T: M
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
' D5 m# u( J5 V/ ^% Y5 X7 a 猜你喜欢 - 开启下拉刷新(5分钟)
# X! w) @6 K+ E1 W+ z1 C5 x3 S% h3 R 猜你喜欢 - loading交互api(8分钟)
- u# c# A" L3 j11构建搜索页-上
5 m$ \: D9 q2 ~6 V 搜索页面 - 编写搜索栏(19分钟)
7 A) D- v+ {6 T 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)+ u. ]8 i) _% t p6 R9 _
搜索页面 - 动态获取最新预告并且渲染(9分钟)
+ g1 K6 w0 l1 h: q, C4 b/ E6 E 搜索页面 - 分页接口api讲解(4分钟)
6 _# E7 W- X- O 搜索页面 - 搜索前置准备(6分钟)
8 `' ~$ N6 \, H 搜索页面 - 执行搜索动态渲染(8分钟)0 w% C- ]) S/ g4 S+ ~& b6 Q/ o9 [
搜索页面 - 监听下拉实现分页功能(8分钟); O9 g6 j" B- P2 I( d) H
页面路由api与传参(13分钟)
* o8 m0 {) g- A" ^/ I 页面跳转组件的使用(7分钟)* T- k3 ~7 j: D) c4 D* }
详情页 - 查询详情与视频渲染(8分钟)( G& ?' F) X. w& }
12构建搜索页-下
( |( O% [0 q5 _" q 构建预告片基本信息(16分钟)
5 b' W: f1 \1 V Z 构建评分快与阴影效果(15分钟)1 ?; y$ w% W! |% E+ U0 n, L
解决错误数据绑定undefined(5分钟)
; `! u9 u4 r3 i; ` 编写分割线以及剧情介绍(8分钟)
5 _* @! @$ P& ?1 u7 b' q8 {* E& `9 S 构建剧照与演职人员数据列表(10分钟): |5 e! \; s) p% Z% f
渲染剧照列表(8分钟)
' c+ V `& w3 ^8 Z# ]$ q% S6 G 双拼数组构建演职人员列表(12分钟)
7 U' h; Z/ W% n: S' o4 j; r3 T 渐进式导航栏设置(6分钟)
1 o2 R" ~& V! _/ N 通过预览api实现剧照预览(7分钟)& R, E) W G9 H3 a
演职人员数组拼接预览(8分钟)! x. @$ m% [6 Q. Z
13电影详情页构建
6 }/ T7 j- D7 c) @! t. p ]0 Y 自定义预览封面图(13分钟)
- j& E- n- U% y& h v( U% P* B actionSheet接口api使用(6分钟)
; C5 f' t/ E4 O) f4 Q6 Y 下载以及保存图片(15分钟)/ d5 _7 D( y* |& J5 b2 E* V3 ^
配置https下载合法域名(5分钟)& r# I& ^' J( Z! r
实现小程序中的分享转发功能(9分钟)+ H4 _" I2 `. T6 L" ~
自定义导航栏按钮(11分钟); v7 [% V* f. J# b, o4 P
分享到朋友圈(9分钟)
+ D+ Q( f; n c, G$ ]2 }+ v9 v 微信开放平台简单介绍(6分钟)* G7 P! y# B9 ^5 ? _% [, x6 P
操作视频对象，提高用户体验(8分钟)
/ } E* L3 R4 K4 i0 X 优化首页视频体验(13分钟)
7 H9 _0 \) \) X f; ?14我的页面（上）
* X$ v3 M6 p' I6 h 开发个人页面-header与导航栏设置(9分钟)2 e( S3 A" t+ u {$ I
发个人页面-用户未登录和已登录的页面展示(9分钟)* z8 ?5 E' A$ ]
构建注册登录页面(8分钟)
7 p) U0 U, Y: G8 B/ O9 {2 v button与form组件讲解(6分钟); ~2 s$ e% O4 X4 `) X* }5 }: z
实现一键注册登录(12分钟)! U' F- ] _& n7 Q) c" f1 X
通过缓存切换是否登录状态(9分钟) y; A1 ~+ r( n) K0 a
构建用户账号页面(9分钟)
4 ?5 p% R) g+ P6 h. x 清理所有缓存api(4分钟)
! g$ H1 {3 R$ l; Y. i. J; P 用户登录错误提示与方法挂载(7分钟), ] O/ b+ F7 G- h& F5 V
渲染用户信息数据(6分钟)
6 _) Y# A; A' i2 s3 S15我的页面（中）: V: T' Y* }, @4 W$ u: q9 m
用户退出登录(6分钟)* K9 H J ^7 ^( L( I* ^: W! T
第三方登录讲解与页面构建(16分钟)) `$ N9 i3 G8 P
第三方登录-小程序端实现微信登录(15分钟)
0 f. ]$ k( \$ i: `1 f6 r 第三方登录-后端登录业务梳理（辅助理解）(10分钟)
/ Y, m( ?/ J6 i 第三方登录-app端授权登录(8分钟)' E1 S* f: L6 u: c ^) e
第三方登录-app端获取用户唯一id及信息(12分钟)0 |$ R9 d! e$ _ w4 n$ x# o5 O
第三方登录-app端执行一键注册登录(7分钟)0 p$ f1 o& { U$ G% D
查看预览用户头像(7分钟)
8 i* o7 y6 d& N" O- G7 z 选择用户头像(11分钟)
7 }2 r! S$ O; X: s/ X 重新选择头像(3分钟)
; z; d; x% N) M6 n/ q5 b16我的页面（下）% _2 |( S/ V& `3 \* b
文件上传api与后端接口讲解(5分钟)
/ z! l5 b* d5 [6 Z8 o* d token令牌讲解、实现头像上传(23分钟)
: h4 t$ {; V6 J* S 引入图片剪裁实现头像上传(7分钟)
( R8 L. d) h- y5 ~! Y 用户修改昵称(18分钟)) U6 W% M& d' k0 h& i* {- v
用户修改生日(17分钟)) H1 j. p1 e5 E& L& K
用户修改性别(15分钟)
( d% G) k; \$ k& U6 s& g! w! z17项目发布与上线
- Y3 x. k. n( o+ J2 F# b$ m& c 打包H5 web应用(5分钟)
5 Q2 Q% w+ P9 J$ i 购买云服务与简介(6分钟)9 a$ A% ?3 r7 j. F: k
配置安全组，重置密码，上传nginx，配置ssh(14分钟)" D$ V6 x$ ]* m8 _
安装nginx(9分钟)+ ^" r# f5 C; _! H' X# n
成功发布H5端web应用(14分钟)& u5 h( v+ x" Y3 h- j6 M
微信小程序上传审核流程讲解(8分钟)+ a: @- B" M7 F' x
打包安卓apk(8分钟): K, X, F' [& }. i6 f8 R
简述ios打包(8分钟)
( y: Z% F. c# B! S7 c18课程总结
* V! U6 g3 k9 @# i! } 课程总结与展望(9分钟)) n0 w0 j' ^# L; z
4 W# |; d. U; S( \; O" Y
9 T+ k/ L5 m. E# h! f
% z! J; ?4 t8 N7 H1 i7 x. B/ H9 m |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
