🚀前言

在微信小程序的开发中，多媒体组件为应用增添了丰富的交互体验和视觉效果。无论是音频、视频，还是图片展示，这些多媒体元素不仅能够吸引用户的注意力，还能有效传达信息和情感。随着用户对内容质量和互动性的要求不断提高，掌握多媒体组件的使用显得尤为重要。

本篇文章将深入探讨微信小程序中的多媒体组件，详细介绍每种组件的特性、使用方法和最佳实践。我们将展示如何通过这些组件实现动态的内容展示，提升用户的参与感和体验，同时分享一些实用的开发技巧和注意事项。

无论你是刚入门的小程序开发者，还是希望提升应用功能的资深开发者，这篇文章都将为你提供有价值的见解与实用的代码示例。让我们一起探索微信小程序多媒体组件的魅力，打造出更加生动有趣的小程序吧！

🚀一、多媒体组件

所谓的多媒体，主要是指图片、音频、视频这类元素，这类多媒体元素本身涉及的技术可能比较复杂，但是在小程序中使用它们却非常简单。小程序开发框架中提供了非常多面向应用的多媒体组件对与多媒体有关的需求进行支持，包含图片、音视频、相机、直播等。

🔎1.渲染图像的 image 组件

image 是小程序中用来渲染图像的组件，首先来看它是如何使用的。在示例工程的 pages 文件夹下新建一组名为 imageDemo 的页面文件，在 imageDemo.wxml 中编写如下示例代码：

<!-- pages/imageDemo/imageDemo.wxml -->
<image style="width: 100%; height: 80px;" src="http://huishao.cc/img/head-img.png"></image>

直接运行代码，效果如图所示。

如上述代码所示，src 属性是用来设置 image 组件要加载的图片资源，这里使用了网络图片；如果小程序使用了云开发技术，src 也支持使用云文件的 ID，后面介绍云开发的时候会再详细讲解。image 组件支持的图片格式有 JPG、PNG、WEBP、SVG、GIF 等。image 组件可配置的属性如表所示。

image 组件的属性

有两个属性需要再额外介绍一下。

第一是 mode 属性，mode 也是 image 组件非常重要的一个属性，其用来指定图片的裁剪和缩放模式，支持设置的值如表所示。

第二个是 show-menu-by-longpress 属性，show-menu-by-longpress 属性设置为 true 后，长按图片会触发图片处理菜单。这是小程序提供的一个功能，支持对图片进行分享、收藏、保存以及识别图片中的二维码。

目前支持识别的小程序码包括微信个人码、微信群码、企业微信个人码、企业微信群码、企业微信群二维码和企业微信互通群码。弹出的功能菜单示例如图所示。

对于 mode 属性的这些值，读者可以尝试将 image 组件的宽度、高度设置为不同的值，通过不同的 mode 模式来观察图片的渲染样式，可以更好地理解这些值的用法。另外，如果不显示地设置 image 组件的宽高，则默认为宽度为 320px，高度为 240px。

🔎2.播放音频的 audio 组件

audio 组件顾名思义，就是用来为小程序添加音频播放功能的。在开发小程序时，可能需要为按钮增加点击音效反馈、为某个页面增加背景音乐，或者直接开发音乐播放器相关的应用，这些都可以使用 audio 组件来实现。

首先，在示例工程的 pages 文件夹下新建一组名为 audioDemo 的页面文件。对于音乐播放的需求，可以直接在页面中使用 audio 组件。在 audioDemo.wxml 文件中编写如下代码：

<!-- pages/audioDemo/audioDemo.wxml -->
<audio 
  id="audio" 
  src="https://github.com/ZYHshao/MyPlayer/raw/master/%E6%B8%85%E9%A3%8E%E5%BE%90%E6%9D%A5.mp3" 
  poster="https://img1.baidu.com/it/u=2825714906,1616764684&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" 
  name="清风徐来" 
  author="华语" 
  controls>
</audio>

代码解释

• id 属性：为 audio 组件指定一个唯一的 ID。
• src 属性：设置音频文件的 URL。
• poster 属性：设置音频的封面图片。
• name 属性：设置音频的名称。
• author 属性：设置音频的作者。
• controls 属性：控制是否显示默认的音频播放器样式。

