|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。. ?& h4 z# I. y
课程目录：2 Y. ]" V* d0 Q4 L( D
01导学
. z6 [- N N9 |5 s7 q% J8 j 导学(12分钟) 3 L. L9 g+ n: {4 {
学前必看！补充课：接口调用参数补充(6分钟), U* [4 N! E# q% U9 L
基础框架NextHelloWorld(rar，513.7KB): o6 x; L# P9 q' |
超英预告最新源码(rar，8.7MB)
; }6 T$ v! Q/ Q; K* B6 a0 M linux工具与ngxin安装(rar，37.3MB)
$ m% ] a4 z" R; l8 E( z' F logo素材制作(rar，730.3KB)! h; x. u* [' ?9 n* n, i# f" p
02课程介绍2 o/ v7 {8 l2 N' o: e6 g$ A
什么是 uni-app(4分钟)+ P; C$ K$ a: c; S" | Q
为什么要使用 uni-app(8分钟)
+ j4 @. w+ U7 ~7 ?" e z a1 I app多端发布效果展示(7分钟)
3 S; s2 }1 T# J: d+ D' c { 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)
. E+ X: ~: F$ `! V: a* a2 F+ D3 g; |( ~ 微信、支付宝小程序开发工具调试(7分钟): C& h: }$ O! o1 t- g
在Mac上使用Simulator进行调试(5分钟)
: _. |5 I! ^5 S2 Y! u# k6 R; H03框架基础-上! ?0 I1 Y- t* g. ]. Z0 Q
简述MVC模式(9分钟)% J, \2 N5 P1 Q; P0 Y, F( C$ C# H4 U
图说MVVM模式(5分钟)
0 k5 K# I& e/ t" \2 o 通过代码阐述MVVM与双向绑定(12分钟)
5 p% D2 g5 n/ ?+ h2 `5 A JSON对象和数组的渲染(4分钟)& U" K9 J& g( `$ W& H3 `# o) W2 `7 l
页面路由以及标题配置(11分钟)! \; e) G) ?3 v* H) @0 I, y4 B
宏观讲解项目配置文件(16分钟)
2 B- }$ Q, v2 d, z$ f) m. }+ T2 @2 k# S 应用的生命周期(11分钟); S: U4 ?3 b5 j7 R, Z
页面的生命周期(14分钟)
& d, j/ g! @) ~. _ 固定像素px与响应式像素upx(12分钟)) A6 q* @; \4 j/ ]1 d
在页面里使用{{}}表达式(7分钟)
' |- Y$ y6 D# U. F6 F04框架基础-下
2 x0 p* i1 |. q" ?2 \" i3 H+ o, ] v-bind指令对属性的数据绑定(7分钟)) J' E: `+ P9 |* n8 R
事件基础(22分钟)
; J2 Q; e @& y( A0 k1 T% _% m 条件渲染 v-if与v-show(7分钟)
, x) O$ d# N' c& p1 ?8 o 条件渲染 三元运算(4分钟)
4 |! m$ T; h6 u+ s7 P 列表渲染v-for的使用(13分钟). ^6 G% x) O. Y7 b/ y( [! I
指令key实现for循环的组件唯一性(12分钟)
2 k5 i2 h. g0 P: J. |" H 嵌套循环的下标定义(4分钟)( f$ a7 H" Y$ D; g" H$ X, k9 H
条件编译 - 上(10分钟)4 a; g; o1 e5 |/ y9 X" Y+ s6 S9 h
条件编译 - 下(7分钟)
5 z$ V: i) e& k! e' p05样式与flex布局-上
1 |1 g% o+ ^, O U8 x3 s flex布局介绍与模型(8分钟)
& {5 l7 U6 P% x6 I flex-direction 元素的排列4种方向(10分钟)
# @* C$ f; f* X3 i, _$ J. | 导入外部css样式(4分钟)+ }3 _0 I2 ]" e. X0 \
flex-wrap 元素的换行(12分钟)
5 ~; z. L* o/ U0 x* ~. y% ~ justify-content 元素在主轴的对齐方式(14分钟)5 @& f/ d/ j5 o/ H3 ^
align-items 元素在交叉轴的对齐方式(12分钟)
! x4 I& V* J, A) c7 @" r06样式与flex布局-下
: }( S, _) ]/ s; i w align-content 多轴线的对齐方式(13分钟)4 g: A) u2 y' r5 q2 A
flex成员项的属性 - order(4分钟)/ K0 G D, v2 ^0 p! q, S# v5 J+ s) B
flex成员项的属性 - flex-grow(4分钟)
% q Q" P4 D* D Z. t flex成员项的属性 - flex-shrink(6分钟)" V+ a R$ k" Y" H/ p
flex成员项的属性 - flex-basis(4分钟)$ s8 Y# g2 J) Z. Q% L
flex成员项的属性 - align-self(6分钟)
( Y' Q& m, I1 F6 V& g/ I1 T# e+ F6 E07开发首页-上; X/ b9 O$ G! `$ P) t
创建项目，构建基础页面(8分钟) 免费试学
0 m a9 r8 e5 T 构建tabbar(13分钟) 免费试学
6 ?; I9 n4 n) l( O# n/ q 设置全局page，简述view组件(6分钟) 免费试学( F$ J* c' A7 K, d" ]% G
使用轮播图组件(11分钟) 免费试学" @! j1 A! N1 O& g3 w
禁用原生导航栏达到页面全屏化(6分钟) 免费试学
D5 w9 ~; x' j0 N$ K+ o U( m8 Z 在线文档的使用(8分钟) 免费试学: |$ @3 V6 S# b8 K7 d
request网络请求api讲解(5分钟)
9 q5 p+ e7 e3 p7 e3 P uni.request动态获得轮播图数据(9分钟)
@; ?! V' @7 v8 } 箭头函数 this 作用域(4分钟)0 U: Q1 i+ d; |# H8 N* v
渲染并且展示轮播图(5分钟)
- q! b6 C" y8 H2 x6 _08开发首页-中
: i( ]5 L _$ i" p 引入组件实现全局变量(7分钟)) ?$ z) ^, w, f; [, _
使用挂载实现全局变量(4分钟)
' b7 ~5 z$ c5 Y) e1 m/ U 在手机端进行微信小程序真机预览(6分钟)
) B2 V& @# L7 {0 N! ]+ Z 微信小程序https使用事项(7分钟)& T3 w4 W4 x$ f9 d) e* p' j% k
开发热门超英 - 标题(9分钟)
5 d! |/ @7 }+ a& S- m* \0 z5 C 开发热门超英 - 简述scroll-view(4分钟); d$ _# h/ W+ p5 o: Q; ?- i' v
开发热门超英-使用scroll-view实现横向滚动(3分钟)( y2 P! G. @5 l1 d; I
开发热门超英 - 海报与标题(8分钟)7 r/ c# k! x9 G w
开发热门超英 - 评分(6分钟)1 L: c$ M+ O- v0 x' U
开发热门超英 - 动态渲染数据(8分钟)
9 q; k2 L9 F! t5 y( `- [. B09开发首页-下6 { z2 W6 }$ K9 x
开发自定义组件(7分钟)
! E1 o- l# z) W1 N6 [ O; W9 x; L 父组件向自定义组件传入值(6分钟)
$ i3 M8 w6 `1 [ 完成评分自定义组件(22分钟)
' p& y% S9 @6 i/ t0 r( X 视频组件video讲解(9分钟)
: o" {& ]6 [, g 获取预告片数据(3分钟)
; m- Y+ s/ K5 {9 Q 动态渲染预告片(10分钟)8 q [& B& v7 C3 o$ o, K9 p
猜你喜欢 - flex布局嵌套编写(18分钟)
+ y* L7 B7 N( y# O2 J/ z% \ 猜你喜欢 - 编写点赞css(7分钟)
, d. R& f7 [1 g, H0 a' d 猜你喜欢 - 实现点赞动画效果(14分钟)
5 W; Q' P2 E( P9 ? 猜你喜欢 - 还原动画(5分钟)% M0 p+ H, z' A( G2 D+ d
10开发首页-终
+ ^9 y, `5 c! v 猜你喜欢 - 动态渲染列表(6分钟)
) y# d3 ^( k, l# d, i; h 猜你喜欢 - 实现动画数组(7分钟); z7 v0 d( I* l( G( W! o
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)4 n! _) h: X+ l, [. i$ \. {% n9 z
猜你喜欢 - 开启下拉刷新(5分钟), h# A, r& {( |; z; _4 A
猜你喜欢 - loading交互api(8分钟)2 g) c# h; `) T: D, W' b
11构建搜索页-上
! y! \+ y' ~6 T& e- r2 W7 z% B: c 搜索页面 - 编写搜索栏(19分钟)
, n5 ~( H* Y0 j3 u, c 搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
' O# I, e# \+ [( {! H 搜索页面 - 动态获取最新预告并且渲染(9分钟)" Q& i# x, W) c* F
搜索页面 - 分页接口api讲解(4分钟)
6 R P/ G: G, `1 E1 A 搜索页面 - 搜索前置准备(6分钟)
, ^* z# A% W+ ~% y- { 搜索页面 - 执行搜索动态渲染(8分钟)
0 g4 [6 y& Z& V* y/ f. S 搜索页面 - 监听下拉实现分页功能(8分钟)
) s0 B; `- h/ g 页面路由api与传参(13分钟)
9 Z2 K8 }! N3 _( a4 p 页面跳转组件的使用(7分钟)
4 G1 g, g1 t4 O* `- c1 U 详情页 - 查询详情与视频渲染(8分钟); w& x+ u' a+ j/ K1 r
12构建搜索页-下
! ^7 `9 m N, a 构建预告片基本信息(16分钟)3 `* s% A- F" r; n
构建评分快与阴影效果(15分钟)( m$ H* s" o6 W" q8 O7 R; W
解决错误数据绑定undefined(5分钟)8 d/ o: r! c# D$ e, k
编写分割线以及剧情介绍(8分钟)2 O7 b; {; r, S/ d& Y
构建剧照与演职人员数据列表(10分钟): G, y; m1 ` d" i9 e) h
渲染剧照列表(8分钟)5 b. C: g5 j) b
双拼数组构建演职人员列表(12分钟)
5 }0 N b" A; D8 |; @) K 渐进式导航栏设置(6分钟)
/ t1 t6 [, p8 Z% ?( \+ \ 通过预览api实现剧照预览(7分钟)% `; O1 R8 [; C( a; }1 }! a4 N S
演职人员数组拼接预览(8分钟)9 ~) w/ Z( }5 l
13电影详情页构建1 M, {" N' L# G+ V/ e
自定义预览封面图(13分钟)3 {) m1 Y% B/ I
actionSheet接口api使用(6分钟)
7 B5 _# d2 Z9 T; ^0 |$ d 下载以及保存图片(15分钟)
' {! t6 }* i# y; h" G0 H 配置https下载合法域名(5分钟)4 O* M# X1 B" M3 F) U
实现小程序中的分享转发功能(9分钟)6 Q* Z) H# G# w3 Z n
自定义导航栏按钮(11分钟)
* p) l X! K3 b" ?( b$ n 分享到朋友圈(9分钟)
% ?/ | b. c# K8 f/ c; G( C 微信开放平台简单介绍(6分钟)/ [7 z, m/ E2 Z, A
操作视频对象，提高用户体验(8分钟)
: V( f3 R, {$ P# {. q; \ U 优化首页视频体验(13分钟)
3 E" I" _6 r6 T7 x8 h14我的页面（上）3 b3 T4 p! P1 ], Z- \0 J
开发个人页面-header与导航栏设置(9分钟)3 C" T8 g6 |$ W4 @
发个人页面-用户未登录和已登录的页面展示(9分钟), O0 ]' v2 B! J8 Y- k
构建注册登录页面(8分钟)! d1 y n; X' R0 t) @" s
button与form组件讲解(6分钟)0 ]; j: z W8 O
实现一键注册登录(12分钟), [7 X g1 U6 O H l& S% @
通过缓存切换是否登录状态(9分钟); ^: g. Y0 k: P$ N' I% ~
构建用户账号页面(9分钟)1 B" O& A7 ~: b# F
清理所有缓存api(4分钟)! Y: a: @3 K- [7 N! O9 `. C
用户登录错误提示与方法挂载(7分钟)
/ F( t5 d# c9 W# J 渲染用户信息数据(6分钟)/ P. C; {: ^9 f' s( A( I8 u7 K
15我的页面（中）
, T& Q/ l$ A: t# Z3 c; J2 k 用户退出登录(6分钟)* f t2 ]4 t1 B a3 x9 g: h: O7 A' u
第三方登录讲解与页面构建(16分钟)
% [! i0 Q1 t$ M/ x9 V3 K/ N0 W 第三方登录-小程序端实现微信登录(15分钟)2 f( D, A$ k" e* L
第三方登录-后端登录业务梳理（辅助理解）(10分钟)
% L6 u# g7 S: p1 A% o! ~& K 第三方登录-app端授权登录(8分钟)
& @2 T! B) ^6 q 第三方登录-app端获取用户唯一id及信息(12分钟)5 K; N* W- b# V' ^0 V4 x1 w2 b; {
第三方登录-app端执行一键注册登录(7分钟)
; p- v3 H o0 S$ z. I 查看预览用户头像(7分钟)
1 o S- O0 Y* L. I9 r 选择用户头像(11分钟)
! G, A; E4 T$ t- ^: b 重新选择头像(3分钟)2 R q4 P$ r- c' Y. f5 V+ ]
16我的页面（下）
- o0 G! u" {( M0 E! t 文件上传api与后端接口讲解(5分钟)
# S R+ `+ i9 ~8 R! w token令牌讲解、实现头像上传(23分钟)( | ` p8 C% Z; M2 V7 u/ {. d
引入图片剪裁实现头像上传(7分钟)
B: W2 N( W. E! i8 W0 R 用户修改昵称(18分钟)
( ?4 y7 e1 N4 n2 x1 C 用户修改生日(17分钟)
. l' t4 E+ X/ u 用户修改性别(15分钟): e) b2 h; ~ u8 L5 W% v
17项目发布与上线
7 f+ b% X) v7 k3 F3 o$ q! ^4 R0 c ~ 打包H5 web应用(5分钟)
" ?2 }; q, D; X 购买云服务与简介(6分钟). _) C( i% K# R. z- P }
配置安全组，重置密码，上传nginx，配置ssh(14分钟)$ A) s5 C$ Z6 W
安装nginx(9分钟)4 d2 p+ @6 {- m* z
成功发布H5端web应用(14分钟)7 E- `. e S' r
微信小程序上传审核流程讲解(8分钟)
. [+ j% d, q. d" S8 t& B- M6 Y9 U 打包安卓apk(8分钟)
6 N8 s$ \3 U& U/ V( g 简述ios打包(8分钟)
1 l$ x4 s$ k) Y- G, w( S18课程总结( D2 ~& @7 Q! ^& o2 y3 n+ k
课程总结与展望(9分钟); r; z$ v- u g5 Y- y
" K4 w7 M: R, I8 Y* m* e
% ~8 e0 _4 g% v1 V' c
" [2 Q: v! r/ w6 I1 G }9 x |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
