|
|
uni-app是MVVM框架，所以我们会对MVVM思想做简单的介绍，随后通过一个示例来阐述MVVM与数据的双向绑定。那么在示例中我们会讲解页面路由、基本配置、生命周期、响应式像素upx、{{}}表达式、vue指令与数据绑定、事件、条件判断以及for循环列表渲染。
8 Z8 k3 E$ q: }课程目录：
7 s* h, m! D1 R) R+ e01导学& h3 D0 h" g. k6 O" i& h1 j: B" ?. q
导学(12分钟) . k) |" c: w# `; M
学前必看！补充课：接口调用参数补充(6分钟)( j2 Y1 T; F4 ^7 `2 V" l, ]
基础框架NextHelloWorld(rar，513.7KB); c5 D% k; s9 E
超英预告最新源码(rar，8.7MB)
* d# S# m5 c7 m2 r+ Q1 X3 g/ I linux工具与ngxin安装(rar，37.3MB)- ~: G6 D/ n. E$ Z
logo素材制作(rar，730.3KB)
1 f D% `! |; Y2 i0 n% c3 y02课程介绍. ]+ o& b0 N: G: o
什么是 uni-app(4分钟)
( v# D/ [. H V2 q. P9 N O 为什么要使用 uni-app(8分钟): @8 I; Y$ d7 G4 m+ G5 F& Z4 j) G2 h
app多端发布效果展示(7分钟)
: Q1 X2 b$ u( d% n, O 使用HbuilderX在ios、安卓、H5进行真机调试(14分钟)# b) w4 J0 `' }* |$ B8 k* \
微信、支付宝小程序开发工具调试(7分钟)" e7 u& s; K0 f7 K0 \
在Mac上使用Simulator进行调试(5分钟)
. R# C9 S% k% H' z0 J03框架基础-上
6 p( j8 q( c/ F$ H" p, `5 I 简述MVC模式(9分钟)
* f2 S9 t. r6 ^0 f6 M3 y 图说MVVM模式(5分钟)0 C7 [+ e* F0 ~8 D: a( Z
通过代码阐述MVVM与双向绑定(12分钟)6 V8 f0 X& ^- f
JSON对象和数组的渲染(4分钟)
4 j5 S4 d% }8 ? _# v! I9 z; n4 Y 页面路由以及标题配置(11分钟)
/ x/ W8 `4 r; R5 V# N1 x; } 宏观讲解项目配置文件(16分钟)
2 `( r) ?7 E8 `2 ]' ^4 f: s 应用的生命周期(11分钟)
" Q0 Z0 G0 H5 M( ^8 c 页面的生命周期(14分钟)+ I! h* a+ T5 G/ S: U6 Z
固定像素px与响应式像素upx(12分钟)9 A; z6 ^% d* i# r2 R
在页面里使用{{}}表达式(7分钟)# n: N& y6 y1 F
04框架基础-下
7 U. B- H% R+ Z v-bind指令对属性的数据绑定(7分钟)
3 v6 C. E$ P5 r 事件基础(22分钟)
) \4 V V( d% ?* p. W7 ], ~1 G2 I 条件渲染 v-if与v-show(7分钟)- a1 @: j9 o, Y r' u
条件渲染 三元运算(4分钟)
( X, Q1 `' x9 r/ L, Q3 F3 J: f, c 列表渲染v-for的使用(13分钟)
$ @& ~" Y. f7 U# n1 A9 a% j 指令key实现for循环的组件唯一性(12分钟)% ?9 H O0 n2 R- K3 s; j
嵌套循环的下标定义(4分钟)# o! x9 p4 R+ |8 P0 ~: {2 j
条件编译 - 上(10分钟)
/ \6 N0 i. T- E0 @% Y 条件编译 - 下(7分钟). {, _" M4 a& H. c9 H+ u
05样式与flex布局-上
; E& ?) U, H$ W- s+ v( J# T$ l* n flex布局介绍与模型(8分钟)
! v L! [* s$ d( h g flex-direction 元素的排列4种方向(10分钟)
[9 B1 R Q: a0 Q0 H 导入外部css样式(4分钟)
+ _0 O1 x; M" ?6 q1 h flex-wrap 元素的换行(12分钟)
0 A$ D S4 G4 q) y D" M5 b justify-content 元素在主轴的对齐方式(14分钟)
3 Y+ N l$ q( E4 y1 _2 t& q align-items 元素在交叉轴的对齐方式(12分钟)
8 A: A8 ]# D% G& M, z8 V1 k06样式与flex布局-下
S+ c" Z3 N W, @5 A) T align-content 多轴线的对齐方式(13分钟)
a0 c/ L; a5 |6 q flex成员项的属性 - order(4分钟)
- C+ C c2 [% r/ l4 a flex成员项的属性 - flex-grow(4分钟)6 a0 w: Z# T% \
flex成员项的属性 - flex-shrink(6分钟)0 k1 i. W6 S: S* z
flex成员项的属性 - flex-basis(4分钟)
( q' b6 B( t( s0 H J2 D; f5 Y flex成员项的属性 - align-self(6分钟), H( @ d# P6 [# n
07开发首页-上% n! @! a2 ~) [
创建项目，构建基础页面(8分钟) 免费试学0 F# q/ J# _# n2 w# ?
构建tabbar(13分钟) 免费试学. ^4 Z& i$ e& a
设置全局page，简述view组件(6分钟) 免费试学% n3 q7 K* B3 i9 t+ y* m
使用轮播图组件(11分钟) 免费试学
K- R3 V1 o6 z! Y% k" F 禁用原生导航栏达到页面全屏化(6分钟) 免费试学 d& }* f! y! I0 f# o$ _" w
在线文档的使用(8分钟) 免费试学& |. h( ^4 A/ Z0 P. ~
request网络请求api讲解(5分钟)
4 C! {9 F7 f6 x! ]0 B6 b; Q uni.request动态获得轮播图数据(9分钟)- E. Q% b4 d; Z
箭头函数 this 作用域(4分钟)
$ [" @! V& v7 `: ]4 r0 z 渲染并且展示轮播图(5分钟)- _* x+ z$ |! Y3 x! \
08开发首页-中! s; [" `" } \/ f) J
引入组件实现全局变量(7分钟); H6 a! Q! n+ P1 O
使用挂载实现全局变量(4分钟)
3 T3 C b% `; d" `) W) J1 d 在手机端进行微信小程序真机预览(6分钟)$ I$ \1 o0 h+ [) s
微信小程序https使用事项(7分钟)
- p$ D2 @) Y7 @! a 开发热门超英 - 标题(9分钟)1 v7 f! t$ @! Q% S9 u0 o# n0 ~4 A
开发热门超英 - 简述scroll-view(4分钟)' c V, _! O# E% D1 v' L U7 C! W
开发热门超英-使用scroll-view实现横向滚动(3分钟)
6 U$ B& w' j: }2 e( S8 ~ 开发热门超英 - 海报与标题(8分钟)7 ^! f% w9 @. ]: _0 n; f
开发热门超英 - 评分(6分钟)# M, z( }# Y, |5 j, ~2 n$ ^
开发热门超英 - 动态渲染数据(8分钟)
4 t+ H. q Y z! e. B" H, ]09开发首页-下
9 [* P" \- D3 d( a' S' a7 D 开发自定义组件(7分钟)2 H: R3 U. ?& {/ ~3 ?
父组件向自定义组件传入值(6分钟). s, J+ D8 o& D) d$ n
完成评分自定义组件(22分钟); y" |; }$ x6 Y; j$ ?- w8 g
视频组件video讲解(9分钟)! ~- I1 e1 V& q9 S" d# |2 K, E
获取预告片数据(3分钟)
" T, l+ F! \( s& U! |6 B 动态渲染预告片(10分钟)
! U4 J0 x2 U& y 猜你喜欢 - flex布局嵌套编写(18分钟)2 U- i" h: I6 v7 A: d
猜你喜欢 - 编写点赞css(7分钟)% G5 a- `5 m+ n3 [% K) h# ^6 V
猜你喜欢 - 实现点赞动画效果(14分钟)
6 e# n& ~0 S8 ]2 _9 Q6 r 猜你喜欢 - 还原动画(5分钟)" E. k0 [: `) R; W; L
10开发首页-终
l# L" J: |2 K 猜你喜欢 - 动态渲染列表(6分钟)
9 O7 r8 [1 s' P- j |9 s; G 猜你喜欢 - 实现动画数组(7分钟)) K5 k* L1 r: Z Y+ C
猜你喜欢 - 条件编译解决动画跨端兼容问题(4分钟)
0 l2 S9 L Y+ R 猜你喜欢 - 开启下拉刷新(5分钟); V$ ^: H- p# f9 y
猜你喜欢 - loading交互api(8分钟)
+ g- l$ R# ]) D# f9 [2 F11构建搜索页-上6 T+ u7 ]0 C/ {' Q" b$ X/ {
搜索页面 - 编写搜索栏(19分钟)' m! ?+ T. K' q7 D, g
搜索页面 - 编写预告片列表、搜索栏置顶(9分钟)
& g; H3 ]# y( J) ] 搜索页面 - 动态获取最新预告并且渲染(9分钟)5 Y, b) q1 ~% ^, w3 \5 w
搜索页面 - 分页接口api讲解(4分钟)+ |- T5 K3 J! }) D) n' H
搜索页面 - 搜索前置准备(6分钟)
) q% U" c. |, O \0 N# G 搜索页面 - 执行搜索动态渲染(8分钟)7 @/ K- C& C" m% f" M5 ]/ n# H
搜索页面 - 监听下拉实现分页功能(8分钟)
2 R/ o% k" x7 o& D! Q. v 页面路由api与传参(13分钟)& _" C* n3 f) W b9 @, X2 u
页面跳转组件的使用(7分钟)
7 D3 V9 g" v; O3 G( H e4 A$ m8 c2 j 详情页 - 查询详情与视频渲染(8分钟)) F& X7 _) C( d8 I7 b
12构建搜索页-下, m/ ]+ Z: m3 x0 U! u
构建预告片基本信息(16分钟)
2 _3 ?: M2 d' ]2 q7 y0 j 构建评分快与阴影效果(15分钟)
$ Q5 l1 N4 C6 K: e 解决错误数据绑定undefined(5分钟)
, }2 v+ V. x: I. [, k 编写分割线以及剧情介绍(8分钟)1 x" y+ j. Y% [
构建剧照与演职人员数据列表(10分钟)
: v$ \2 @* A. a- H 渲染剧照列表(8分钟); U9 ^1 t- o) ]; H: @ ]& o, D# `
双拼数组构建演职人员列表(12分钟)
* E5 B {; z) F" M) q6 ] 渐进式导航栏设置(6分钟)8 v `0 w7 ~5 l
通过预览api实现剧照预览(7分钟)
* O# X* T5 _. |+ q7 n# [) {- K 演职人员数组拼接预览(8分钟)
" V( N4 s9 Z- R$ l, G13电影详情页构建$ G; b! |" g! I" r
自定义预览封面图(13分钟): \% ?6 I* \, E0 `+ A* @
actionSheet接口api使用(6分钟)
& s- \( b# ^2 q' m 下载以及保存图片(15分钟). e8 X+ |8 u* S7 I. b0 Q
配置https下载合法域名(5分钟)
; z# y" Y- V N6 I. E0 s 实现小程序中的分享转发功能(9分钟)
7 d% T$ `& s1 F) d- K6 _8 r 自定义导航栏按钮(11分钟)$ T4 G" }" l8 a% } w6 ^
分享到朋友圈(9分钟)
) R4 m' Q! {6 _& q, I& L0 K 微信开放平台简单介绍(6分钟); ^# _1 q$ j* V5 T
操作视频对象，提高用户体验(8分钟)) e" X9 e: P. z& Z' M
优化首页视频体验(13分钟)
6 Q2 | J- k# k+ P# g4 }- O14我的页面（上）# `, G+ n& ?6 P% |/ A$ y+ f
开发个人页面-header与导航栏设置(9分钟)
/ d) P, X8 O6 J3 w7 ^4 |; b 发个人页面-用户未登录和已登录的页面展示(9分钟)
9 M3 ?2 F6 Z! K2 S4 d6 ^6 q 构建注册登录页面(8分钟)
' {$ h) |1 h5 g; H9 s0 X5 a7 H9 X button与form组件讲解(6分钟)9 N* R- v0 i( C
实现一键注册登录(12分钟), @5 b( [# `/ r8 m$ j
通过缓存切换是否登录状态(9分钟)
: S: e3 L& A8 {, D A 构建用户账号页面(9分钟)+ Z8 m |# u4 q& j: C5 C3 x) v9 y8 a
清理所有缓存api(4分钟)
! s7 z$ P! c8 P" z. N2 J0 {9 m 用户登录错误提示与方法挂载(7分钟); y8 C& s+ g; X9 A, k6 D" Q- ^
渲染用户信息数据(6分钟)7 v/ [( I O) m% \, x
15我的页面（中）: P* j# G1 P% f% V [" X
用户退出登录(6分钟) k9 J) |7 Z/ X0 f# |
第三方登录讲解与页面构建(16分钟)
% D y8 [3 e$ C- ? 第三方登录-小程序端实现微信登录(15分钟)
& n3 K+ \3 b; i. f* p& W0 M* M% v 第三方登录-后端登录业务梳理（辅助理解）(10分钟)& a2 K$ p7 p3 G1 v3 a/ d& f: v
第三方登录-app端授权登录(8分钟)
0 p1 J9 `1 f: ^& B5 s% M" ~ 第三方登录-app端获取用户唯一id及信息(12分钟)
) T0 ?/ r" s3 I, I' j7 w 第三方登录-app端执行一键注册登录(7分钟)9 M( Y5 L3 [ D; o1 f" v
查看预览用户头像(7分钟)5 j# V: I, r& M9 C3 W s
选择用户头像(11分钟)- J O& j3 e+ r/ z0 |% j$ [: V
重新选择头像(3分钟)3 b! M& ?! ?& ^- ?7 @7 A }
16我的页面（下）/ x9 Z2 N( Z1 X9 t( ^; ], y( o0 [
文件上传api与后端接口讲解(5分钟)
2 `) a0 B0 a- |7 S7 Q+ f9 v9 n token令牌讲解、实现头像上传(23分钟)
$ d& A- a8 R. P; X! V: j/ \! h( e! E$ W 引入图片剪裁实现头像上传(7分钟)5 M* R' H8 ^$ m, g& `% w2 c
用户修改昵称(18分钟)0 p' A% i& J5 W# k1 c' y' e
用户修改生日(17分钟)7 a; E3 B1 E' U8 P) j
用户修改性别(15分钟)4 a& X+ k* p. x' N; _0 D
17项目发布与上线5 P1 l9 S9 @1 J# E
打包H5 web应用(5分钟)6 g- [" i4 q' `" ~4 }
购买云服务与简介(6分钟)6 H+ m q+ a, y9 `! ]& r
配置安全组，重置密码，上传nginx，配置ssh(14分钟)* h, @7 ?! `/ w( O6 X: U8 n
安装nginx(9分钟)
5 M/ @% j ^* ]' L+ O1 C* h 成功发布H5端web应用(14分钟)/ i U; T: }) L8 U: ]
微信小程序上传审核流程讲解(8分钟)9 }# L- d( \2 F8 ^+ B
打包安卓apk(8分钟)# g+ N2 o9 H+ m. z+ Q
简述ios打包(8分钟), Z& p) R% X/ |% R" C
18课程总结
4 k( Q$ B5 v+ ]" P V+ T 课程总结与展望(9分钟)
* ^" V6 r) K, c8 n9 t6 ]$ \ Z8 {
8 l9 p7 N# l% d) }
. n. L/ l; T# d1 l+ _ |
|
|手机版|小黑屋|paopaomj.COM
( 
渝ICP备18007172号|
渝公网安备50010502503914号 )
发表于 2019-12-10 09:48:24