运行代码，效果如图所示。点击页面中的播放按钮后，即可听到悦耳的音乐。

audio 组件的属性

虽然框架默认提供了一套简洁美观的 UI 样式，但很多时候这并不是我们需要的。更多时候，我们需要完全自定义音频播放器页面，或者只把音频播放器作为背景功能来使用。这样可以通过 createAudioContext 方法来获取到 audio 组件对应的 JavaScript 上下文对象 使用上下文对象来控制音频播放等行为。修改 audioDemo.wxml 中的代码如下：

<!-- pages/audioDemo/audioDemo.wxml -->
<audio id="audio"></audio>
<button type="primary" bindtap="play">播放</button>
<view style="height: 20px;"></view>
<button type="primary" bindtap="pause">暂停</button>
<view style="height: 20px;"></view>
<button type="primary" bindtap="replay">重新播放</button>

在 audioDemo.js 文件中实现逻辑代码如下：

// pages/audioDemo/audioDemo.js
Page({
  onReady: function(e) {
    this.audioCtx = wx.createAudioContext('audio');
    this.audioCtx.setSrc("https://github.com/ZYHshao/MyPlayer/raw/master/%E6%B8%85%E9%A3%8E%E5%BE%90%E6%9D%A5.mp3");
  },
  play: function() {
    this.audioCtx.play();
  },
  pause: function() {
    this.audioCtx.pause();
  },
  replay: function() {
    this.audioCtx.seek(0);
  }
});

运行代码，页面如图所示。

点击页面上的功能按钮，发现已经可以任意控制音频的播放、暂停等逻辑。AudioContext 对象支持的方法如表所示。

虽然 audio 组件有默认的样式并提供了自定义样式的方法，但在实际开发中，依然很少使用这个组件。并且小程序官方文档也明确指出，之后将不再维护 audio 组件，推荐开发者使用更加灵活高级的 InnerAudioContext 对象处理音频需求。

可以先将 audioDemo.wxml 文件中的 audio 组件删除，只保留 3 个功能按钮。修改 audioDemo.js 文件如下：

// pages/audioDemo/audioDemo.js
Page({
    onReady:function(e) {
        this.audioCtx = wx.createInnerAudioContext() // 获取音频播放器上下文对象
        // 设置要播放的音频文件路径
        this.audioCtx.src = "https://github.com/ZYHshao/MyPlayer/raw/master/%E6%B8%85%E9%A3%8E%E5%BE%90%E6%9D%A5.mp3";
        this.audioCtx.onPlay(()=>{ // 音频播放器开始播放音频的回调
            console.log("Play");
        });
        this.audioCtx.onPause(()=>{ // 音频播放器暂停播放音频的回调
            console.log("Pause");
        });
    },
    play:function() { // 手动开启播放
        this.audioCtx.play()
    },
    pause:function() {  // 手动暂停播放
        this.audioCtx.pause()
    },
    replay:function() { // 手动从头播放
        this.audioCtx.seek(0)
    }
})

运行代码，音频依然可以被正常地播放与暂停。wx.createInnerAudioContext 方法用来创建一个 InnerAudioContext 对象。此对象无需标签组件依赖即可实现音频资源的逻辑控制，相比 audio 组件，InnerAudioContext 对象的使用更加灵活，并且提供了更丰富的方法供我们监听音频播放的过程。

InnerAudioContext 对象提供的属性如表所示。

InnerAudioContext 对象提供的方法如表所示。

可以看到，InnerAudioContext 对象提供了相当多的属性和方法，通过它，开发者可以更加细致灵活地进行音频需求的开发。需要注意，在小程序中播放音频时，可能会触发系统的其他事件中断，例如有电话打入、用户拍照等时，可以通过 wx.onAudioInterruptionBegin 和 wx.onAudioInterruptionEnd 两个 API 接口来添加中断监听和结束后恢复的处理。

🔎3.播放视频的 video 组件

前面介绍了播放音频的 audio 组件，对于视频播放来说，小程序开发框架中提供了 video 组件。在使用上，video 组件与 audio 组件十分类似。在示例工程的 pages 文件夹下新建一组命名为 videoDemo 的页面文件，在 videoDemo.wxml 文件中编写如下示例代码：

