|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
2 [3 `% A' T1 m" o2 x# P" u课程目录：
' P& h% Y5 A; |9 u' R3 k01导学" P h0 E2 b, j7 n8 E0 G& L
导学(12分钟) . M; p4 }1 W9 S: f' `% f: Q
学前必看！补充课：接口调用参数补充(6分钟)( D( h! S, i' r2 G
基础框架NextHelloWorld(rar，513.7KB)
, ~$ c4 V8 x' |7 n2 D% {- Z8 G 超英预告最新源码(rar，8.7MB)7 q" c( {# }, Y' y8 w7 V6 q! s
linux工具与ngxin安装(rar，37.3MB)
, A' x6 l# T! v logo素材制作(rar，730.3KB)5 u/ T/ P7 J: c/ Z# H7 o
02课程介绍
! D8 [3 {, M0 x8 o [$ F9 |! U% g 什么是 uni-app(4分钟)
K5 M* `8 Z) p, E, p 为什么要使用 uni-app(8分钟)0 S7 ~3 Z! } R; S
app多端发布效果展示(7分钟)" H" M7 @. [7 z% U: f- n( x
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)! n0 {# r. A. [& k
微信、支付宝小程序开发工具调试(7分钟)
" ]' v( @5 |7 p8 b) [- R 在Mac上使用Simulator进行调试(5分钟)& d- Z" E0 Y& O7 F! j
03框架基础-上
% y4 v& f: w, m6 R( l8 m 简述MVC模式(9分钟)
1 i( a! l# v# q- t( t3 W4 C! W& b 图说MVVM模式(5分钟)
$ q6 i4 f0 J( M! ]& T 通过代码阐述MVVM与双向绑定(12分钟)7 y0 ^1 o) T: j! b) N
JSON对象和数组的渲染(4分钟)
7 \* I$ I! z& h1 r 页面路由以及标题配置(11分钟)' S. G( M, I+ s, X& N9 m
宏观讲解项目配置文件(16分钟)
$ z }" j0 B& {* i& D 应用的生命周期(11分钟)0 A2 B9 J7 L( U
页面的生命周期(14分钟)
' c% N8 z* M6 S9 W 固定像素px与响应式像素upx(12分钟)
/ x7 W3 h9 n4 u( S 在页面里使用{{}}表达式(7分钟)$ n; @) j7 [8 _& ^
04框架基础-下- Q& h9 y" C; c4 m) l0 z4 S
v-bind指令对属性的数据绑定(7分钟)% k6 h- ~4 Q2 Y, L/ G7 x
事件基础(22分钟)6 m/ K7 O) A, c, t4 s: I
条件渲染 v-if与v-show(7分钟)
' Z/ V! U2 x% B# {# f 条件渲染 三元运算(4分钟)
/ ?6 n' v1 X! E' E% u5 [ 列表渲染v-for的使用(13分钟)
6 ?% P+ f. J S 指令key实现for循环的组件唯一性(12分钟)! M0 c0 u4 p7 m' V. ^- I" G1 {
嵌套循环的下标定义(4分钟); L$ P5 d5 g$ h
条件编译 - 上(10分钟)
% \ E" J+ v) H8 p6 R1 a& O 条件编译 - 下(7分钟)# g: |. V$ r) |3 ~8 y* M
05样式与flex布局-上% w! \% D- Q: ]$ [( y
flex布局介绍与模型(8分钟)6 ~, |6 {) _- S+ Y, a9 ^5 x |
flex-direction 元素的排列4种方向(10分钟)" p7 S, e3 C0 c) x' b
导入外部css样式(4分钟)
7 S- e; T% H, f# b- R c flex-wrap 元素的换行(12分钟)& u" u/ Z/ X% v L' O
justify-content 元素在主轴的对齐方式(14分钟)( N& {' ^8 D/ ]# B9 J4 ~5 E
align-items 元素在交叉轴的对齐方式(12分钟)) I% n" J4 g2 E5 A1 j2 `* a9 R/ K5 I! M
06样式与flex布局-下
% X. O6 |* C& O" A" s3 n align-content 多轴线的对齐方式(13分钟)
4 T; w! ~1 \; }0 K; D flex成员项的属性 - order(4分钟)0 `3 x& m) `4 b) _5 ~" p5 l% {
flex成员项的属性 - flex-grow(4分钟)& U5 l5 S9 j0 Q' j9 v
flex成员项的属性 - flex-shrink(6分钟)( `# U1 ^( T$ P: y) |: z" \
flex成员项的属性 - flex-basis(4分钟)/ C9 e" M0 F7 m& I* R7 {$ v
flex成员项的属性 - align-self(6分钟)
5 r: B5 l1 H# x4 R8 V. K07开发首页-上: x' ^2 C: S) M( i) s- p: K
创建项目，构建基础页面(8分钟) 免费试学
' E3 R* W9 c+ Z9 E- y 构建tabbar(13分钟) 免费试学+ p" {6 V7 E6 f! X, }
设置全局page，简述view组件(6分钟) 免费试学
) Y7 r2 @) |! N# N% F7 j# A# t; E/ x 使用轮播图组件(11分钟) 免费试学! W6 w( B# I4 \, V: U2 [7 W6 @
禁用原生导航栏达到页面全屏化(6分钟) 免费试学
4 B& w1 t0 n- O5 l3 B6 I 在线文档的使用(8分钟) 免费试学
; ?! @ @* o1 r5 W- a request网络请求api讲解(5分钟)
* |1 ]4 |$ s+ Z, b. [ uni.request动态获得轮播图数据(9分钟)8 n! q8 ^6 @. _ u$ c: _
箭头函数 this 作用域(4分钟)% ^: U7 ?; t) y+ L$ s
渲染并且展示轮播图(5分钟)
7 d* ^4 b, w K6 u08开发首页-中
2 h1 d) d0 h% ~; q7 W 引入组件实现全局变量(7分钟)* Y- f3 |% t: N. v2 ^
使用挂载实现全局变量(4分钟)* ~/ e! y$ @! r2 H
在手机端进行微信小程序真机预览(6分钟)' N9 F$ J0 m6 a) C1 R2 v) v
微信小程序https使用事项(7分钟)% G, d! T% Z7 M8 @# ^. K1 v" s
开发热门超英 - 标题(9分钟)
3 k7 e; P+ R" |8 ] 开发热门超英 - 简述scroll-view(4分钟)$ u; z e1 h2 b$ M# _4 F2 R
开发热门超英-使用scroll-view实现横向滚动(3分钟); o! G' V1 ?& Z( G. ^7 P
开发热门超英 - 海报与标题(8分钟)5 X* ]( U& e* i4 w: W6 [; b
开发热门超英 - 评分(6分钟)( ]' [7 `' O$ E3 U
开发热门超英 - 动态渲染数据(8分钟)2 I4 G1 O/ a( ~
09开发首页-下
3 t- V0 \2 b/ F( K: P4 ] Z: i+ B 开发自定义组件(7分钟)' m- K) j- Z5 _! s
父组件向自定义组件传入值(6分钟)
. s, E( S. ^) f, ~% A) f7 P 完成评分自定义组件(22分钟)
8 C3 m1 M0 V/ c8 H! v 视频组件video讲解(9分钟), u4 c, y3 Y, M4 |; [
获取预告片数据(3分钟)/ n% O5 b' i( s8 W, d, l
动态渲染预告片(10分钟)
8 ^* v. d" C. N+ l5 Z8 A- a 猜你喜欢 - flex布局嵌套编写(18分钟)) s! O x% f; e' _0 k
猜你喜欢 - 编写点赞css(7分钟)4 t: E6 U: Y0 L! w; t% w% n2 ? f
猜你喜欢 - 实现点赞动画效果(14分钟)' H& D% e6 k1 M0 X
猜你喜欢 - 还原动画(5分钟)
8 u5 e3 Q9 ^" z: L1 i10开发首页-终
6 ~2 V7 {, m( U 猜你喜欢 - 动态渲染列表(6分钟): W3 ^3 d1 s _7 M
猜你喜欢 - 实现动画数组(7分钟). A* [0 { O. K4 q) U0 s
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
( P! m. @8 S* A0 T# V 猜你喜欢 - 开启下拉刷新(5分钟)
/ {% P! `7 ]% d) `# F/ p 猜你喜欢 - loading交互api(8分钟)4 }. ^; i" \' f
11构建搜索页-上, M& | ~' m# m n2 D! q
搜索页面 - 编写搜索栏(19分钟)
7 F. m3 z @% g; a. n' f0 L0 J4 i/ M 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
0 ]# N4 k) f; T2 Z7 H- Q 搜索页面 - 动态获取最新预告并且渲染(9分钟)+ v8 E+ R4 o1 f+ a
搜索页面 - 分页接口api讲解(4分钟)' { D/ d9 Q: ~
搜索页面 - 搜索前置准备(6分钟)
( V& Y& L6 [ p 搜索页面 - 执行搜索动态渲染(8分钟)8 d, n2 F' ~5 n6 c2 w) |8 g
搜索页面 - 监听下拉实现分页功能(8分钟)
" g1 ]3 {# M8 s& w 页面路由api与传参(13分钟)
$ _$ q( ?( i" c/ X3 ` 页面跳转组件的使用(7分钟)
( Q7 U6 {* [& z8 H1 M 详情页 - 查询详情与视频渲染(8分钟)
! n2 u* D% T$ N) C4 e: k6 L12构建搜索页-下
$ r. A; P& z0 f3 r* q2 j 构建预告片基本信息(16分钟)
" r* k+ ?% Q0 S' E# h5 W, T 构建评分快与阴影效果(15分钟)( l/ S2 S# R: S
解决错误数据绑定undefined(5分钟), n" P/ o) o8 M0 n$ e
编写分割线以及剧情介绍(8分钟)
9 ]+ f# ~7 U3 x) ^/ \" N- q' X, a& r 构建剧照与演职人员数据列表(10分钟)! a; X3 @4 _2 f2 u# i; ^5 Q
渲染剧照列表(8分钟)
0 W: C$ _! M$ ~; A1 b# X0 @; ]6 W! T 双拼数组构建演职人员列表(12分钟)0 B% a1 A4 @7 [" x( O: k
渐进式导航栏设置(6分钟)
+ Q# `% X. S, e! `- \+ A 通过预览api实现剧照预览(7分钟)
$ ?& q: t0 d o 演职人员数组拼接预览(8分钟)+ d9 w0 ]3 g0 H% H' u' e( a
13电影详情页构建4 l4 Q2 X1 s5 }& M1 j5 J+ {
自定义预览封面图(13分钟)) }! |6 N* B% T" ?& }
actionSheet接口api使用(6分钟)
7 U/ D! ^8 f5 s- `: @& r$ [ 下载以及保存图片(15分钟)
- y4 Y" ~$ A1 V l) J 配置https下载合法域名(5分钟)
8 d, g8 W4 h1 a* l; R0 K7 y! ^+ E: ] 实现小程序中的分享转发功能(9分钟); `3 O# p. L& q* _0 X+ @8 w
自定义导航栏按钮(11分钟)
( v5 l6 w) k4 K6 O0 ^ 分享到朋友圈(9分钟)
& W5 k+ U/ j! w6 w 微信开放平台简单介绍(6分钟)5 |' o: M6 A) _2 O% M
操作视频对象，提高用户体验(8分钟)
$ M! w$ Q: n! E+ k+ b 优化首页视频体验(13分钟)
8 [: K$ _9 A6 Y( p5 p u; G; c14我的页面（上）
, m5 Q9 F( [' u 开发个人页面-header与导航栏设置(9分钟)8 K7 y o! J2 {! w
发个人页面-用户未登录和已登录的页面展示(9分钟); W% i+ U+ R7 `: X* B. z
构建注册登录页面(8分钟)
1 [$ d0 k$ K X* D( q. y* y button与form组件讲解(6分钟)+ `5 L+ d B% t) ^7 W& { n
实现一键注册登录(12分钟)
' ` Z' R# c9 H9 Z) v 通过缓存切换是否登录状态(9分钟)) Q7 R* S2 J# s" E% U# [
构建用户账号页面(9分钟)/ `$ h3 R. g/ l
清理所有缓存api(4分钟)+ B' [: z# z; A0 R6 u- c- ]
用户登录错误提示与方法挂载(7分钟); r; Y* N8 O& q; I' V0 E0 r6 M2 M
渲染用户信息数据(6分钟)- A4 U2 j3 M+ o" Y( y4 q
15我的页面（中）
1 m- p/ e5 Q0 t4 Z, H2 E" L: G2 z 用户退出登录(6分钟)
: L. T. \7 p" P% U" M7 t+ u 第三方登录讲解与页面构建(16分钟)& w7 |( D; o! a6 [4 G% e
第三方登录-小程序端实现微信登录(15分钟)
, z# v. u1 ^6 X* B 第三方登录-后端登录业务梳理（辅助理解）(10分钟)
: ?; E4 u. ~7 Y4 ]( n% k& T- C 第三方登录-app端授权登录(8分钟)2 i6 k: B0 s% D( ^( C9 G
第三方登录-app端获取用户唯一id及信息(12分钟)
, N) Y+ a' w3 Z3 b: O 第三方登录-app端执行一键注册登录(7分钟)
+ W h P6 B. `/ d 查看预览用户头像(7分钟), `& n. m7 c( d( B1 v- Q0 I$ Q
选择用户头像(11分钟)
6 P; `) i- s. B 重新选择头像(3分钟)
1 {. M8 W. g% D+ W7 v16我的页面（下）
8 d+ u4 T. }7 \* ?7 g 文件上传api与后端接口讲解(5分钟): x3 Y: W/ P% f& J! S$ I9 z
token令牌讲解、实现头像上传(23分钟)! Z( ^3 Q& h; y
引入图片剪裁实现头像上传(7分钟)" L- p: E9 t/ e- d" d
用户修改昵称(18分钟)
6 r% o4 e# K6 @5 r1 [% M- I, k$ r 用户修改生日(17分钟)
) Z2 Z+ C% u) Q. e& C 用户修改性别(15分钟)7 V$ E2 V6 h& h n% Z0 t; Y; K
17项目发布与上线
! _6 N+ c0 l, ^ 打包H5 web应用(5分钟)6 {, h% a! \7 t: g6 a
购买云服务与简介(6分钟)5 i! o: t5 Y' z8 N7 a' k1 m) c( |
配置安全组，重置密码，上传nginx，配置ssh(14分钟)
0 L3 k p& Q0 o. B8 R- O- ?+ [& S 安装nginx(9分钟)
2 y5 [9 f) t; U 成功发布H5端web应用(14分钟). f z3 z6 i+ T& s
微信小程序上传审核流程讲解(8分钟)
% r5 q; X9 `" k+ U, t 打包安卓apk(8分钟)
; E; }$ \* V; N& J# {( U 简述ios打包(8分钟)
`! k% V* P( v, }, h18课程总结
% @- I" D0 X( ~- n. |) D% N! T; F+ u 课程总结与展望(9分钟)
/ [' Q5 `( X& w8 i3 x ~
4 h( e2 t( q! I: p; a/ ~6 C( Z
/ k: Z! l; R, T& L1 n5 u. Z
; K7 b% Z: U+ m- Y
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
