|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。7 o2 T; c4 j1 p, A. f& D0 E) z
课程目录：
* D/ n2 }2 F( i( k! C8 }01导学
8 `7 w7 \# y# D% t; w! G. y 导学(12分钟)
7 F* a" L$ @5 @/ R, W2 u' q 学前必看！补充课：接口调用参数补充(6分钟)
/ T3 Z3 f; M! V! N, d G0 f L 基础框架NextHelloWorld(rar，513.7KB)' F( f' D( [, x$ W' k
超英预告最新源码(rar，8.7MB), n5 \9 D4 s' h
linux工具与ngxin安装(rar，37.3MB)" Y; x m& x$ }; _0 m: b# g, k
logo素材制作(rar，730.3KB)2 Y @. j o; u
02课程介绍$ }0 w) P, z3 m
什么是 uni-app(4分钟)
- f2 t( r& G% R: X- V9 ] 为什么要使用 uni-app(8分钟): e g0 R! p; l
app多端发布效果展示(7分钟)6 e- m8 l$ G! U( m6 T6 u: a' q# M1 [
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
7 }( A* x0 Z1 o: s 微信、支付宝小程序开发工具调试(7分钟)
* p3 c; U) m0 O, m( E 在Mac上使用Simulator进行调试(5分钟)) e2 f( d9 w* b' p+ B
03框架基础-上' O% f& R* t8 L
简述MVC模式(9分钟)
5 [ l u, i2 A 图说MVVM模式(5分钟); r" q; o6 [' h2 W8 M
通过代码阐述MVVM与双向绑定(12分钟)
. e) k- O; E) V; W6 x% ]4 G5 d JSON对象和数组的渲染(4分钟)0 c. Z' L7 h6 U$ r) v
页面路由以及标题配置(11分钟)
% i9 _# _( J$ I8 m' q 宏观讲解项目配置文件(16分钟)0 p& }7 o3 E1 k# @! b7 H+ j2 ?. P
应用的生命周期(11分钟)
/ O4 m# j/ _, i% \ 页面的生命周期(14分钟)0 M. }3 w3 [$ F5 r* \, [
固定像素px与响应式像素upx(12分钟)0 _" B8 u7 r: c2 \2 ?
在页面里使用{{}}表达式(7分钟)
7 B; S' O# Z- ]! G4 c2 K, i04框架基础-下" [9 [6 P0 |7 H! H; F' d% i& t- i
v-bind指令对属性的数据绑定(7分钟)/ \& C6 b: Z/ a v- C5 }
事件基础(22分钟)' L: a$ M* H3 P5 x' z
条件渲染 v-if与v-show(7分钟)
0 w/ H' v& W$ Y4 @% T% U0 q3 } 条件渲染 三元运算(4分钟)
' K4 a! G+ ]- ~ 列表渲染v-for的使用(13分钟)
0 x7 I9 O! q3 E+ ~$ z: D0 I 指令key实现for循环的组件唯一性(12分钟)
4 i+ f. f7 u# [2 \5 q 嵌套循环的下标定义(4分钟)
1 z. k$ k: B1 e 条件编译 - 上(10分钟)$ n: E, z" w( x; d/ z
条件编译 - 下(7分钟)
- A' V0 U3 A4 j" c i3 u4 d05样式与flex布局-上% ?, N- j4 \6 p/ h
flex布局介绍与模型(8分钟)
8 C3 H7 y$ F& Q flex-direction 元素的排列4种方向(10分钟)/ @: m# M: n8 V* c
导入外部css样式(4分钟)
" e- Z& Z' m& ]7 D5 Q i- ^) y flex-wrap 元素的换行(12分钟); O- j3 W9 }' P, H
justify-content 元素在主轴的对齐方式(14分钟)
0 H y4 Z) K2 ^' F* `! e align-items 元素在交叉轴的对齐方式(12分钟)7 J7 b* N8 J0 q+ k
06样式与flex布局-下: D0 B: L& |3 s; k+ g4 a! b; ^, y7 A
align-content 多轴线的对齐方式(13分钟)0 O" W* U2 o3 v7 Q7 y) M0 P
flex成员项的属性 - order(4分钟)
2 Q- {+ ~" j: N) J# G. [1 l; ?0 D flex成员项的属性 - flex-grow(4分钟)
5 l t: K: ?/ a, }+ Y flex成员项的属性 - flex-shrink(6分钟)
) d8 c w9 u4 j: Q$ {( ?" { flex成员项的属性 - flex-basis(4分钟)
" A0 J; K" ^9 u" c. i6 D: b flex成员项的属性 - align-self(6分钟)1 N2 l2 x3 W$ k- l# K$ \; g! Y
07开发首页-上! @9 I* p6 J7 V% `6 N# B
创建项目，构建基础页面(8分钟) 免费试学2 a& d+ L9 F9 c9 s& O/ C) G
构建tabbar(13分钟) 免费试学
) [ \2 v% Y! s7 ^" F5 K! d 设置全局page，简述view组件(6分钟) 免费试学
% R3 \& _( }# m" `) R 使用轮播图组件(11分钟) 免费试学
+ ^( S5 l7 W- l" n- { u7 n 禁用原生导航栏达到页面全屏化(6分钟) 免费试学8 D- j. l- ~. ^ W* y
在线文档的使用(8分钟) 免费试学& W7 q: o* X/ P3 X5 [* t$ D' ~1 \3 R
request网络请求api讲解(5分钟)
2 f; z: |+ U w1 z: n uni.request动态获得轮播图数据(9分钟)4 F* T4 z5 [1 t( p. J" k
箭头函数 this 作用域(4分钟)* z; D3 l+ V1 ~. ~
渲染并且展示轮播图(5分钟)
( I+ d. U9 j9 `$ d( s* n08开发首页-中
5 s9 `* l/ l2 D6 e/ b 引入组件实现全局变量(7分钟)8 `0 O! q9 z9 A3 H3 b9 v
使用挂载实现全局变量(4分钟)
" @4 \0 { Q) \ 在手机端进行微信小程序真机预览(6分钟)
3 W& n6 Q; y) u9 O6 V) V0 z+ v 微信小程序https使用事项(7分钟)
6 M. }- P4 c4 ?/ \/ ~6 F: S 开发热门超英 - 标题(9分钟)
: O/ j) i4 o; C7 @( R0 t 开发热门超英 - 简述scroll-view(4分钟)) Q* |4 \6 v% M# w/ E
开发热门超英-使用scroll-view实现横向滚动(3分钟)0 ]6 Y2 @' A/ W3 g
开发热门超英 - 海报与标题(8分钟)- P" P% k w- u( A
开发热门超英 - 评分(6分钟), P- Q+ d3 U5 L2 U: M; Y1 h
开发热门超英 - 动态渲染数据(8分钟)
. v2 Z6 Q4 U8 U8 w09开发首页-下, c" E/ l$ _0 B1 q: }) C/ g
开发自定义组件(7分钟)& B; p; ^1 H. a! P$ w1 v
父组件向自定义组件传入值(6分钟)/ y" q# D, b! w
完成评分自定义组件(22分钟)* u" c0 n- w* U
视频组件video讲解(9分钟)
( K4 b6 U- V$ R 获取预告片数据(3分钟)
: _: J. f" } I8 v: A0 @) V: A( T 动态渲染预告片(10分钟)7 R! B* Q# i' U* N
猜你喜欢 - flex布局嵌套编写(18分钟)
( \4 ~; E. g2 O5 h, K 猜你喜欢 - 编写点赞css(7分钟)' h/ U0 E. _7 b
猜你喜欢 - 实现点赞动画效果(14分钟)
1 x6 X, n. q/ v% h, `$ n1 C$ c 猜你喜欢 - 还原动画(5分钟)
; V: D, W/ l: }6 d5 @- y) k10开发首页-终
9 |, O3 X& _0 D- z$ e& [7 v 猜你喜欢 - 动态渲染列表(6分钟)! V5 b9 p! M5 ]) m
猜你喜欢 - 实现动画数组(7分钟)
+ G3 ?/ A, ?# l v 猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
! d0 z3 C ~/ }3 C" ^( n4 l 猜你喜欢 - 开启下拉刷新(5分钟)
& m3 v# p, z6 ? 猜你喜欢 - loading交互api(8分钟)4 ~, j) p$ q0 j) I
11构建搜索页-上) U9 u0 I1 J0 `: L7 K
搜索页面 - 编写搜索栏(19分钟)
( |! m) c: W9 E8 { 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)5 N" i! l; z# p9 Q* O
搜索页面 - 动态获取最新预告并且渲染(9分钟)
0 t7 B" F* o# C5 f 搜索页面 - 分页接口api讲解(4分钟)
- X2 q$ w# A6 I J% y 搜索页面 - 搜索前置准备(6分钟)) Z/ N6 ~, k/ @/ M E8 U8 x- q
搜索页面 - 执行搜索动态渲染(8分钟)- Q0 z: K. L7 R6 K2 Q
搜索页面 - 监听下拉实现分页功能(8分钟)6 x/ f y4 K% y" b
页面路由api与传参(13分钟)
) z. [' _- s' I6 b) b. c& l 页面跳转组件的使用(7分钟)
" V/ p7 U/ w) T0 V; `3 U. Q9 D# @ 详情页 - 查询详情与视频渲染(8分钟)
3 F# n+ f3 j, B12构建搜索页-下, Z( X5 W/ z( o: m* i6 \
构建预告片基本信息(16分钟)
" R* F, I1 Y3 r$ x _* P+ i/ e 构建评分快与阴影效果(15分钟)) h2 P: F+ `1 Y, }+ S
解决错误数据绑定undefined(5分钟)
, B- ]: W4 d1 k0 S+ l- E# m 编写分割线以及剧情介绍(8分钟)- g( F) R' k+ `& [# P
构建剧照与演职人员数据列表(10分钟) a/ I" X1 ~6 y- r8 ^& t
渲染剧照列表(8分钟)
% T w4 V8 q. S7 W9 G/ E 双拼数组构建演职人员列表(12分钟): q8 B+ [, l+ L }6 {0 [: N8 s
渐进式导航栏设置(6分钟)
: G1 o6 L7 i$ s, t y" f 通过预览api实现剧照预览(7分钟)" h+ M2 g7 Z9 ]4 Z% y# A( \8 r
演职人员数组拼接预览(8分钟)$ i- l D1 t6 J1 l% \
13电影详情页构建
( G3 P* B- T# l- | 自定义预览封面图(13分钟)/ G! @: _: `3 a8 C! w( r9 ~( \$ e+ f! e
actionSheet接口api使用(6分钟)
( R0 ?# Z7 f- d" v5 Q5 b3 Y1 h/ w. e; _ 下载以及保存图片(15分钟)8 M8 ~, U2 ^3 l, ?$ A1 N& [
配置https下载合法域名(5分钟)4 C% `( h. n3 Q$ a, D, a5 g
实现小程序中的分享转发功能(9分钟)
+ a1 |" Y. S: p0 i( z# y 自定义导航栏按钮(11分钟)
; G" T2 ?! a9 H) r/ B 分享到朋友圈(9分钟)+ L- `7 b4 G G0 A# y
微信开放平台简单介绍(6分钟)) G$ F7 `8 b6 z; V0 Z P& F
操作视频对象，提高用户体验(8分钟)' A8 ^. b# G; F
优化首页视频体验(13分钟)
4 s: A' P; [) L' t/ ~14我的页面（上）% y$ l" c1 P3 l' u) W
开发个人页面-header与导航栏设置(9分钟)& m( @, J! _/ a. C# O0 Q
发个人页面-用户未登录和已登录的页面展示(9分钟)
& b' b3 V8 k: J4 q8 O2 E7 r 构建注册登录页面(8分钟)0 l- ~3 Z; _. O: u2 ~
button与form组件讲解(6分钟)
2 Q* S" P) L+ w9 U 实现一键注册登录(12分钟)
1 J, b5 g+ C0 f4 |3 ^9 R3 j 通过缓存切换是否登录状态(9分钟)& j3 t! x0 C1 h4 s8 I
构建用户账号页面(9分钟)0 |- R& ]' x+ S( a
清理所有缓存api(4分钟)
+ }# S& l- X! b7 R/ S' L 用户登录错误提示与方法挂载(7分钟)% G! |4 q- L! g) f) H" u N5 V% O
渲染用户信息数据(6分钟)
) Q: N7 K( Z& L3 Q1 ?9 U1 T( Z% Z15我的页面（中）
1 K l1 c1 o$ o; z" d3 Y+ Z 用户退出登录(6分钟)
c& x5 _) g9 \% K" ^& l 第三方登录讲解与页面构建(16分钟)
! X1 E3 m5 w" t% ^' ]# A 第三方登录-小程序端实现微信登录(15分钟): p' V+ o4 z1 [( ?8 s# C/ R
第三方登录-后端登录业务梳理（辅助理解）(10分钟)2 ~; x2 T6 K7 O6 R2 {
第三方登录-app端授权登录(8分钟)
( i1 l z$ \9 w: H: r 第三方登录-app端获取用户唯一id及信息(12分钟)
3 |) C5 F8 `3 q+ [) b* M& z 第三方登录-app端执行一键注册登录(7分钟)$ ?+ H' l* c* v- Z. r/ L1 W
查看预览用户头像(7分钟)) u# ^1 J5 [9 |1 `3 L- p
选择用户头像(11分钟)
% V: }0 d* c0 m, d# X 重新选择头像(3分钟)
$ @2 k) F- f. C' _* D16我的页面（下）$ w" I9 e1 q. n- f
文件上传api与后端接口讲解(5分钟)
$ V1 U; M5 P" k$ s5 X8 D4 U token令牌讲解、实现头像上传(23分钟)
8 O. u8 ?$ m- G6 V' q# S$ f 引入图片剪裁实现头像上传(7分钟)
E1 B5 O# M, B! E! v4 C 用户修改昵称(18分钟)
; f/ L8 I8 A( P, V) P* e 用户修改生日(17分钟)+ w+ h) G/ B9 q: s
用户修改性别(15分钟) \! F0 k" W0 K" L J- x
17项目发布与上线
& N1 M8 ^- R5 A3 N 打包H5 web应用(5分钟)
; }# |' P g$ r- m" ^9 K3 D, C; T3 R 购买云服务与简介(6分钟)3 q2 U% c6 S, \0 h0 L
配置安全组，重置密码，上传nginx，配置ssh(14分钟)/ f$ I9 H) I$ p8 C
安装nginx(9分钟)$ B; M* t7 _$ A! _3 C1 |
成功发布H5端web应用(14分钟)
0 n0 y( p* y+ K# K4 y- X 微信小程序上传审核流程讲解(8分钟)) h* P, M. h% N- A* ~
打包安卓apk(8分钟)
& b$ |% V; C/ L1 b: E, X. n 简述ios打包(8分钟)
7 Q/ d/ q m3 N3 |% N, L18课程总结
3 k6 ]$ T# ^, `* e1 V: Q$ W$ a- a 课程总结与展望(9分钟)
9 f1 T: X" X& }" O5 C
; a# N0 R& g; q- ]3 b3 X
' Z, y3 L4 e" y
) D' q- n* b, A/ Y& T |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