<!--pages/videoDemo/videoDemo.wxml-->
<video id="video"
src="http://wxsnsdy.tc.qq.com/105/20210/snsdyvideodownload?filekey=30280201010421301f0201690402534804102ca905ce620b1241b726bc41dcff44e00204012882540400&bizid=1023&hy=SH&fileparam=302c020101042530230204136ffd93020457e3c4ff02024ef202031e8d7f02030f42400204045a320a0201000400"
danmu-list="{{danmu}}"
danmu-btn
enable-danmu
show-fullscreen-btn
show-play-btn
></video>

如上代码编写好页面结构后，只要配置弹幕的数据即可。使用非常方便,在 videoDemo.js 中编写如下示例代码：

// pages/videoDemo/videoDemo.js

page({
  data: {
    danmu: [{
      text: '弹幕',
      color: '#ff0000',
      time: 1
    }]
  }
})

运行代码，效果如图所示。

由于视频播放业务本身的复杂性较高, video 组件可配置的属性也比较多，具体如表所示。

🔎5.捕获影像的 camera 组件

camera 组件与硬件中的相机模块相关。通过 camera 组件可以方便地获取到用户设备摄像头捕获到的实时影像数据。当然使用此功能时会要求用户给予授权。camera 组件本身使用非常简单，在示例工程的 pages 文件夹下新建一组名为 cameraDemo 的页面文件，在 cameraDemo.wxml 文件中编写如下示例代码：

<!-- pages/cameraDemo/cameraDemo.wxml -->
<camera device-position="back" flash="off" style="width: 100%; height: 300px;"></camera>

可以尝试在手机设备上运行代码，允许使用相机后，即可在页面上看到摄像头捕获到的实时影像，如图所示。

需要注意，同一个页面中只能存在一个 camera 组件。通过 camera 组件的属性可以根据需求对相机功能进行配置，camera 组件支持的属性如表所示。

页面底部还展示了一个代码示例，详见以下内容：

// pages/cameraDemo/cameraDemo.js
Page({
    onReady: function(e) {
        this.camera = wx.createCameraContext(); // 获取相机上下文对象

        // 拍摄当前视频帧
        this.camera.takePhoto({
            quality: 'high', // 质量
            success: (res) => { // 获取成功的回调
                console.log(res.tempImagePath);
            }
        });
    }
});

该段代码描述了如何使用 wx.createCameraContext 方法获取 camera 上下文对象，并通过调用 takePhoto 方法进行拍照操作。

CameraContext 对象的方法

🔎6.直播与音视频通话相关组件

我们知道，微信本身就是一款十分流行的社交应用。对于社交应用来说，实时直播和多人音视频通话是非常重要的功能，小程序中也提供了相关的组件对这类功能进行支持。

小程序中对直播和音视频功能的使用还是有一定的限制，首先只有某些指定类目下的小程序才可以使用直播和音视频功能，包括社交类、教育类、医疗类等小程序，具体的类目要求读者可以在官方文档中查询到。其次小程序符合类目要求后还需要在小程序管理后台的开发管理-接口设置中开通对应的接口权限，如图所示。

小程序的直播功能需要使用到 live-pusher 组件，该组件会将实时录制的音视频数据以流的方式推送出去。live-pusher 组件的属性如表所示：

使用 live-pusher 组件完成主播端的推流后，观众端需要使用 live-player 组件来获取直播流数据进行播放。live-player 组件要略微简单些，其可配置的属性如表所示：

live-player 组件本质上也是一个视频播放器，可以为其设置 id 属性，然后通过如下方法拿到组件对应的 JavaScript 上下文对象，使用上下文对象也可以方便地对播放器行为进行控制：

wx.createLivePlayerContext(id)

最后，我们再来讲一下视频通话功能。这个功能比较复杂，首先需要调用wxjoinVIPChat方法来创建或加入一个聊天房间，创建房间完成后，服务端需要保存此房间的groupId值，之后需要加入此房间的用户使用joinVIPChat 来加入即可，加入后，即可使用voip-room 组件来展示某个房间中成员的实时影像。整体过程需要前后端协同完成。