小程序框架组件之媒体组件

最新推荐文章于 2024-03-26 23:03:50 发布

原创

最新推荐文章于 2024-03-26 23:03:50 发布 · 2.7k 阅读

本文介绍了小程序中的媒体组件，包括image（图片）、audio（音频，已弃用，建议使用wx.createInnerAudioContext）、video（视频）、camera（相机）以及live-player（实时音频播放）和live-pusher（实时音频录制）。详细讲解了各组件的使用、属性及注意事项，如image的mode属性、video的direction属性、camera的mode属性、live-player的picture-in-picture-mode属性等。此外，还提到了小窗特性和直播权限的开通要求。

媒体组件（详情可见微信开发文档。）主要用来显示图片、播放音频，以及直播等

image（图片）

一个应用中图片是必不可少的，就像HTML提供了<img/ >标签一样，小程序提供了<image / >组件。小程序中的<inmage / >除了可以显示图片外，还提供了图片的裁剪、缩放两种模式。持 JPG、PNG、SVG、WEBP、GIF 等格式，2.3.0 起支持云文件ID。需要注意的是：image组件默认的宽度为300px、高度225px；image组件中二维码（小图片）不支持长按识别。image组件属性如下：

属性	类型	默认值	必填	说明	最低版本
src	string		否	图片资源地址。可以是网络地址，也可以是本地图片的相对地址	1.0.0
mode	string	scaleToFill	否	图片裁剪、缩放的模式	1.0.0
webp	boolean	false	否	默认不解析 webP 格式，只支持网络资源	2.9.0
lazy-load	boolean	false	否	图片懒加载，只针对page与scroll-view下的Image有效；在即将进入一定范围（上下三屏）时才开始加载	1.5.0
show-menu-by-longpress	boolean	false	否	开启长按图片显示识别小程序码菜单	2.7.0
binderror	eventhandle		否	当错误发生时触发，event.detail = {errMsg}	1.0.0
bindload	eventhandle		否	当图片载入完毕时触发，event.detail = {height, width}	1.0.0

mode 属性一共有13种模式，其中四种4种是缩放模式，9种是裁剪模式。mode的合法值如下：

值	说明
scaleToFill	缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit	缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。
aspectFill	缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。
widthFix	缩放模式，宽度不变，高度自动变化，保持原图宽高比不变
heightFix	缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

裁剪模式：

值	说明
top	裁剪模式，不缩放图片，只显示图片的顶部区域
bottom	裁剪模式，不缩放图片，只显示图片的底部区域
center	裁剪模式，不缩放图片，只显示图片的中间区域
left	裁剪模式，不缩放图片，只显示图片的左边区域
right	裁剪模式，不缩放图片，只显示图片的右边区域
top left	裁剪模式，不缩放图片，只显示图片的左上边区域
top right	裁剪模式，不缩放图片，只显示图片的右上边区域
bottom left	裁剪模式，不缩放图片，只显示图片的左下边区域
bottom right	裁剪模式，不缩放图片，只显示图片的右下边区域

audio（音频）

audio组件从小程序基础库1.6.0版本开始，不再维护该组件。建议使用能力更强的wx.createInnerAudioContext接口。该组件属性如下：

属性	类型	默认值	必填	说明	最低版本
id	string		否	audio 组件的唯一标识符	1.0.0
src	string		否	要播放音频的资源地址，可以是网络音频地址，或者本地音频的相对路径	1.0.0
loop	boolean	false	否 \是否循环播放	1.0.0
controls	boolean	false	否	是否显示默认控件	1.0.0
poster	string		否	默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效	1.0.0
name	string	未知音频	否	默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效	1.0.0