前言微信小程序对主包、分包体积有严格限制主包 / 单个分包不能超过 2M。如果把图片、音频这类大资源直接放到项目本地很容易造成包体积超限。解决方案就是把图片、音频上传到微信云开发的云存储小程序代码里直接引用云存储网络地址资源不打进小程序安装包有效压缩包体积。本篇就完整实现一个小案例页面展示一张宝塔山图片点击图片切换音频播放 / 暂停同时完成作业扩展修改播放速度每次播放暂停打印播放位置、播放速率到控制台。用到知识点image组件、事件绑定、页面生命周期onLoad、InnerAudioContext音频上下文、云存储、数据绑定。最终实现效果页面展示标题 “宝塔山” 图片点击图片播放音乐再次点击暂停反复点击交替播放与暂停控制台输出音频当前播放位置、播放速率。一、新建小程序项目打开微信开发者工具新建项目项目名称图片与声音选择不使用云服务、不使用模板填入自己小程序 AppID创建项目。注意项目创建时不开启云开发后面再手动开通云开发环境。二、修改 app.json 配置设置渲染引擎为webview完整配置{ pages: [ pages/index/index ], window: { navigationBarTextStyle: black, navigationStyle: custom }, style: v2, renderer: webview, componentFramework: glass‑easel, sitemapLocation: sitemap.json, lazyCodeLoading: requiredComponents }关键点renderer: webview指定 webview 渲染引擎。三、开通云开发 上传资源到云存储1. 开通云开发点击开发者工具顶部【云开发】按钮开通云开发环境新用户可以免费体验 6 个月基础套餐。2. 设置存储权限进入云开发控制台 →【存储】→【存储权限】权限设置为所有用户可读资源公开图片音频可以被小程序访问免费账号如果选项不可选就保持默认仅创建者可读写注意下载链接会过期需要重新复制地址。3. 上传图片、音频文件切换到【存储管理】新建两个文件夹images存放图片audios存放音频。上传素材图片yanan.webp、音频huiyanan.mp3。点击文件复制下载地址后面代码会用到这两个网络链接。⚠️重要如果权限是仅创建者可读写下载链接会有有效期失效要重新复制链接。四、编写页面代码4.1 index.wxml 页面结构image组件src{{imgSrc}}数据绑定图片网络地址bind:tapsing绑定点击事件点击触发 sing 函数。!--index.wxml-- navigation-bar title图片与声音 back{{false}} colorblack background#FFF/navigation-bar view classbox container view classtitle宝塔山/view image src{{imgSrc}} modewidthFix bind:tapsing / /view4.2 index.js 逻辑含作业扩展功能扩展需求设置播放速度每次播放 / 暂停控制台打印currentTime播放位置、playbackRate播放速率。// index.js let innerAudioContext; let start false; Page({ data: { //替换成你自己云存储图片下载地址 imgSrc: https://xxx/yanan.webp?signxxx }, //页面加载生命周期页面只执行一次 onLoad() { // 创建音频上下文 innerAudioContext wx.createInnerAudioContext() //替换成你自己云存储音频下载地址 innerAudioContext.src https://xxx/huiyanan.mp3?signxxx //设置播放速率0.5慢速1正常2倍速 innerAudioContext.playbackRate 0.5 }, //图片点击事件 sing() { start !start if (start true) { innerAudioContext.play() } else { innerAudioContext.pause() } //作业扩展打印播放位置、播放速率 console.log(当前音频的播放位置, innerAudioContext.currentTime) console.log(当前音频播放速率, innerAudioContext.playbackRate) } })核心 API 说明wx.createInnerAudioContext()创建内部音频上下文用来控制音频.play()播放、.pause()暂停.playbackRate播放速率范围 0.5~2.currentTime获取当前音频播放的时间位置单位秒。4.3 index.wxss 页面样式/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; }4.4 app.wxss 全局样式/**app.wxss**/ .container { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; } .box { margin: 20rpx; padding: 20rpx; border: 2rpx solid pink; } .title { font-size: larger; font-weight: bolder; text-align: center; margin-bottom: 30rpx; color: red; }五、运行测试将代码中图片、音频链接替换为自己云存储复制出来的下载地址编译小程序模拟器看到页面图片点击图片播放音乐再次点击暂停打开调试器 Console 控制台可以看到每次点击都会输出音频播放位置、播放速率。知识点总结为什么要用云存储存放图片音频小程序分包限制 2M图片音频资源放云存储使用网络 url 引用不占用小程序包体积避免包超限。onLoad 生命周期页面加载完成触发一个页面只会调用一次适合初始化音频、请求数据。数据绑定 事件绑定src{{imgSrc}}数据绑定把 js data 中的数据渲染到 wxmlbind:tapsing点击事件绑定点击触发 js 中 sing 函数。InnerAudioContext 音频对象src设置音频资源地址play()播放pause()暂停playbackRate播放速率currentTime获取当前播放时间。