小程序-03 媒体组件
一、camera 相机组件
- 使用camera作为标签名创建相机,需要给camera设置宽高属性;
- mode: normal / scanCode 相机模式/扫码模式;
- device-position: back / front 后置/前置;
- flash: auto/on/off 自动/打开闪光灯/关闭闪光灯
- binderror: 用户不允许使用摄像头时触发事件;
- wx.createCameraContext(),创建camera实例,使用以下方法: (1)takePhoto():拍摄照片,将以下作为key-value对填写小括号里;
- quality:high/normal/low 高质量/普通/低 成像质量;
- success:接口调用成功的回调;
- fail: 调用失败的回调;
(2)startRecord():开始录像; (3)stopRecord():结束录像;
js
const ctx = wx.createCameraContext();
ctx.takePhoto({
quality: 'high',
success: ()=>{}
})
二、audio 音频组件
- audio: 音频默认组件(不建议使用,建议直接创建)
- id: audio组件的标识,用来创建wx.createAudioContext时绑定;
- src: 音频资源地址;
- loop:开启循环播放;
- controls:显示默认控件,默认为false;
- poster:音频封面地址;
- name: 音频默认名字;
- author: 音频作者;
- binderror: 播放错误时触发;
- bindplay: 开始播放时触发;
- bindpause: 暂停时触发;
- bindended: 播放到未尾时触发;
(1)error的code码:1 获取资源被用户禁止,2 网络错误 3 解码错误 4 不合适资源
wx.createInnerAudioContext 创建一个音频;创建之后可以使用音频的属性和方法,属性通过变量.src = '',方法:变量.play();
可用属性
- src: 资源地址;
- startTime: 开始播放位置,单位s;
- autoplay: 是否自动播放;
- loop: 是否循环;
- duration:当前音频的长度,单位s;(只读)
- currentTime: 当前音频的播放位置,有6位小数点;(只读)
- paused: 当前是否是暂停或停止状态(只读)
- buffered: 音频缓冲的时间点;
- 可用方法:
- play(): 播放;
- pause(): 暂停;
- stop(): 停止,会从开头开始播放;
- seek():跳转到指定位置,单位数字;
- onPlay(): 监听播放事件;
- onError(): 监听播放错误事件;
- onWaiting():监听音频加载事件;
- destory():销毁当前实例,在页面卸载时,将歌曲关闭;
- wx.playBackgroundAudio({})
使用后台播放器播放音乐,后台播放只能有一个音乐在播放,当用户离开小程序之后暂停播放,当使用其他小程序占用了音乐播放则停止播放;
- dataUrl: 音乐链接
- title: 音乐标题
- coverImgUrl: 封面URL
- success: 接口调用成功的回调函数
三、video 视频组件
- 可用属性:
- src: 视频地址;
- duration: 指定视频时长
- controls: 显示默认控件,默认true;
- autoplay: 是否自动播放;
- loop: 是否循环播放;
- enable-progress-gesture: 是否开启控制进度的手势;
- enable-play-gesture: 开启双击切换播放/暂停;
- poster: 视频封面的图片网络资源地址;
- 发弹幕,需要在video标签上,设置danmu-btn,显示弹幕按钮,danmu-list,赋值一个初始的数组,已有弹幕;
- wx.createVideoContext,创建video实例,使用控制功能,需要给video标签绑定一个id,操作对应的video组件;
- play(): 播放视频;
- pause(): 暂停视频;
- stop(): 停止视频;
- seek(): 跳转到指定位置;
- sendDanmu():发送弹幕;对象两个属性,text/color,弹幕文字以及弹幕颜色;
- playbackRate(): 设置倍速播放;
- requestFullScreen(): 进入全屏;
- exitFullScreen(): 退出全屏;
四、navigator 页面链接
- 相当于a标签,可以跳转页面,默认为块标签,使用url指定跳转地址;
- open-type属性:
- navigate: 对应wx.navigateTo;
- redirect: 对应wx.redirectTo;
- switchTab: 对应wx.switchTab;
- reLaunch: 对应wx.reLaunch;
- navigateBack: 对应wx.navigateBack;
五、map 地图组件
- 添加map标签,可用属性:
- longitude/latitude: 经度/纬度,单位number;
- scale: 缩放级别,取值3-20;
- show-compass: 显示指南针
- enable-overlooking: 开启俯视
- enable-zoom: 开启缩放;
- enable-scroll: 开启拖动;
- enable-rotate: 开启旋转;
- enable-satellite: 开启卫星图;
- enable-traffic: 开启实时路况;