admin管理员组

文章数量:1659594

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

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 无效

本文标签： 组件框架程序媒体

版权声明：本文标题：小程序框架组件之媒体组件 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://www.elefans.com/xitong/1729837665a1214503.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。