|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
3 C& Q% i& b" l& x9 y课程目录：. {# X$ O u5 x' ~3 f: ?
01导学- I( E+ Z/ j( K5 u% X
导学(12分钟) . \. k- d- g/ g/ j0 f+ F3 w
学前必看！补充课：接口调用参数补充(6分钟)3 v7 w2 i6 m3 p% w/ K8 K
基础框架NextHelloWorld(rar，513.7KB)
% Y& W- Q# v6 D. J( }4 _8 {9 e% { 超英预告最新源码(rar，8.7MB). F$ @4 V: U+ @; s
linux工具与ngxin安装(rar，37.3MB)
3 R- F, P8 Z% d" F6 u logo素材制作(rar，730.3KB)0 J: }0 d, f3 X1 e4 R
02课程介绍& p+ @2 ~% r: o2 u5 g
什么是 uni-app(4分钟). f. |9 V5 B# Q, t9 x5 @
为什么要使用 uni-app(8分钟)1 ~8 h4 t5 M1 H
app多端发布效果展示(7分钟)& o# a! C5 c& {4 X
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)" N4 K% ~1 @+ p& |* |5 }1 H# z
微信、支付宝小程序开发工具调试(7分钟)
- U, y# l$ Q6 G8 g 在Mac上使用Simulator进行调试(5分钟)
# e# K- K& I% r6 G03框架基础-上. a* d# ? b5 Z( q
简述MVC模式(9分钟) ~0 ]) I. `) l: c/ }9 h) i6 _
图说MVVM模式(5分钟)* s' w+ i/ Q8 E- h5 f9 c
通过代码阐述MVVM与双向绑定(12分钟)
" Y7 J; }6 b6 Y$ v F JSON对象和数组的渲染(4分钟)
4 B& [7 F- A4 x) Y- Y p3 H 页面路由以及标题配置(11分钟)
4 i# F% Y2 b- F- |! q 宏观讲解项目配置文件(16分钟)
: G5 |; t# a7 f* w" ` 应用的生命周期(11分钟)5 ^8 s7 u7 ?! Y. Q& Y
页面的生命周期(14分钟)) i7 q( P2 @: j- B- R7 p$ _
固定像素px与响应式像素upx(12分钟)- [" D; F- j: R7 }
在页面里使用{{}}表达式(7分钟). n5 T e) ~, i: K8 d7 \$ x
04框架基础-下
( \" H0 c1 j5 \$ \% H. j/ a$ L v-bind指令对属性的数据绑定(7分钟)/ V6 \9 t o3 m# z/ i ?/ ]8 F. }
事件基础(22分钟)# W5 i0 ]( ~# u& x h' e" v& t+ N
条件渲染 v-if与v-show(7分钟)7 B" t* B+ b, V" ~. }- t4 ^
条件渲染 三元运算(4分钟)& K, d1 C4 t. J0 y# i; }
列表渲染v-for的使用(13分钟)& a' z$ C. }- T7 N4 P9 a
指令key实现for循环的组件唯一性(12分钟)
/ F% n2 `% u% l o" L6 j 嵌套循环的下标定义(4分钟)+ r3 I8 d- m' M/ W. d
条件编译 - 上(10分钟)4 d O+ v1 J( h6 {! l! {
条件编译 - 下(7分钟)8 G- c$ i% E. D, J9 y- a
05样式与flex布局-上' T" b( H: a7 T$ f# r+ P7 r: w
flex布局介绍与模型(8分钟)5 k$ F$ f5 ?0 z4 f/ |- h' M
flex-direction 元素的排列4种方向(10分钟)# G7 d. b0 P7 v& u( F5 Q( q; w9 q" ~8 N
导入外部css样式(4分钟)
3 J% ?( w% U, M! l; E3 L8 s) { flex-wrap 元素的换行(12分钟)+ y. Y5 N. z% |7 ^3 B
justify-content 元素在主轴的对齐方式(14分钟)& Z) S* f' d7 d( s, }0 ]
align-items 元素在交叉轴的对齐方式(12分钟)
6 P0 e9 y8 Q0 {' a& H06样式与flex布局-下
9 G* A# |: r/ v0 Z% @ align-content 多轴线的对齐方式(13分钟)
( H/ U6 _ r2 u5 s- v flex成员项的属性 - order(4分钟)
8 s9 p0 ]+ v; h$ E- |% K flex成员项的属性 - flex-grow(4分钟)
: O5 p+ }0 x, D flex成员项的属性 - flex-shrink(6分钟)
; A) X# {9 K5 ? flex成员项的属性 - flex-basis(4分钟)
- V: Y+ w! {5 q3 F' ]+ i; x flex成员项的属性 - align-self(6分钟)
; A- Z. z/ A3 E( I07开发首页-上, Y. j) ^8 P- v
创建项目，构建基础页面(8分钟) 免费试学
* }- F! P$ ~+ w0 G# ^8 D" }) ` 构建tabbar(13分钟) 免费试学
* _$ v. Y G' g: \ 设置全局page，简述view组件(6分钟) 免费试学 j/ h7 U& D f9 ^: r2 s$ Z6 x' ?
使用轮播图组件(11分钟) 免费试学0 c, r. ^4 m# U3 }: d3 N
禁用原生导航栏达到页面全屏化(6分钟) 免费试学
7 y E3 g: E) R 在线文档的使用(8分钟) 免费试学8 W' W( b: a7 M# @. S
request网络请求api讲解(5分钟)
! k) w) D* l9 z uni.request动态获得轮播图数据(9分钟), c1 H2 V7 P( ^+ t( `7 a+ |
箭头函数 this 作用域(4分钟)
& Y& t8 R2 b% P3 h( w- Z 渲染并且展示轮播图(5分钟)8 l, d. W- D3 h% q" K1 a( w
08开发首页-中
4 j' P, L& c- A0 e% E 引入组件实现全局变量(7分钟)0 J7 ]( V" S% [6 Y) j K
使用挂载实现全局变量(4分钟)
1 H2 F% k4 C6 b/ V 在手机端进行微信小程序真机预览(6分钟)
$ i! X: l1 T2 K. Y 微信小程序https使用事项(7分钟)
. m: Y2 I4 y/ G4 u$ b8 @' X 开发热门超英 - 标题(9分钟)
8 q8 y* M1 S8 B) ^, ~/ }# l+ m' M 开发热门超英 - 简述scroll-view(4分钟)
( i7 O& v" U, b 开发热门超英-使用scroll-view实现横向滚动(3分钟)
! i ?' E* U) z0 q7 v1 B. S 开发热门超英 - 海报与标题(8分钟). A& R; w* f C( G
开发热门超英 - 评分(6分钟)
" F& @3 o8 o& O; U5 p 开发热门超英 - 动态渲染数据(8分钟); e; O: k5 e3 H$ l* R
09开发首页-下' d- Y2 v+ h' }1 K; L
开发自定义组件(7分钟). w" q: r+ L% b' C
父组件向自定义组件传入值(6分钟)
" H3 U6 n8 K( S, \& w3 H( x 完成评分自定义组件(22分钟)2 _- x( W8 {- @: f: C, [: q. _
视频组件video讲解(9分钟)1 L$ P) B. F& M& V
获取预告片数据(3分钟)2 O* f( E- q) Y( t# [4 k' a' h
动态渲染预告片(10分钟)
/ J' |) I- k5 [5 B) S3 N% w 猜你喜欢 - flex布局嵌套编写(18分钟)
" w8 T0 L5 g7 ~+ B% Z4 n+ x( O0 R 猜你喜欢 - 编写点赞css(7分钟)
0 w( z; e s* u" `( X 猜你喜欢 - 实现点赞动画效果(14分钟)2 G) N9 q% O6 Q" @" W/ U: Q3 O+ H
猜你喜欢 - 还原动画(5分钟), B8 k: K$ h; q' V6 n
10开发首页-终
7 x+ h& T7 V2 R% E 猜你喜欢 - 动态渲染列表(6分钟)8 k& E0 r( b C! @, G$ E
猜你喜欢 - 实现动画数组(7分钟)
, k4 d7 F/ f8 O# q8 Q1 V' ~ 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
: e0 Q1 X$ W N( T0 i& g& n 猜你喜欢 - 开启下拉刷新(5分钟)
f6 Q+ p6 @. r! } ?+ d1 r2 c 猜你喜欢 - loading交互api(8分钟)& h0 u9 d8 V& f2 T, F/ I* |
11构建搜索页-上9 {# K* _- M* |+ s1 K
搜索页面 - 编写搜索栏(19分钟)8 ]+ l" G4 S4 n, e2 ^ _+ w
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟) F# A' d3 P+ F9 C5 g2 ` d9 }$ w4 [
搜索页面 - 动态获取最新预告并且渲染(9分钟)8 Y) b7 J7 [/ A/ q2 v+ I; Q
搜索页面 - 分页接口api讲解(4分钟)
8 N8 Q; C- p/ J2 Z& Y) F 搜索页面 - 搜索前置准备(6分钟)
+ F4 X% x, x( D9 s- g) h e6 | 搜索页面 - 执行搜索动态渲染(8分钟)8 R3 r5 y) b8 s8 B* t' P' S
搜索页面 - 监听下拉实现分页功能(8分钟)
" ^. ^0 Q! e- t" z 页面路由api与传参(13分钟)4 @7 ~( \# I# n% Z6 N& E+ m
页面跳转组件的使用(7分钟)& J% i, F" e7 W! \: J3 L |7 Y
详情页 - 查询详情与视频渲染(8分钟)
& l: |0 P, q' \- ^" y; p- [12构建搜索页-下
( E2 r4 g. e1 l 构建预告片基本信息(16分钟)9 Q$ G3 j% @2 A8 F, G$ ?
构建评分快与阴影效果(15分钟)
$ Z" K/ S) A% c \% b& m% e 解决错误数据绑定undefined(5分钟)4 p0 z: ~4 l$ X# N0 _
编写分割线以及剧情介绍(8分钟)4 @. p( A" U p4 f) O! h8 _1 B
构建剧照与演职人员数据列表(10分钟)
1 K1 m: p% ^% n8 T 渲染剧照列表(8分钟)
( ~' P3 C/ O0 P: ], q 双拼数组构建演职人员列表(12分钟)
5 N2 b# D& g6 {; c4 t" { 渐进式导航栏设置(6分钟)" y9 q- ?$ z" z% ^
通过预览api实现剧照预览(7分钟)
+ Z: N' I8 c2 A5 W5 C5 K! ` 演职人员数组拼接预览(8分钟)& l+ C0 ?7 N$ j; g
13电影详情页构建
+ K# @; ?( S+ Z/ y, P% [ 自定义预览封面图(13分钟)
& d p8 k! T2 Y0 ^6 J; W$ r actionSheet接口api使用(6分钟)% s- X G/ b% ^# L) |4 _- B
下载以及保存图片(15分钟); n$ L9 s) ]# c1 [3 j- Y# N
配置https下载合法域名(5分钟)
1 F, j) G5 H" X( i% r0 D5 E8 e 实现小程序中的分享转发功能(9分钟)
/ L ]- @6 M, t& H* |8 t2 F: {; F 自定义导航栏按钮(11分钟)- h- p5 w) D* t! E' `
分享到朋友圈(9分钟)5 M- W, V2 E& n( w- T3 g/ ~# D
微信开放平台简单介绍(6分钟)# r5 P& _ X9 l4 Y4 Q& x! n
操作视频对象，提高用户体验(8分钟)' V% V2 q* X/ }' P6 Y: [! @ ~- n) }! ^
优化首页视频体验(13分钟)% H) ^# _+ V! p) n) I0 g$ y
14我的页面（上）% j; e$ X ?: l. @' U/ q
开发个人页面-header与导航栏设置(9分钟)4 O' I* V) Z8 c& z# S' J/ Y
发个人页面-用户未登录和已登录的页面展示(9分钟). `6 R# Y- T, j( ^/ x6 U/ r
构建注册登录页面(8分钟)$ V# I: s r0 U% J& J1 t2 P
button与form组件讲解(6分钟), D ~3 g4 X7 ^( p t% g+ Q$ z8 E( R, \7 T
实现一键注册登录(12分钟)
( a) ]9 i( A6 N# [ 通过缓存切换是否登录状态(9分钟)
7 C5 B B; T# q7 t 构建用户账号页面(9分钟)
U2 B# U2 S& w. `( \ X; v 清理所有缓存api(4分钟)! G- [* @* E s5 ^
用户登录错误提示与方法挂载(7分钟)
3 T7 K3 q+ o$ G2 C+ U) e P% Z 渲染用户信息数据(6分钟)$ A8 P2 S, q3 z/ ?' {* n# B) [( l
15我的页面（中）
( n) j4 h3 N1 _, D 用户退出登录(6分钟)/ |6 F9 o# d: p* v$ S. T
第三方登录讲解与页面构建(16分钟)
0 ]/ F) R# o$ V7 B 第三方登录-小程序端实现微信登录(15分钟)3 s$ L! \: e- d3 c4 b( H/ U |
第三方登录-后端登录业务梳理（辅助理解）(10分钟)% r2 K# T _# w l' C$ K& r" g. e
第三方登录-app端授权登录(8分钟)
/ D3 ~8 W4 C: C( C- }( y 第三方登录-app端获取用户唯一id及信息(12分钟)
. U' d$ M) Q% }. w. ` 第三方登录-app端执行一键注册登录(7分钟)
$ @% C/ w2 g) t9 l! L1 G. d* i- B; ~ 查看预览用户头像(7分钟)
" ]7 j2 j* o$ L" g 选择用户头像(11分钟)0 E: V& H/ O. P/ H, a
重新选择头像(3分钟)8 ]7 q7 \/ e% K* {
16我的页面（下）
* _" W& d, P( ? 文件上传api与后端接口讲解(5分钟)
$ x2 L0 f0 K% F- E4 ^" K/ j! m: @7 o token令牌讲解、实现头像上传(23分钟)7 U4 @0 `; r& q
引入图片剪裁实现头像上传(7分钟)( T7 @! x$ v) Z' B
用户修改昵称(18分钟)" P& [3 G& f) \( N% z
用户修改生日(17分钟)
0 |+ R. E) B" | 用户修改性别(15分钟)2 Q5 H Z6 W8 E8 N Y- G6 E" a
17项目发布与上线9 ]* k( O% G$ n+ s$ x
打包H5 web应用(5分钟)5 u$ J% P$ G, l, W' z
购买云服务与简介(6分钟)1 u( T# P7 ?" F+ h
配置安全组，重置密码，上传nginx，配置ssh(14分钟)' X, } j* p1 `: p
安装nginx(9分钟)- |* R5 M! J0 ]0 E' f2 ?. ]" M
成功发布H5端web应用(14分钟)
0 h: h" ~0 ? e6 ] 微信小程序上传审核流程讲解(8分钟)
4 v- c, j; o+ ]4 ~8 z; N# R2 u 打包安卓apk(8分钟)
4 ?" H7 D5 ]2 r+ s2 P 简述ios打包(8分钟)& ~! m. a- r3 G& x! h2 }8 H
18课程总结
+ C& X/ t: y6 o) h& [ 课程总结与展望(9分钟), P: z& } Z. }% V' V9 R
$ v0 e/ E" L& ?1 C* y ' K& c& U" V$ }0 O& o
! q1 |+ V, }2 F+ F" J- @
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
