微信小程序开发-媒体 API学习笔记

微信小程序媒体 API 案例讲解零基础吃透微信小程序媒体 API涵盖图片、录音、音频、视频、相机五大核心模块每个知识点都以案例进行讲解。笔记中的案例资源已放在顶部大家可自行下载学习。本章核心概述图片管理选择、预览、获取信息、保存到相册录音管理录音管理器实现录制、暂停、停止音频管理背景音频后台播放 内部音频前台播放视频管理选择视频、保存视频、控制视频组件相机管理调用相机拍照、录像一、首页index导航页功能定位作为所有媒体 API 案例的入口通过navigator组件跳转到各个子功能页面无业务逻辑仅承担路由导航作用。页面显示效果核心代码 知识点navigator url/pages/demo01/image/image图片管理综合应用/navigatornavigator小程序内置导航组件通过url指定跳转路径实现页面间跳转布局复用通过include引入公共的head.wxml标题和foot.wxml版权实现页面布局复用。二、图片管理demo01/image功能清单实现「选择图片」「预览图片」「获取图片信息」「保存图片到相册」四大核心功能。页面显示效果核心知识点 代码解析1. 选择图片chooseImagechooseImage:function(){ wx.chooseImage({ count: 1, // 最多选择1张 sizeType: [original, compressed], // 原图/压缩图 sourceType: [album, camera], // 相册/相机选择 success: function (res) { that.setData({ src: res.tempFilePaths[0]}) // 临时路径渲染图片 } }) }wx.chooseImage小程序图片选择 API返回临时文件路径tempFilePaths临时路径仅在当前会话有效数据绑定通过setData更新src实现image组件的图片渲染。2. 预览图片previewImagepreviewImage:function(){ wx.previewImage({ urls: [this.data.src] }) }wx.previewImage图片预览 API接收数组格式的图片路径支持缩放、保存等原生预览交互。3. 获取图片信息getImageInfogetImageInfo: function () { wx.getImageInfo({ src: this.data.src, success:function(res){ wx.showToast({ title: 宽:res.width,高:res.height }) } }) }wx.getImageInfo获取图片宽高、路径、类型等元信息常用于图片尺寸适配。4. 保存图片到相册saveImageToPhotosAlbumsaveImage: function () { wx.saveImageToPhotosAlbum({ filePath: that.data.src, success:function(){ wx.showToast({ title: 保存成功 }) } }) }wx.saveImageToPhotosAlbum将图片保存到系统相册需用户授权小程序自动触发授权弹窗交互反馈通过wx.showToast给出操作结果提示。布局说明image组件通过modewidthFix实现「宽度固定、高度自适应」保证图片比例不拉伸。三、录音管理demo02/recorder功能清单实现「开始录音」「停止录音」「自动播放录音」功能基于小程序录音管理器实现。页面显示效果核心知识点 代码解析1. 初始化录音管理器onLoad: function (options) { this.rm wx.getRecorderManager() // 获取录音管理器实例 this.rm.onStop((res) { // 停止录音后自动播放 const audioCtx wx.createInnerAudioContext() audioCtx.srcres.tempFilePath audioCtx.play() }) }wx.getRecorderManager()获取全局唯一的录音管理器替代旧版wx.startRecord监听停止事件onStop回调接收录音结果返回临时音频路径tempFilePath。2. 开始 / 停止录音start:function(){ const options { duration: 10000, // 最长录音10秒 sampleRate: 44100, // 采样率 format: aac // 音频格式 } this.rm.start(options) }, stop:function(){ this.rm.stop() // 停止录音触发onStop回调 }录音配置支持采样率、声道数、编码码率等精细配置满足不同音质需求播放录音通过wx.createInnerAudioContext()创建音频上下文播放录音临时文件。四、音频管理demo03分「背景音频bgAudio」和「内部音频audioCtx」两个子页面覆盖不同音频播放场景。4.1 背景音频管理bgAudio功能清单实现「后台音频播放」小程序退到后台仍能播放支持播放 / 暂停控制。页面显示效果核心知识点 代码解析onLoad: function (options) { this.bgAudioManager wx.getBackgroundAudioManager() // 背景音频管理器 this.initialAudio() }, initialAudio:function(){ this.bgAudioManager.title 小夜曲 // 必传音频标题后台播放必填 this.bgAudioManager.src https://xxx.mp3 // 设置后自动播放 }wx.getBackgroundAudioManager()背景音频管理器支持小程序退到后台继续播放配置要求title为必填项系统后台音频栏显示src设置后自动播放全局配置需在app.json中声明requiredBackgroundModes: [audio]申请后台音频权限。4.2 内部音频控制audioCtx功能清单实现音频「播放」「暂停」「停止」支持静音状态下播放iOS监听播放状态。页面显示效果核心知识点 代码解析onLoad: function (options) { this.audioCtx wx.createInnerAudioContext() // 创建内部音频上下文 this.initialAudio() }, initialAudio: function () { this.audioCtx.src https://xxx.mp3 // 音频地址网络/本地 this.audioCtx.autoplay true // 自动播放 // iOS静音下播放 wx.setInnerAudioOption({ obeyMuteSwitch: false }) // 监听播放事件 this.audioCtx.onPlay(() { console.log(开始播放) }) }wx.createInnerAudioContext()创建内部音频上下文控制音频播放 / 暂停 / 停止静音策略wx.setInnerAudioOption设置obeyMuteSwitch: false实现 iOS 静音模式下仍播放事件监听支持onPlay/onPause/onStop/onError等事件监听音频生命周期。五、视频管理demo04/videoCtx功能清单实现「选择视频」「播放 / 暂停视频」「保存视频到相册」「发送彩色弹幕」全流程。页面显示效果核心知识点 代码解析1. 选择视频chooseVideochooseVideo: function () { wx.chooseVideo({ sourceType: [album, camera], // 相册/相机拍摄 maxDuration: 60, // 最长60秒 success: function (res) { that.setData({ src: res.tempFilePath }) // 渲染视频 } }) }wx.chooseVideo选择 / 拍摄视频返回临时路径、时长、尺寸等信息。2. 视频上下文控制onLoad: function (options) { this.videoContext wx.createVideoContext(myVideo) // 绑定视频ID }, play: function () { this.videoContext.play() }, // 播放 pause: function () { this.videoContext.pause() } // 暂停wx.createVideoContext(myVideo)通过视频组件 ID 创建上下文控制视频播放状态视频组件配置video idmyVideo enable-danmu danmu-btn controls开启弹幕、弹幕按钮、原生控制栏。3. 发送彩色弹幕// 生成随机十六进制颜色 function getRandomColor() { let rgb [] for (let i 0; i 3; i) { let color Math.floor(Math.random() * 256).toString(16) color color.length 1 ? 0 color : color rgb.push(color) } return # rgb.join() } // 发送弹幕 bindSendDanmu: function () { this.videoContext.sendDanmu({ text: this.inputValue, // 输入的弹幕文本 color: getRandomColor() // 随机颜色 }) }sendDanmu视频上下文的弹幕发送 API支持自定义文本和颜色输入框交互通过bindblur监听输入框失焦获取弹幕文本。4. 保存视频到相册saveVideo: function () { wx.saveVideoToPhotosAlbum({ filePath: this.data.src, success: function () { wx.showToast({ title: 保存成功 }) } }) }wx.saveVideoToPhotosAlbum视频保存到相册需用户授权。六、相机管理demo05/camera功能清单实现「相机录像」开始 / 停止、「超时自动停止录像」、「播放录制的视频」。页面显示效果核心知识点 代码解析1. 初始化相机上下文onLoad: function (options) { this.ctx wx.createCameraContext() // 创建相机上下文 }wx.createCameraContext()获取相机上下文控制录像、拍照等操作。2. 开始 / 停止录像// 开始录像 startRecord: function () { this.ctx.startRecord({ // 超时默认10秒自动结束 timeoutCallback(res) { that.setData({ isRecording: false, src: res.tempVideoPath, // 录制的视频临时路径 isHidden: false // 显示视频组件 }) } }) }, // 手动停止录像 stopRecord: function () { this.ctx.stopRecord({ success: function (res) { that.setData({ src: res.tempVideoPath, isHidden: false }) } }) }startRecord/stopRecord相机上下文的录像控制 API超时回调timeoutCallback处理录像超时自动停止的场景条件渲染通过wx:if/hidden控制「开始 / 停止按钮」「视频组件」的显示 / 隐藏。3. 相机组件布局camera device-positionback flashoff stylewidth: 100%; height: 300px;/camera video hidden{{isHidden}} src{{src}} controls/video七、公共样式与全局配置1. 全局样式app.wxss定义通用布局类container/page-head/demo-box等统一所有页面的样式风格containerflex 布局垂直排列占满屏幕高度demo-box统一的卡片样式边框、内边距提升页面一致性。2. 全局配置app.json{ pages: [...], // 注册所有页面路径 window: { navigationBarBackgroundColor: #4169E1 }, // 导航栏样式 requiredBackgroundModes: [audio] // 后台音频权限 }页面注册所有页面需在pages数组中声明否则无法跳转后台权限requiredBackgroundModes声明audio允许背景音频播放。总结这份案例完整覆盖了微信小程序媒体 API 的核心能力每个页面聚焦一个媒体场景核心特点「临时路径」所有媒体文件图片 / 音频 / 视频操作均返回临时路径仅当前会话有效「上下文管理」通过createXXXContext创建音频 / 视频 / 相机上下文实现精细控制「授权机制」保存到相册、相机等操作需用户授权小程序自动触发授权流程「跨端兼容」针对 iOS 静音策略、后台播放等做了适配保证多端体验一致。