小程序UI界面之导航组件、媒体组件、地图组件、画布组件详解
小程序组件构建UI界面（3）
Part 1导航组件
小程序可以在页面中设置导航，可以使用navigator页面链接组件，也可以在js文件里设置导航进行页面跳转，同时可以设置导航条标题和显示效果。
1.1navigator页面链接组件
navigator页面链接组件用来在wxml页面实现跳转，它有3种类型：
1）保留当前页跳转、跳转后可以返回当前页，它与wx.navigateTo调整效果是一样的
2）关闭当前页跳转，无法返回当前页，它与wx.redirectTo跳转效果是一样的
3）跳转到底部标签导航指定的页面，它与wx.switchTab跳转效果是一样的
表3J8时tor页面链接组件的属性
属性
类型
默认值
Uli
String
应用内的跳转链接
redirect
Boolean
Else
打开方式为页囹垂定向.对应wRicdircctTo（将被度奔，推荐使用opcnfpc）
o-pcn-typc
Sttint
可选值Rredirect"^switchTab"『对应于
wx.navigalcTo、wx.ncdimctTckwx.wwitchTiih的功能
hover-class,
String
navigator-htivcT
指定单击时的样式类,?Mhovcr-class=Hnonc!，时，没有单击态效果
hoverslart-time
NumbcF
so
按住后多久出睨单击态，单位为墓秒
hgvcr-stay-lim^
导航页源码
Number
6Q0
手指松开后单击态的保留时间.单位为毫秒
1.2wx.navigateTo保留当前页跳转
表3,19nawigateTcs的属（性
属性
类型
必填
说明
:
url
String
是
需要跳转的应用内非t讣4ir的页面的躇芹，痛迳后可以带参数：参数与路怪之间使用分隔，参数健与参数值用,"相逐，不同参数之间用分隔t如|ialh?key=value&key2=va]uc2B，
success
Function
否
接口调用成功的回调函数
FuHetinn
香
接口调用失败的回调函数
complete
Function
否
接口调用结束做回调的散〔调用成功、失败都笳执行）
1.3保留当前页跳转
表工di「里ctT。的属性
类型
必填
期明
ml
String
是
需要跳转的府国内非㈤汨酎的页面的路部.招辞后可以带参数。参数与躇径之间停用"7"分隔，参数便与参数值用相连，不同参数之间」耳'A1分隔，如"pat]i?key-valuC[5Lkcy2=\'a]Ljc2"
success
Funct3oi]i
否
接口调用成功的回调函数
fail
Funcduni
否
接口调用失败的回调函数
compleli:
Funclion
否
接口调用结束的回调函数（调用成功、失败都会执行）
1.4跳转到tabBar页面
wx.switchTab跳转至UtabBar页面，并关闭其他所有非tabBar页面。
表3.21wk"用itchTmb的属性
必填
说明
url
String
是‘‘
需^跳转的tabBar页面的踽径（需在.-Xpp.jsun的labBar字段定义的页面）,路警后不能带参数
SUCCESS
Function
否
接口调用成功的回调函数
「ail
Function
否
搂口调用失败的回调函数
complete
Function
否
接口调用结束的向调函数（调用成功、失败都会执行）
1.5wx.navigateBack返回上一页
wx.navigateBack关闭当前页面，返回上一页或多级页面。可以通过getCurrentPages（获取当前的页面栈，决定需要返回几层。
表3,22胜，n君yifiatsRack的属性
属性
类型
必填
说明
delta
Numtn?T
1
返回的面散!如果加临大于现有页面数1则返回到首页
1.6wx.setNavigationBarTitle(OBJECT)设置导航条
wx.setNavigationBarTitle(OBJECT动态设置当前页面的标题。
^3.23wm.占etNavi即it3的属性
属性
类型
必堪
说明
title
String
是
页面标题
皿JiWt监
Funclioii
否
接口调用成功的回调函数
Jail
Function
否
接口调用失败的回调函数
complete
Function
否
接口调用结束的回调函数t调用成功、失败都会执行）
Part 2媒体组件
2.1audio音频
audio音频组件需要有唯一的id,根据id使用wx.createAudioContext('myAudio')创建音频播放的环境，src属性是音频播放的资源路径，poster属性是音频的播放图片，name属性为音频名称，绑定播放、暂停播等事件。
表3,24自比2音频的属性
产.同性
类型1
默以值
说明
id
String
vider组件的唯一标识符
--Ik
String
要播放音频的资源地址
loop
Boolean
false
是否循环播放
canuuls
BooJeaii
Ciuc
是否显示歌认控件
pester
String
恭认控件上的音频封面的图片资源地址，如果属性值为false则设胃poster无效
name
String
未知音频
熟认拴件上的音板名字.如果luhItoN属性僚为fake则设置name无效
author
Siring
未知作者
默认料件上的作者名字，如果rontruls属性值为false则设满author无效
binderror
EvcntHnndle
当发牛错漫时触发error事件，detail=|crrMs^：
McdiaEironcodic}
bindplny
FventHandk
当开蛤/■继续福放时触，发口值¥事件
bindpuuse
EvculHandlE
当替停播放时触发pause事件
bindiimeupdaile
EveiitHandle
当播放进度改变时触发tifficupdaie事件，detail=
-currentJimc.durau^n；
bind6Hded
Eveiiiihndlc
当播放到束尾只触发ended事件
表3.25错误码
错误码
说明
MEDIAERRABORTED
获取流源被用户禁止
MEDIAERRNBBVORD
网络错误
MED1AERRDECODP
解码错误
MiDlA_E：kk_SRC_NOT_SLPI<iKRrFb
J不合适资源
2.2image图片
image图片组件有两类展现模式：
一类是缩放模式，在缩放模式里包括4种方式；一类是裁剪模式，在剪裁模式里包括9种方式
表I26image图片的属性
属性
类型
默认值
说明
5FC
1
StrinE
■
图片资源地址
mode
Slrinfi
s^leToriir
图片新英、缩放的模式
binderrer
HandleEvciil
当错误发生时勺发布到AppSuvicc的事件名，事件对象cvcnl.Lkiail={urrMig;\omelhingwro阴'}
bindload
HandleEvent
当图片载入完毕时，发布到AppServiH的事件名।事件对象以恒1.加面1-1h(?ij0tq图片高度px：width/图计宽度M1|
通过旧力盘属性来设置4种缩放模式，如表3,打斫小“
表3.274种缩放模式
模式
不保持辕横比储放图片，使图片的宽高完全拉伸至填满加前型元素
保持纵横比瑞旗圈片T使图片的长边能亮全显示出来。也就是说，可以兜按地将朝片显示出来
I保持纵横匕缩放图片，艮保证图片的短边能完仝显示出来口也就是说,图片通常只在水平或垂音方向是完整的，另一个方向将会发生戳取
通过mock属性来设置9稗裁翦摸式.如表3N8所示.
表3一289种裁剪模式
模式
说明
top
不缩放图片।只显示图片的顶部区域
bottoni
不缩放图片，只显示图片的底部区域
center
不缩放图片，只显示图片的中间区域
left
不能放图片，只显示图片的左边区域
right
不缩放图片，只显示图片的右边区域
topleft
不缩放图片，只显示图片的左上边区域
lopright
不缩放图片，只显示图片的古上边区域
hottornleft
不缩放图片，只显示图片的左下边区域
bottomright
不需放图片।只显示图片的右下边区域
2.3video视频
video视频组件是用来播放视频的组件，这个组件可以控制是否显示默认播放控件（播放/暂停按钮、播放进度、时间），还可以发送弹幕信息等，video组件默认宽度为300Px、高度为225Px，设置宽高需要通过wxss设置width和height。
表3."Yickc■视频的属性
雇性
类型
疗认值
谢明
src
String
要播放视频的资源地址
controls
Boolean
true
星否显示默认福第控件,播放，'笆停按钮、播放法度、时间：
Object
Array
弹幕到来
dainmu-btn
Boolean
false
是否显示弹幕按钮，只在初始化时有效，不能动态变更
cn^bk-dariiTLU
Boulean
自Ise
是否展示押幕.只在初始化时有效，不能动态变更
MLilophy
Boolean
false
是否自过播故
bindplay
EventHandlE
当开始，继续播放时触发pl个事件
bindpaii^e
EvcniHandle
当暂停播放时触发pau髭事件
binden出d
EventHandk
当播放至1末尾时触发end前事件
biiidhmcupdate
EventndIt
播放进度变化时聃发，cvenrdetat]--：currentTime:'当前播放时间'｝由触发频率应该在25mls/次
objectFit
Siring
contain
当视频大小与video容第大小不一致时视频的表现形式◎ciiiiuiiit包含।fill填充，cover覆盖
2.4camera相机
camera相机组件在使用的时候需要用户授权scope.camera，它是由客户端创建的原生组件，它的层级是最高的，不能通过z-index控制层级，可使用cover-view、cover-image覆盖在上面，同一页面只能插入一个camera组件，不能在scroll-view、swiper、picker-view、movabel-view中使用camera组件。
camera相机组件属性
device
String
Back
前置或后置，值为front、back
flash
String
Auto
闪光灯，值为auto、on、off
bindstop
EvenHandle
摄像灯在非正常终止时触发，如退出后台等情况
binderror
EvenHandle
用户不允许使用摄像头时触发

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。