|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
7 U/ \4 A! Z% x: W# J4 ]& I' l; s4 s, s( O课程目录：$ B6 k, Q; q0 g
01导学
. t) Z" c) Q4 ^7 A- D2 { 导学(12分钟)
% w9 _4 }$ Z _( s7 \; s 学前必看！补充课：接口调用参数补充(6分钟)5 X/ `0 p$ w* H( L
基础框架NextHelloWorld(rar，513.7KB)* h% C' ?4 j9 v6 v- `
超英预告最新源码(rar，8.7MB), V* o5 a% X- h. x
linux工具与ngxin安装(rar，37.3MB)
3 c5 w0 V2 z& ~1 x: z- R logo素材制作(rar，730.3KB)
* C5 a6 G( \) M1 v" L% f; A02课程介绍
/ v1 A4 c. }: k9 z0 { 什么是 uni-app(4分钟)
: _/ t# G) X+ I/ w2 L. D4 y- p( I 为什么要使用 uni-app(8分钟)
9 a+ N; A. P7 d$ K! P) ` app多端发布效果展示(7分钟)
% q6 [0 A* F2 v1 V' b1 y# s 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)8 r$ H6 {+ y2 S( @
微信、支付宝小程序开发工具调试(7分钟)- @ [+ i* e, T
在Mac上使用Simulator进行调试(5分钟)
" y) x5 e4 }+ ]# t03框架基础-上2 M* {: g4 w1 q1 V# K/ C
简述MVC模式(9分钟)
) e/ U( p, C6 p4 t 图说MVVM模式(5分钟)! H! }; J' P/ d4 u7 L1 M* T
通过代码阐述MVVM与双向绑定(12分钟)9 i1 m. G s5 \2 S; N1 f+ V/ x
JSON对象和数组的渲染(4分钟)3 l/ z6 {9 v/ h# w9 S5 P# W: A
页面路由以及标题配置(11分钟)
+ k6 E) e. z4 |' T 宏观讲解项目配置文件(16分钟)
! |1 \" ]7 i( K: L- y. n8 J% t 应用的生命周期(11分钟)3 l7 O. ^. k1 N5 ^' o
页面的生命周期(14分钟)
, S; ^$ R1 t( L7 k 固定像素px与响应式像素upx(12分钟)
9 _% g, \, G+ M( ]# Q 在页面里使用{{}}表达式(7分钟), u5 |' j( l* {3 J& G7 b
04框架基础-下' D5 \" Q: I% M4 v% G# D; m; M4 ^
v-bind指令对属性的数据绑定(7分钟)6 T- e6 h# w/ j/ T5 e
事件基础(22分钟)6 o! o; \0 R1 X6 v6 R
条件渲染 v-if与v-show(7分钟)
: G% s/ p6 M# G 条件渲染 三元运算(4分钟)- z! ~3 f7 H( m* c( f( R5 ^& f
列表渲染v-for的使用(13分钟)9 v) b. N' Q( c5 [/ I0 v+ h" n
指令key实现for循环的组件唯一性(12分钟)6 ~0 F0 A8 \6 G% P
嵌套循环的下标定义(4分钟)
. ~, X' K5 A+ \3 W5 b 条件编译 - 上(10分钟)) H; O9 v1 X8 `6 ^, o
条件编译 - 下(7分钟)' ?6 m# v8 T; F2 f; ?8 u5 @8 q+ C ]
05样式与flex布局-上
, g( ^" t5 W _% x flex布局介绍与模型(8分钟)' m( `& [/ e1 }- P
flex-direction 元素的排列4种方向(10分钟)
F, u- `/ O, Q! x9 y 导入外部css样式(4分钟)
2 d% G# j' c! }2 l flex-wrap 元素的换行(12分钟)4 B% e/ w5 l& v( P- [! p4 K/ F' \
justify-content 元素在主轴的对齐方式(14分钟)$ L5 ^3 g) h% h' h" s, o$ k
align-items 元素在交叉轴的对齐方式(12分钟)( E3 N7 ^5 ~6 x
06样式与flex布局-下, }7 w6 ?, Q% n' m
align-content 多轴线的对齐方式(13分钟)
5 x9 g6 I6 H- V2 ?) J- O flex成员项的属性 - order(4分钟)
6 j( d8 Y8 t u# X) ?7 Z! [ flex成员项的属性 - flex-grow(4分钟)
; [7 v4 ?5 x( K flex成员项的属性 - flex-shrink(6分钟)
& M. C# l# e* c flex成员项的属性 - flex-basis(4分钟)
$ Z' K. y$ L2 R0 [! l2 g: x flex成员项的属性 - align-self(6分钟)1 A7 v2 ]" R' X5 o6 I' M
07开发首页-上/ @& q! k; Q$ E5 s& T2 C: {
创建项目，构建基础页面(8分钟) 免费试学8 {& M( @6 X0 k4 C
构建tabbar(13分钟) 免费试学
9 D/ g. a" S- Q* a6 H 设置全局page，简述view组件(6分钟) 免费试学' G% s- O' u. v. M" T; \; U! m
使用轮播图组件(11分钟) 免费试学
* T* |# M$ x6 G1 w$ d9 j 禁用原生导航栏达到页面全屏化(6分钟) 免费试学' m7 T+ e/ |- Q+ T& K4 Z3 `
在线文档的使用(8分钟) 免费试学
, U" ?3 M V" m! A: J0 w3 K% b request网络请求api讲解(5分钟)7 z5 [* h- a! ]6 p
uni.request动态获得轮播图数据(9分钟)& `; I/ F* E6 U' x: E
箭头函数 this 作用域(4分钟)
5 t/ A4 e- ?! W' m 渲染并且展示轮播图(5分钟)- q% @& b f: H$ k
08开发首页-中
/ B; Y3 T! G$ S( g1 B: i$ v 引入组件实现全局变量(7分钟)0 b2 O, P( C9 H' O7 y; [
使用挂载实现全局变量(4分钟)8 R2 M( S4 ^; u+ N4 {
在手机端进行微信小程序真机预览(6分钟)
1 f' p. ^% d+ O# X2 W. | 微信小程序https使用事项(7分钟)
5 R2 a, A: K* H7 @8 ^' x s" { ~ 开发热门超英 - 标题(9分钟)
, b8 ^$ r; f1 \/ p$ z 开发热门超英 - 简述scroll-view(4分钟)% A& x7 l: n* E& p, ]7 u
开发热门超英-使用scroll-view实现横向滚动(3分钟)$ A L+ n0 S, r d
开发热门超英 - 海报与标题(8分钟)2 J8 p, p! o; l8 u
开发热门超英 - 评分(6分钟)% H! V9 @2 a, k8 V) A4 [
开发热门超英 - 动态渲染数据(8分钟) f9 _9 {3 n7 g
09开发首页-下
# Q4 b5 |. A9 p4 H+ [. Y/ ~1 b$ f' E 开发自定义组件(7分钟) ~, H. l/ o7 |( P1 a# ~
父组件向自定义组件传入值(6分钟)
0 w9 i. M1 Q7 j1 _9 ] 完成评分自定义组件(22分钟) F, V4 h1 C2 v' ]$ V/ }, j5 S
视频组件video讲解(9分钟)
2 d: D9 {2 [* i( s& d; \/ h 获取预告片数据(3分钟)# v3 s% V4 m% k0 X2 G
动态渲染预告片(10分钟)
8 Z9 e5 g, i% {: D 猜你喜欢 - flex布局嵌套编写(18分钟)
2 T) J. f$ v1 B) [/ Y5 z( s J 猜你喜欢 - 编写点赞css(7分钟)& U3 N8 H3 n% ?9 }4 {4 G
猜你喜欢 - 实现点赞动画效果(14分钟)- E( s2 ~2 ?4 n, N) H1 ?
猜你喜欢 - 还原动画(5分钟)% E# B* }5 p7 y7 F# Y' H; I
10开发首页-终. C0 H- {2 ]+ ?' T7 X* s
猜你喜欢 - 动态渲染列表(6分钟): T) M: g4 @6 J, U7 F9 I" {( B$ q
猜你喜欢 - 实现动画数组(7分钟)
( i' ^( I9 Y/ m2 v8 C 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
& ] z/ S5 P. Z 猜你喜欢 - 开启下拉刷新(5分钟)0 }( w! U* i8 p- h$ u$ f
猜你喜欢 - loading交互api(8分钟)6 w8 P& i1 X. n" s5 [
11构建搜索页-上
7 }9 |. P4 Z9 Q1 j 搜索页面 - 编写搜索栏(19分钟)" Q v/ W$ v c: B" R
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)9 _- }2 d1 Y$ e% Q( n, V7 W
搜索页面 - 动态获取最新预告并且渲染(9分钟)
" C7 u7 n: O2 t2 a 搜索页面 - 分页接口api讲解(4分钟)
2 z5 Z5 Y b+ N" Q5 H/ i 搜索页面 - 搜索前置准备(6分钟)
/ B( j. L1 I7 e$ H. @! c 搜索页面 - 执行搜索动态渲染(8分钟)
% u- |9 w! t9 y( m v 搜索页面 - 监听下拉实现分页功能(8分钟)
, Z: ?) y' H7 D, d+ H0 K% M 页面路由api与传参(13分钟)
0 H0 i/ t1 t4 P# a1 [) Z" s5 o 页面跳转组件的使用(7分钟)
, X6 ?& L5 i7 Y$ D6 d4 `' B 详情页 - 查询详情与视频渲染(8分钟)
1 o" D' }, b) q" _12构建搜索页-下7 X1 Y$ A3 L3 \0 I
构建预告片基本信息(16分钟)
5 [$ f$ r& X6 @4 M4 u, g4 p 构建评分快与阴影效果(15分钟)
8 V2 o4 o, {' t& U/ B 解决错误数据绑定undefined(5分钟): \) w) X% t' c" ~6 X: A" Z* x
编写分割线以及剧情介绍(8分钟)
3 `8 W7 O3 z1 N 构建剧照与演职人员数据列表(10分钟)
2 s! d; b" W! s! P4 a 渲染剧照列表(8分钟)! C& a8 y1 J1 [5 z# P# l, g
双拼数组构建演职人员列表(12分钟)0 o* c) c2 C& n D( k, c, j) O
渐进式导航栏设置(6分钟)
( z* q6 l2 z, C9 D" S3 w& P 通过预览api实现剧照预览(7分钟)
1 t a- B# ]( U; V( f 演职人员数组拼接预览(8分钟)
" C9 ?9 f4 g/ B7 D, a/ V13电影详情页构建, [: c) z1 e2 `8 E3 T$ b# V/ A: Q& N
自定义预览封面图(13分钟)2 l1 W& A- K0 s+ \( c- J
actionSheet接口api使用(6分钟), q# _- J6 c0 k. d& L5 a
下载以及保存图片(15分钟)
; D3 g( j& }+ l; [2 M1 Y 配置https下载合法域名(5分钟)
" ]! A! `( i3 p, F 实现小程序中的分享转发功能(9分钟)
6 }4 ]3 G4 q# ~ ^+ O 自定义导航栏按钮(11分钟)4 }' V2 f1 h% a; k8 A; c) m
分享到朋友圈(9分钟)' d6 k, G4 P$ V6 B8 F; _
微信开放平台简单介绍(6分钟)' `* h# k: _4 Q
操作视频对象，提高用户体验(8分钟)9 A6 y' o2 R- G5 @/ i. d7 O
优化首页视频体验(13分钟)
- N8 }. K) h h, M1 E14我的页面（上）
! d3 ]% ?* |: Z( P 开发个人页面-header与导航栏设置(9分钟)
' E& F/ G: b* ?& F% R" A+ N 发个人页面-用户未登录和已登录的页面展示(9分钟)2 \# b2 @8 U1 G: J8 {& r
构建注册登录页面(8分钟)5 @* e$ L& v! E* D
button与form组件讲解(6分钟)
" p- F S" A U& p" s7 ^7 k3 `, p 实现一键注册登录(12分钟); `3 v. k1 h3 H
通过缓存切换是否登录状态(9分钟)
- n8 m/ j- c. d# V) c 构建用户账号页面(9分钟)9 y% Q; z/ K) t4 P
清理所有缓存api(4分钟)
$ H! L/ Y4 a) [+ r& C 用户登录错误提示与方法挂载(7分钟)
; O8 S7 N0 p# F/ x6 } 渲染用户信息数据(6分钟)
1 O7 k a, K2 i( \! Z& y9 p* q' c5 M7 Y w15我的页面（中）( a( v3 f; Y( v8 j Q
用户退出登录(6分钟); o$ n2 J- k4 ]7 ]/ @% T, X
第三方登录讲解与页面构建(16分钟)
/ t& F6 D/ H0 v5 z1 \ 第三方登录-小程序端实现微信登录(15分钟)9 `% g+ X1 m% h- G0 Y+ x
第三方登录-后端登录业务梳理（辅助理解）(10分钟)
; G; S" y1 V2 Y( d 第三方登录-app端授权登录(8分钟)3 X; S5 d: T, U7 x6 \
第三方登录-app端获取用户唯一id及信息(12分钟)0 `* K+ \8 ~4 U8 }3 x% P& y
第三方登录-app端执行一键注册登录(7分钟)
4 C& @( o" N0 s 查看预览用户头像(7分钟)
& v% t4 u q/ ~0 i 选择用户头像(11分钟)7 U4 _- I( W- P5 N' @+ F1 Q
重新选择头像(3分钟)2 v) w. N) B9 Y7 p% k
16我的页面（下）
* s- c# ~0 a. M2 e7 Y+ P 文件上传api与后端接口讲解(5分钟)
; Z8 Z1 a* n" Z token令牌讲解、实现头像上传(23分钟)
" X4 p) V: M- U# }: }0 m 引入图片剪裁实现头像上传(7分钟)% \! P6 T8 p2 F* @0 z- Q8 N1 Q8 q
用户修改昵称(18分钟)
( U6 w! J6 C; t2 Y 用户修改生日(17分钟)
+ J' k$ A0 u5 @0 ] 用户修改性别(15分钟) u/ G4 Y. w& s8 D
17项目发布与上线
# B1 K9 w; e5 D1 i 打包H5 web应用(5分钟)) ^- X% I% v6 E# P3 A) h3 A
购买云服务与简介(6分钟)$ X( N; `( Z1 v$ j
配置安全组，重置密码，上传nginx，配置ssh(14分钟)' ~# c$ A/ C- T
安装nginx(9分钟); T8 r! p- \9 U8 K
成功发布H5端web应用(14分钟)# |( E* i" a: O" i. D9 p
微信小程序上传审核流程讲解(8分钟)
3 R; ?- p/ Y4 I' Y7 o) @) v: w 打包安卓apk(8分钟)
0 T. X! E3 n2 a+ f! J& k 简述ios打包(8分钟)+ B4 H! H; m2 q
18课程总结- s/ e* t, Q4 F, l- I2 h# C
课程总结与展望(9分钟)3 i) H, t0 l: @" q' J0 @2 ^
5 ]5 @: d4 K! @0 F2 V! g3 F
0 O4 ?! G* ?/ e. o" F
8 g1 v+ w P, F6 f* N* U; b0 S |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
