|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。 [# p6 J; r1 f. e2 e2 g8 e
课程目录：
3 x9 _: ?) v3 y# J01导学, T/ P2 k( a* E, Z2 F3 C& ]# i1 m
导学(12分钟) " y" C6 g _+ p
学前必看！补充课：接口调用参数补充(6分钟)0 i" e! R% T' y/ d( `8 n0 [) y
基础框架NextHelloWorld(rar，513.7KB)8 o! ^/ b/ ^8 a$ m: w& ^
超英预告最新源码(rar，8.7MB)6 q: R! Y: l4 a/ }4 c9 w
linux工具与ngxin安装(rar，37.3MB)
/ P. G9 R* j+ b; x logo素材制作(rar，730.3KB)
: h& J/ @3 g& w/ G0 z( _02课程介绍
0 {2 \1 u0 U5 [" r0 Q! e3 e 什么是 uni-app(4分钟)
4 Z4 q2 J. R1 z) Y* d8 S 为什么要使用 uni-app(8分钟)
! M7 ^, z& |4 i% g c, U app多端发布效果展示(7分钟)* d# k% ~1 t, m! v3 O8 s1 P
使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
4 i) L4 k% p8 o8 s5 I8 A5 b 微信、支付宝小程序开发工具调试(7分钟)
" o, S/ A4 Q5 u ?- z) {+ v 在Mac上使用Simulator进行调试(5分钟)) [" h9 B* N4 X1 O& m7 }6 b5 {: R# Y1 O
03框架基础-上7 ?* [6 Y! Y' |6 O( e+ ]/ z! w
简述MVC模式(9分钟)
/ C6 g/ m# `% Z1 z8 ] 图说MVVM模式(5分钟)
4 D/ L, k6 n1 b/ @6 h 通过代码阐述MVVM与双向绑定(12分钟)% q8 W2 H9 A( q5 Y0 k4 a
JSON对象和数组的渲染(4分钟)
* g2 x9 v, V4 l7 c8 R6 w! J( A$ _ 页面路由以及标题配置(11分钟)
' I! ?6 U5 W6 _! u3 n4 A6 ]0 _- d/ r 宏观讲解项目配置文件(16分钟)
0 G @3 K( f' Z 应用的生命周期(11分钟); }0 A$ N+ W+ \* `/ R
页面的生命周期(14分钟)# h i' F4 @' V+ u I
固定像素px与响应式像素upx(12分钟)
/ e: g2 S$ O! x7 b% | 在页面里使用{{}}表达式(7分钟)
W- c4 _. b V04框架基础-下7 j! |5 d* ~. c4 D, j
v-bind指令对属性的数据绑定(7分钟)
$ H4 d' R B6 J+ N& i 事件基础(22分钟)+ T* \* ~0 K0 A9 p1 r; h) a* O
条件渲染 v-if与v-show(7分钟)' y! ^+ N* W; h& p( h
条件渲染 三元运算(4分钟)
, _7 X. h7 j0 U8 c: M( [( \ 列表渲染v-for的使用(13分钟)
9 y/ x& e8 f4 z$ Q 指令key实现for循环的组件唯一性(12分钟)6 R- H9 `& t& j# y. | f2 Q
嵌套循环的下标定义(4分钟)3 L" T2 W2 H$ s$ k) M
条件编译 - 上(10分钟)
, p' ]$ m& m/ `* L! u 条件编译 - 下(7分钟)& P0 [3 `- b! v9 e( m, c: ]
05样式与flex布局-上
$ f0 a7 X# z1 m' q flex布局介绍与模型(8分钟)
* k2 C+ ] `# p$ r* ` flex-direction 元素的排列4种方向(10分钟), t# a. ^ d6 W/ a, \
导入外部css样式(4分钟)
9 }" a2 z1 v! x flex-wrap 元素的换行(12分钟)- p3 k: } \$ M7 ^& S; e7 k0 {
justify-content 元素在主轴的对齐方式(14分钟)/ B+ p( c& y5 H
align-items 元素在交叉轴的对齐方式(12分钟)7 j# X! U8 x" F2 H
06样式与flex布局-下
( A4 T; t. t0 D align-content 多轴线的对齐方式(13分钟)
1 ` F) C% |; Z# M$ B9 [ flex成员项的属性 - order(4分钟)
0 d; ^7 P1 d8 I6 | flex成员项的属性 - flex-grow(4分钟)
* @& T$ M: a- g flex成员项的属性 - flex-shrink(6分钟)
* p( l/ L" Q* G flex成员项的属性 - flex-basis(4分钟)
E) d% f7 k+ ?: G1 l! ` flex成员项的属性 - align-self(6分钟): V6 y: U0 U \2 I
07开发首页-上. p! t# @5 M% u; I. m: k8 Y- ?
创建项目，构建基础页面(8分钟) 免费试学1 [% z+ E! ^- g( x. s N& G' P2 t; z
构建tabbar(13分钟) 免费试学
) V4 r+ M, W/ H2 F+ R* J 设置全局page，简述view组件(6分钟) 免费试学
3 {7 N2 g0 x3 D& p: g" _ 使用轮播图组件(11分钟) 免费试学
& G, b; S) r) h# _" w+ L0 W: C7 R5 U 禁用原生导航栏达到页面全屏化(6分钟) 免费试学* w2 H/ J1 M0 Z% n1 G( o2 z" e" V
在线文档的使用(8分钟) 免费试学
6 e# F# A" d" @3 Q request网络请求api讲解(5分钟)
4 }+ ]" R7 j/ G; I uni.request动态获得轮播图数据(9分钟)
# c. ^) J+ b V+ q( ] 箭头函数 this 作用域(4分钟)
9 e' V2 c5 k7 L9 ~( f3 E7 k5 t 渲染并且展示轮播图(5分钟) r G9 l* [5 N+ j D0 E3 ?
08开发首页-中# n$ R6 {+ V o7 W
引入组件实现全局变量(7分钟)
1 ?; w' G3 ^* [ 使用挂载实现全局变量(4分钟)
1 J% D' @ k$ i! w. w& d* H 在手机端进行微信小程序真机预览(6分钟)
; B% L7 M; d2 @2 o# d5 }) p 微信小程序https使用事项(7分钟)2 k& g! o/ D0 e( @
开发热门超英 - 标题(9分钟)5 J9 p0 W, f* `. W ^! O0 g
开发热门超英 - 简述scroll-view(4分钟)2 M5 _3 \+ O; p, P8 p
开发热门超英-使用scroll-view实现横向滚动(3分钟)
* [4 |1 Q% R+ I' {1 f; g; A 开发热门超英 - 海报与标题(8分钟)) U( H. W8 |8 M5 j- T
开发热门超英 - 评分(6分钟)
) \6 J( }* J, ^' L l0 z 开发热门超英 - 动态渲染数据(8分钟)
# \+ K, a& _; {! E: J09开发首页-下
, q4 P! Q! @* K$ c) r2 g" E 开发自定义组件(7分钟)
$ P6 p1 V: |" |5 _; A$ X4 { 父组件向自定义组件传入值(6分钟)* H6 j M7 j- D3 [
完成评分自定义组件(22分钟)
+ E: w, l W/ L 视频组件video讲解(9分钟)
9 p9 p4 d. ~7 Z6 `$ @6 {! N 获取预告片数据(3分钟)' I6 a7 s7 a- D; g$ G/ G
动态渲染预告片(10分钟)
% A& e4 z m3 O8 k) @ 猜你喜欢 - flex布局嵌套编写(18分钟)
7 s r- C6 {$ o4 M- r; i 猜你喜欢 - 编写点赞css(7分钟)5 X6 }) \& k2 O8 m$ w2 F+ n
猜你喜欢 - 实现点赞动画效果(14分钟)
' h; Q" _0 x; w' h! V |1 b 猜你喜欢 - 还原动画(5分钟)/ n, w: a0 E; Q3 `
10开发首页-终
% i; P8 E" e! ?) d 猜你喜欢 - 动态渲染列表(6分钟)
& W% R e3 Q2 \) N- C: a5 Q 猜你喜欢 - 实现动画数组(7分钟). j- K. [! v( ^* b: `' P3 e
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
' \1 c6 o0 q, p# m. { 猜你喜欢 - 开启下拉刷新(5分钟)# M+ ?8 u5 Y/ P0 E, H2 m
猜你喜欢 - loading交互api(8分钟)+ S$ m4 L$ }) R0 @; f! ~& y
11构建搜索页-上
7 R" Z: V Z' [2 S$ m 搜索页面 - 编写搜索栏(19分钟)
/ m* w# u1 h$ F: P, L- J 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)3 v2 V* X" u6 v0 K
搜索页面 - 动态获取最新预告并且渲染(9分钟)# y) }7 c' n' s' r8 }' e
搜索页面 - 分页接口api讲解(4分钟)2 E: i: e0 f0 \% R" K; h/ A
搜索页面 - 搜索前置准备(6分钟)
' U! }+ I$ o5 l) E* e 搜索页面 - 执行搜索动态渲染(8分钟)
- M9 u/ h& p) @1 _ j 搜索页面 - 监听下拉实现分页功能(8分钟)
2 m& |/ b: R) d# c 页面路由api与传参(13分钟)6 S) J5 c# h7 k* ^
页面跳转组件的使用(7分钟): k }! [7 u- f- L
详情页 - 查询详情与视频渲染(8分钟)
' s2 @3 l& O4 e1 u' l12构建搜索页-下; @; h% i6 ^4 G, [
构建预告片基本信息(16分钟)! N- ^, b2 g; K3 @0 i
构建评分快与阴影效果(15分钟)( F3 V5 `- K4 m3 f4 M
解决错误数据绑定undefined(5分钟)
& O3 [( l( Q; p! M; [ 编写分割线以及剧情介绍(8分钟)5 a1 l( m& G! p
构建剧照与演职人员数据列表(10分钟)
: A$ }8 R$ X8 X) N" G 渲染剧照列表(8分钟)
! T# M; |& ^5 H3 k6 O 双拼数组构建演职人员列表(12分钟)
! X/ ~, Z* P1 b 渐进式导航栏设置(6分钟)
7 c' S7 g( O2 s/ J" H% f* g3 F 通过预览api实现剧照预览(7分钟)
w5 v. ` `7 v+ ]! m 演职人员数组拼接预览(8分钟)
0 M" J* v8 Y! A) |1 y2 c/ m5 r13电影详情页构建8 U4 S, n% m, n$ x$ X% A0 k9 t
自定义预览封面图(13分钟)
8 m9 p$ p* ~3 ` actionSheet接口api使用(6分钟)' S- w! L! f& F
下载以及保存图片(15分钟)+ y- n, L' Q [5 I1 R
配置https下载合法域名(5分钟)
9 Y. |) y: e8 S5 S! c) Q+ J8 Q 实现小程序中的分享转发功能(9分钟)6 w3 p# {' m' U" t
自定义导航栏按钮(11分钟)
: l. C! U! n1 } 分享到朋友圈(9分钟)- K% H, G6 y" _- d! T
微信开放平台简单介绍(6分钟)
, ]5 s7 [! d, P# M5 T$ G- v 操作视频对象，提高用户体验(8分钟). K" m/ A8 ^5 U" ?# ^: o
优化首页视频体验(13分钟)
6 D, j, \- o$ i14我的页面（上）; q- t/ C; m. S3 Y q! t4 k' o4 U
开发个人页面-header与导航栏设置(9分钟). O$ v1 G/ X, d3 o
发个人页面-用户未登录和已登录的页面展示(9分钟)
) D5 e! q( L9 F# S N, S 构建注册登录页面(8分钟)3 r- z: J) Q8 \: ?4 r; Y
button与form组件讲解(6分钟)
: P5 H, @) t2 E; b& N 实现一键注册登录(12分钟)5 f, I! Q* c: C6 @* @+ A
通过缓存切换是否登录状态(9分钟)
% L; D* ~* i$ |$ e: o5 ?: }5 i 构建用户账号页面(9分钟)5 f' e. x5 y4 O- x
清理所有缓存api(4分钟): o7 O' |3 j0 g) N7 ^' c* F
用户登录错误提示与方法挂载(7分钟)# ~2 I$ h3 Q5 ~3 p9 x/ A# o1 i' X, D
渲染用户信息数据(6分钟): q6 T6 w9 P$ u# ^; P
15我的页面（中）) x1 v. ^! j1 m. Z! c: F
用户退出登录(6分钟)
" Y2 d9 U- B) L1 x6 P 第三方登录讲解与页面构建(16分钟)( u: B X, o/ i' ?3 s7 s
第三方登录-小程序端实现微信登录(15分钟)
/ g4 K5 z* h/ Q/ H8 h2 N 第三方登录-后端登录业务梳理（辅助理解）(10分钟)
. A# P1 I/ b% V; |$ X$ I) ]. n$ e; R 第三方登录-app端授权登录(8分钟): r" X, Q9 x5 l
第三方登录-app端获取用户唯一id及信息(12分钟)6 V t4 b! F9 D/ r6 S' q
第三方登录-app端执行一键注册登录(7分钟). b% ^/ M, Q5 D$ \( a2 u
查看预览用户头像(7分钟)) h% v/ Y- `/ A6 I8 f% ]; |/ M
选择用户头像(11分钟)
+ c0 D/ F! T/ c( N+ v 重新选择头像(3分钟)
( G$ T" J2 k0 j, J" x3 L: P0 X16我的页面（下）
" }$ z8 G* z2 k+ `8 u 文件上传api与后端接口讲解(5分钟)
& A2 ~" W7 B3 e7 J token令牌讲解、实现头像上传(23分钟)) k# B# b/ A# [# p0 l4 K, O
引入图片剪裁实现头像上传(7分钟)
3 P' f3 Y1 m' e) U; U1 Z8 U 用户修改昵称(18分钟)
6 q% n0 D& I- H0 p. Z 用户修改生日(17分钟)) {8 z$ }% y' ?0 K B3 i
用户修改性别(15分钟)) c4 y+ R7 d# c7 v
17项目发布与上线1 [" Z1 s/ |* C+ n
打包H5 web应用(5分钟)# x& P; _, z( R: J! x: Y+ ~1 }
购买云服务与简介(6分钟)
) C1 W+ I" \# l: ]7 I; ~# A$ x1 |# x 配置安全组，重置密码，上传nginx，配置ssh(14分钟), r* H& U+ F: I) K4 @
安装nginx(9分钟)/ J, w4 |: O8 z$ y
成功发布H5端web应用(14分钟). {2 V$ R1 u8 C% X m
微信小程序上传审核流程讲解(8分钟): r: W. e2 A0 [
打包安卓apk(8分钟)
& B% \- v: t8 p0 n 简述ios打包(8分钟)/ N3 U- K( F) z
18课程总结4 w% y' O8 ^. A- k" D/ P& ~2 F' L
课程总结与展望(9分钟)1 ^7 @+ H- q% h* s H
5 c+ j Y' `: T
, P8 u9 y1 {- L6 d3 l4 R
! W6 V4 X Y1 o8 Z' g
|
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
