微信小程序UI界面之导航组件、媒体组件、地图组件、画布组件详解

1、微信小程序UI界面之导航组件、媒体组件、地图组件、画布组件详解微信小程序组件构建UI界面(3)Part1导航组件微信小程序可以在页面中设置导航，可以使用navigator页面链接组件，也可以在js文件里设置导航进行页面跳转，同时可以设置导航条标题和显示效果。1.1navigator页面链接组件navigator页面链接组件用来在wxml页面实现跳转，它有3种类型：1) 保留当前页跳转、跳转后可以返回当前页，它与wx.navigateTo调整效果是一样的2) 关闭当前页跳转，无法返回当前页，它与wx.redirectTo跳转效果是一样的3) 跳转到底部标签导航指定的页面，它与wx.switchT

2、ab跳转效果是一样的属性类型默认值说明urlString应用内的跳转链愎redirectBcMjIeanialc打开方式为页面奉定向，对府wx.rcdircctTn(将被虎弃，推荐使用upenfjw1upcn-IypcString可选值navigateredirect*switchlab*,对应于wsiiavigateTowx.redirectTo,”储witdhTm的功能hovcurlasiiString指定屋市时的样式美，当nonir时,没有单击态效果txivcrsliirtlitiu?Number50按住后多久出睨单击态，单位为蠹杪Number500手指松开后单击有的保留时间，单位为春秒

3、衰3.Evigator页面彼接组件的属性1.2 wx.navigateT哪留当前页跳转表3,19navi髀tvTq的属性属性类型必填说明SiringJe要跳的应用内非tahRnr的页面的路得.路杼后可以常参Q参数与路径之间使用分隔等数值与等数值用相连,不同参数之帕用反分隔中如.path/keyvalucitk亡#2一、也1呢2Funciion否接口调用成功的回调函数Funciinn否接口调用失败的回调函数cnmpklcFunciion否接口调用拜耒的回调函数1调用成功失败都会执行J1.3 wx.redirectTo保留当前页跳转表3,2。mredirectT。的属性属性类盛必填说明_urlSt

4、ring是需要跳转的应用内非tabBar的页面的路径.路里后可以带事敷。#数与路衿之间使用H?H分隔.畚敦智与春效俏用-=用连.不同号班之间用r分麻，如pathTkey-value&key2vilueZsuccessFunchoii苦推口通用成功的回调函数failFuneliun否接口调用失败的回调函数ccmplcteFunccici否接口调用结束的回国的教【调用成功.失殴都会执行）1.4 跳转到tabBar页面wx.switchTab跳转至UtabBar页面，并关闭其他所有非tabBar页面。袭3.21松.s*itchfab的属性属性J类型说明uriString亍常要跳转的诘bBat页面的踣

5、泾鬻在AppjKM的tablUr字段定义的页面1,路径后不能带参数successFunction否1接口调用成功的回调函数railFunction否接口调用失败的回调函歆completeFunction否接口调用结束的回调函数，:调用成功”失败都会执行）_1.5 wx.navigateBack1回上一页wx.navigateBack关闭当前页面，返回上一页或多级页面。可以通过getCurrentPages（获取当前的页面栈，决定需要返回几层。表3,22卡布，n”igataBsiuk的属性I_lift_M|必填dchfiNumberII返回的页面数，如果*旧大于现有直面数*则返回到If贝1.6

6、wx.setNavigationBarTitle(OBJEC3JI导航条wx.setNavigationBarTitle(OBJECT时态设置当前页面的标题。痴,2：1wk.getN覆5g&t宫rTi11虫的属性腐性类型海填说明tideString是真面皿Function否接口调用成功的回调函数PailFunttion查援口调用失败的回调的战completeFunction否接口调用结束的回调函数f调用成功、失瞰都会执行）Part2媒体组件2.1 audio音频audio音频组件需要有唯一的id,根据id使用wx.createAudioContext(myAudio创建音频播放的环境，src属

7、性是音频播放的资源路径，poster属性是音频的播放图片，name属性为音频名称，绑定播放、暂停播等事件。裹3,24audio音装的属性11性类型就认值说明idStringvidon胆性的唯一标识特srcString1饕播放音频的责霸地址loopEkHilennfalse是否循环林放conuol$日00帕料1true是否显示黠M控件poskrString戳认控件上的音频片面的图片资源地址，如果以皿巾后耳忖值为falw则设置poster无效nameSiring未到音频默认控件上的音频名字，如果controls腹性值为false则设颦name无效AuthorSiring未知作者我以捶件上的作者名字

8、1如果controls属性值为false则h,author无效hmdennorKvcntHondk当渔生犒深时触置errur事件，detail=(crtMsg.MutlijEmjr.CiMiebmdphiyHandle当开蛇，继鳏幡放时触黄村村事仲bindpjueEtcniHuiKllc当棺停幅放时触境pmi队事件Hindiirncupdate当播放证增改变时触发limcupdate事件，detail-CurrentJdunui。口：hindcrxledBvcnlHandk当播放到末尾同触发ended事件表325错谋旭错误码说明ME?DIA_ERRABURTliD羲取黄逑俄用户禁止MEDIA_

9、ERRNETWORD-何绪宙误MFDIAFRRnrCOTF颦码错表MI-DIARRS林LNOTSLPFhRTE1不合适资源2.2 image图片image图片组件有两类展现模式：一类是缩放模式，在缩放模式里包括4种方式;一类是裁剪模式，在剪裁模式里包括9种方式表3.26image图片的属性1属性类型默认值J说明STCString图片资源地址modeStnng,scalelbUir图片裁剪、缩放的模式binderrorHandleEvcnt当传误发生时，发布到AppScrvicc的事件名，事件对象eventdetail=(errMsg:somethingwrongbindloadHandleFv

10、ent当图片载入完单时，发右到AppScrvicc的事件名，事件对象evenl.detailheight图片高度width:,图片宽度pcover-image覆盖在上面，同页面只能插入个camera组件，不能在scroll-view、swiper、picker-view、movabel-view中使用camera组件。camera相机组件属性deviceStringBack前直或后置，值为front、backflashStringAuto闪光灯，值为auto、on、offbindstopEvenHandle摄像灯在非正常终止时触发，如退出后台等情况binderrorEvenHandle用户不允

11、许使用摄像头时触发2.5 live-player实时音视频播放与live-pusher实时音视频录制要先经过类别审核，属于比较高级的组件，了解即可！Part 3 map地图组件map地图组件用来开发与地图有关的应用，如地图导航、打车软件的订单轨迹等都会用到地图组件，在地图上可以标记覆盖物以及一系列的坐标位置。表3,3。曲阳时雁住属性柳j欧认值kOHFli岁日月langitudeNumber中心经度btiludcNumber中心纬度scaleNumber16缩放软别.奉值范圈为，-相markersArray标记点coversArmy即将移除,谓使用nwricemautcplay墨否自动播放pol

12、ylineAmiy除瓢circleArray图gnglyArray控件includc-poinhArray缩施视野以但含所有给定的坐标点show-IwatiotiikKilean盛示需有方向的鹫前定位点bindmarkcrupFAentElandlc单击标记点时触发bindcontrolupFventMandk单击控件时触发biridrcgianchangehventHandIe视野发生变化时触发bindtapLventHmdJc单击地图时触发.Ei.irkrrJIjJ在地图上显本标记的内置,如入所示,表3.31markeTM地图标记的属性圈性说明1类型四擂去注11id标记点id1Tr.Num

13、ber否marker单击事件回调会返回此国lalitade纬度Number是靠第IMU-90-90Irmgihjdu坦度Number是淳点数，塞闱为l0-ISOtitle标注点名String否icouPatti显小的图得Siruig是J琼自耳亲下的网片路心.支持相对邮神写法.以开头画表示相对小程序甄目录rotate旋转角度Number百顺时针旋转的角度，范用内口3WJ,默慎为。alpha标注的透明度Number否fltu为1.无遭明withh标注图标宽度Number否就认为图片实际宽度height惊注图标高度Number否默认为图片实除高度pulyhne指定一系列坐标点9从数组第一项连线至最:

14、后一顶,如我3.32所小。表3.32polyline坐标点的属性属性说明类型必填备注points经纬度数组Arrav是latitude:0.longitude:0color线的颜色String否8位十六进制表示，后两位表示alpha值，如0000000AAwidth线的宽度Number否dottedLinc是否虚线Boolean否M认fidse1.i.表333circles显示圆的属性属性说明类型必填备注latitude纬度Number是浮点数.范围为-90-90longitude经度Number是浮点数，范围为1XO7KOcolor描边的色String否8位1六进期泉示,后两位袅示Mpha值

15、，如：“0000()0AAfillColor填充或色String否8位十六进制酸示,后两位表示alpha值,如；#OOOOOOAAradius半径NumberstrokcWidth描边的宽度Number否cwr汕在地图上建小桧件.掺向触图移筑如石”,表3.34controls显示控件的属性属性说明类型必境备注id控件idNumber否控件单击事件回调会返回此idposition控件在地图的位置Objecta控件相对地图位BficonPath显示的图标String是项目目录下的图片路4,支持相对路岩写法.以-/开头则表示相对小程序根n录-clickable是否可单击Boolean否默认不可单击p

16、ositkrn打特的位置是相对地图的位置.电表3,35所示表335pgitinn控件优置的属性属性说明类型必堪蓄注Icil即寓地图的左边界第近Number否默认为0top距离地图的上边界多远Number否默认为0widtla控忤宽度Number不默汰为图片宽度height控件需度Number杏默认为图片高度Aii：霓图值件的短外度公填，如果不薛拄与度则玳认值是北京的姓薛度.Part 4 canvas画布组件canvas画布组件默认宽度为300px、高度为225px,在使用的时候需要有唯一的标识，它有手指触摸动作开始、手指触摸后移动、手指触摸动作结束、手指触摸动作被打断等事件。表336canvkM画布的属性属性类型3tt认信说明camjs-uiStringcanvas蛆件的唯一标识符diabk-scrolltlcokatifaltf当在cmes中移动时，禁止屏噂方动以及下拉刷