|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。' d, b S$ d" d& }4 B. f0 [% n
课程目录：: T- Z4 i6 i4 W; d% O2 ^5 p, x
01导学
4 n9 e, k% e" Z* K 导学(12分钟) 3 O8 L2 a f4 J" L" Z
学前必看！补充课：接口调用参数补充(6分钟)7 M0 k9 ]; `* Z' b+ _; l: S3 u+ G
基础框架NextHelloWorld(rar，513.7KB)
' o: i4 i1 I! t, ` 超英预告最新源码(rar，8.7MB)
- V* S# ]$ K. i; N+ l linux工具与ngxin安装(rar，37.3MB)7 z7 d7 r8 f# R( N. E
logo素材制作(rar，730.3KB)$ H( t ^3 `+ @8 b5 d3 ]
02课程介绍
# w9 l" L/ c' a d. l 什么是 uni-app(4分钟)6 D. ~% d. C9 v6 \+ ~- w+ b
为什么要使用 uni-app(8分钟)/ h! |' x3 w' F/ o$ l+ D/ S
app多端发布效果展示(7分钟)
. S4 a! p: X) T7 _9 R 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)( {8 @, L# M9 Q/ G1 m* o* g
微信、支付宝小程序开发工具调试(7分钟)
* R# W+ u. A1 Z7 ]/ p# S( a 在Mac上使用Simulator进行调试(5分钟), d- [9 }) m# [
03框架基础-上$ Y. Y9 B/ r1 G1 v B
简述MVC模式(9分钟)
2 e+ v1 r3 K& L" ? 图说MVVM模式(5分钟)
: z8 Q3 |4 u* \0 E3 w* S 通过代码阐述MVVM与双向绑定(12分钟)$ e. \$ ~1 C) J% n$ o. j
JSON对象和数组的渲染(4分钟)
- Y. l9 c3 J% l, z% \* q 页面路由以及标题配置(11分钟)
/ Z2 `" W: j% ^4 J7 o 宏观讲解项目配置文件(16分钟)6 j m4 n# ~+ G+ _1 d
应用的生命周期(11分钟)
0 A7 J! U) z( v4 Q9 P4 y6 l 页面的生命周期(14分钟), L6 V3 d( b- E9 ^8 Z" Q8 j; w
固定像素px与响应式像素upx(12分钟)+ s* S4 G0 P: j, {6 q8 M
在页面里使用{{}}表达式(7分钟)/ i' [5 g2 v+ L7 U
04框架基础-下
- l. c& x0 @; G! `4 G$ Q v-bind指令对属性的数据绑定(7分钟)
9 J" t/ S$ |" B4 R3 ^+ x# X 事件基础(22分钟)! ~* p/ N/ l. i# a6 ?0 W6 @
条件渲染 v-if与v-show(7分钟)
3 J- |6 J7 @7 d! C 条件渲染 三元运算(4分钟)6 w- h" W) U' T
列表渲染v-for的使用(13分钟)7 h& S: Y! A7 _# z6 m
指令key实现for循环的组件唯一性(12分钟)8 Z$ A7 G# }1 o
嵌套循环的下标定义(4分钟)
; ?8 k9 y+ d& T% v* D2 N% A 条件编译 - 上(10分钟)
1 |, T5 X# @% C v! g+ V! ?6 g, B. H5 a 条件编译 - 下(7分钟)( `0 m( s% V) D8 @- Y4 W& Z
05样式与flex布局-上
; a7 P& a: b" Q7 p2 c flex布局介绍与模型(8分钟)8 H4 ]* f& d/ ?
flex-direction 元素的排列4种方向(10分钟)2 w( {: ~3 f$ n3 Y3 G& V
导入外部css样式(4分钟); S5 c7 }% G$ {' Y
flex-wrap 元素的换行(12分钟)* H, k; o p+ T# _
justify-content 元素在主轴的对齐方式(14分钟)- r4 ]4 o- p+ F, z" G) T
align-items 元素在交叉轴的对齐方式(12分钟)% Q" S1 T6 L( w. | P: Z
06样式与flex布局-下5 g% I7 i+ r/ H# K; l5 H& i @( i
align-content 多轴线的对齐方式(13分钟): U$ }# p. R* N; Q4 m
flex成员项的属性 - order(4分钟). ?7 G! @7 B( c+ L; V
flex成员项的属性 - flex-grow(4分钟)
( y( d# C9 {$ ~6 w flex成员项的属性 - flex-shrink(6分钟)
1 x$ [) E+ \+ i& ^ flex成员项的属性 - flex-basis(4分钟)
" b! X* U$ b' i5 `- R6 b4 Z flex成员项的属性 - align-self(6分钟)
% m5 ~4 u+ B, I. L( k07开发首页-上; p9 V2 s8 u4 n! _$ d/ [
创建项目，构建基础页面(8分钟) 免费试学, {( R- Y) M0 L
构建tabbar(13分钟) 免费试学
h" O+ m8 J5 n- M! Z- ]# N 设置全局page，简述view组件(6分钟) 免费试学7 H( R0 Z6 P/ J6 u" E% V9 `
使用轮播图组件(11分钟) 免费试学0 F- k, Q$ F/ Q$ ]+ n3 f" y( ^
禁用原生导航栏达到页面全屏化(6分钟) 免费试学
/ U1 R* `1 q) J 在线文档的使用(8分钟) 免费试学5 \ @8 T" J6 S6 u+ k
request网络请求api讲解(5分钟)
5 i. y! \) f% W+ e uni.request动态获得轮播图数据(9分钟)
! K* ], F' K4 g) C6 q 箭头函数 this 作用域(4分钟)0 g& J0 Z2 S* t- [
渲染并且展示轮播图(5分钟)
" O+ U9 j0 [1 g5 j( |9 A5 \" L08开发首页-中% i' W3 c, q" J! k9 P c- `/ a0 _
引入组件实现全局变量(7分钟)
& s N% }2 c& A. m5 n 使用挂载实现全局变量(4分钟)
% ?* Q& q7 e- k3 e! z+ Y" l 在手机端进行微信小程序真机预览(6分钟)
9 e2 L) K, o! G n 微信小程序https使用事项(7分钟)& \& m' T4 ~7 m4 J" X
开发热门超英 - 标题(9分钟)
9 K3 y/ f6 R# A 开发热门超英 - 简述scroll-view(4分钟): W, w( B3 ~; ^! K) w' n) R
开发热门超英-使用scroll-view实现横向滚动(3分钟)
$ `0 K" I L7 |) s& j8 {5 r, h 开发热门超英 - 海报与标题(8分钟)
H1 z" t) U B 开发热门超英 - 评分(6分钟)
. y6 b3 o# E2 J/ H/ N$ X* i 开发热门超英 - 动态渲染数据(8分钟)5 G( @7 u& M- h) b. ^8 e
09开发首页-下
: k ~2 \6 n/ d% s" K! h 开发自定义组件(7分钟)
2 @ [! D4 j+ v4 C9 D$ u 父组件向自定义组件传入值(6分钟)8 y' N1 @( k c
完成评分自定义组件(22分钟)
" x h/ i* q6 U3 z 视频组件video讲解(9分钟)/ {6 L* A1 b5 G* }# }+ i, E1 V
获取预告片数据(3分钟)
* O1 Q! s! r& r) R& H5 w' _ 动态渲染预告片(10分钟)
: e; [) Q: }3 @: H; p" m 猜你喜欢 - flex布局嵌套编写(18分钟)6 Z: v! b8 W7 |/ F& `
猜你喜欢 - 编写点赞css(7分钟), A& ^3 Z' [/ T2 y5 Q/ W' w7 G
猜你喜欢 - 实现点赞动画效果(14分钟)8 ?* c' |6 t2 c6 j3 I+ C
猜你喜欢 - 还原动画(5分钟)( b) j3 _5 g$ f u6 Q
10开发首页-终
+ ^8 e- \ I: R( z 猜你喜欢 - 动态渲染列表(6分钟)& T9 C) b j: ~% d) D$ a2 D3 ]' U
猜你喜欢 - 实现动画数组(7分钟)0 ^# S# P8 }8 X+ S
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
* v; H/ i1 v3 d) M9 D8 X 猜你喜欢 - 开启下拉刷新(5分钟)! B6 _8 M. ~4 _; Y B, h0 d
猜你喜欢 - loading交互api(8分钟)
1 L7 ?4 S4 ~! s1 O11构建搜索页-上
9 \& {! n3 [: V 搜索页面 - 编写搜索栏(19分钟)
9 [0 a5 F6 u1 N 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟). i4 ?. d% W0 `6 y. u
搜索页面 - 动态获取最新预告并且渲染(9分钟)# r& o. }# i2 K0 J% p5 B. p
搜索页面 - 分页接口api讲解(4分钟)
+ {( t+ l. J s3 X6 Z# o- K 搜索页面 - 搜索前置准备(6分钟)/ h- v% p' m0 | C
搜索页面 - 执行搜索动态渲染(8分钟)
. h9 u& l; n: |2 i) F 搜索页面 - 监听下拉实现分页功能(8分钟)+ e( |0 k+ ], f8 Z9 {4 o
页面路由api与传参(13分钟)! r4 b& }7 S8 {
页面跳转组件的使用(7分钟)
; b( j* L5 @* S2 D7 l# K) h 详情页 - 查询详情与视频渲染(8分钟)
8 Z+ T* F% ?8 k" v12构建搜索页-下
3 E: z# l" ^8 r8 ]0 X4 a% h 构建预告片基本信息(16分钟)
% s- v; C; L( h5 y8 y 构建评分快与阴影效果(15分钟)
* S) a' E% _4 N; V9 ^ 解决错误数据绑定undefined(5分钟) D0 @5 |! @8 `6 r
编写分割线以及剧情介绍(8分钟)" ]: ~( g/ M" ~% @( b% K- z0 \
构建剧照与演职人员数据列表(10分钟)
7 i/ [% V2 A9 R v 渲染剧照列表(8分钟)
7 V7 Y" s( {5 m% ?. f 双拼数组构建演职人员列表(12分钟)
# ^; D: y* ] U5 Q0 R4 h 渐进式导航栏设置(6分钟)
) C( j; z( x' `1 f 通过预览api实现剧照预览(7分钟)
" O$ P4 M- k5 [% m" i 演职人员数组拼接预览(8分钟)
8 m. c! @ a k) }, H13电影详情页构建
$ H; F% p9 k" I# T8 A3 e& g! q 自定义预览封面图(13分钟)
, P4 E9 c5 l. X actionSheet接口api使用(6分钟)
* L' r9 t: K6 G4 c: S$ U 下载以及保存图片(15分钟)7 u7 S; E, n: j; {; J
配置https下载合法域名(5分钟)- o% t; ^' Z& }% ?1 V$ b% w7 n* w- n1 x
实现小程序中的分享转发功能(9分钟)
5 F, z; }- T6 a0 f0 f 自定义导航栏按钮(11分钟)
6 F' P1 f/ u# _, p 分享到朋友圈(9分钟)
" {& [% U. R* E' R, z 微信开放平台简单介绍(6分钟)' \- V- P% F3 G( L
操作视频对象，提高用户体验(8分钟): Y0 v/ q$ _% }3 B) E" C" N
优化首页视频体验(13分钟)$ t5 S$ r7 F0 u" k; q" }9 Q3 A
14我的页面（上）
1 z; O& C) M" u% {$ ^. n/ i3 m 开发个人页面-header与导航栏设置(9分钟)
2 a7 H) q$ F1 J" F 发个人页面-用户未登录和已登录的页面展示(9分钟)
3 T+ _( V I4 v) U0 D 构建注册登录页面(8分钟)
- b& h( ]# m9 Y0 M button与form组件讲解(6分钟)) O- T; V. F5 U, S4 ]' M7 z/ c& D. n/ k
实现一键注册登录(12分钟)
6 A9 B& X/ \' g, \1 j! `, J 通过缓存切换是否登录状态(9分钟)& ]9 z! S' T0 ^+ [
构建用户账号页面(9分钟)
1 ~0 O! b* {- m 清理所有缓存api(4分钟)9 v. g& J8 d# Q0 j
用户登录错误提示与方法挂载(7分钟)
% i5 b3 r+ c* l 渲染用户信息数据(6分钟)4 ~2 n( m6 w4 u, r- h- b. K
15我的页面（中）
1 W- Q! l* e& j" c5 Y 用户退出登录(6分钟)- V' a: X) i ?) p
第三方登录讲解与页面构建(16分钟)
' ^! n3 R' H" d6 h2 q5 J. w 第三方登录-小程序端实现微信登录(15分钟) g) L+ q# q* j" w/ h, p
第三方登录-后端登录业务梳理（辅助理解）(10分钟)
! _8 I q: \& V" w: g/ A 第三方登录-app端授权登录(8分钟)' a' U* ~4 p6 ]0 |3 w9 h( L; B
第三方登录-app端获取用户唯一id及信息(12分钟)4 e: U1 _& n5 \' Q2 a
第三方登录-app端执行一键注册登录(7分钟) y9 o* X- R0 g, Z' G, S
查看预览用户头像(7分钟)
" {2 `% r G8 ~/ u. ? 选择用户头像(11分钟)
8 N/ p9 N, J9 T3 I, [. J 重新选择头像(3分钟)* n( ~+ O% ?3 T9 Y% y$ m
16我的页面（下）6 t* ~" ^: S' S* U3 X& g
文件上传api与后端接口讲解(5分钟)3 O ?" A5 V8 J& W; H
token令牌讲解、实现头像上传(23分钟)
1 J$ n9 z2 A" N* ~8 N k b& h' P 引入图片剪裁实现头像上传(7分钟)
- k7 m- r- L5 i2 X w 用户修改昵称(18分钟)4 m7 T* e q+ Y5 b9 Q
用户修改生日(17分钟)( `" J) \* n8 K& m* B x
用户修改性别(15分钟)$ }* P/ V" ~, X Q+ S' ]* G
17项目发布与上线
+ m/ L4 u, ?% Q- u$ L% y 打包H5 web应用(5分钟) L$ ~; @2 @' b0 w+ f
购买云服务与简介(6分钟)5 n5 B. S# \1 I: h3 _6 W6 O0 s
配置安全组，重置密码，上传nginx，配置ssh(14分钟)
9 W: ~" ^* l1 m' u0 Q! `8 V; D 安装nginx(9分钟)4 _; P) w" _$ P" B5 M' t6 O, {
成功发布H5端web应用(14分钟)
* p& R, C+ H4 g9 D% H U 微信小程序上传审核流程讲解(8分钟)# [) q! |$ i' W7 G7 `( t" i
打包安卓apk(8分钟)
/ t( l/ D$ w7 B! q' p5 J 简述ios打包(8分钟)0 D% {: x1 t8 T$ ^. t) j6 p
18课程总结
. U9 d- `' ?& d8 | 课程总结与展望(9分钟)
, C$ |# L2 V( x: H+ L
2 r( F% i* V$ k8 P 6 o* P* m+ n3 `" k, G( |( J
* n. v" }" r$ \# ~) M: V6 \$ o |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
