微信小程序实战图片与音乐一、案例效果最近在学微信小程序开发完成了一个经典入门案例—— 图片与声音 页面上显示一张宝塔山的图片点击图片时播放音乐再次点击暂停再点击继续播放如此交替。在此基础上还做了两个功能扩展一是让音频以 0.5 倍速慢速播放二是在播放过程中把当前播放位置和播放速率实时打印到控制台。这个案例主要用到了 image 图片组件、InnerAudioContext 音频上下文、数据绑定、事件绑定以及页面的 onLoad 生命周期函数。二、为什么把图片和音频放到云存储微信小程序对包大小有限制单个分包或主包不能超过 2M。图片、音频这类资源体积比较大直接打进包里很容易超限。所以这个案例的做法是把资源文件上传到微信云开发的云存储中代码里只引用它们的网络地址从而减小小程序包的体积。三、实现过程先新建一个不使用云服务、不使用模板的小程序项目然后点击开发者工具上方的「云开发」按钮开通环境新用户可以免费体验六个月。接着进入存储管理分别新建 images 和 audios 两个文件夹把宝塔山的图片和音频文件上传上去。上传完成后点击文件名在右侧详情页复制「下载地址」在页面代码中通过数据绑定引用图片地址通过音频上下文引用音频地址。页面结构很简单一个标题、一张图片。图片通过数据绑定设置来源并绑定了点击事件。页面的 JS 中在 onLoad 生命周期函数里创建音频上下文并指定音频地址——onLoad 在页面加载时触发且只触发一次非常适合做这类初始化工作。点击图片时通过一个布尔变量的取反实现播放与暂停的交替第一次点击播放第二次点击暂停依此循环。两个扩展功能也很顺手倍速通过音频上下文的 playbackRate 属性设置播放位置和速率则在播放进度更新的回调里读取 currentTime 打印出来。四、踩坑记录重点案例代码不长但实际做下来踩了三个坑记录下来供大家参考。第一个坑点击图片没有任何反应。 排查后发现云存储复制出来的下载地址是带签名的有时效性过一段时间就会失效。我的图片链接已经失效返回 403而图片设置了宽度自适应模式加载失败后高度塌陷页面上看似有个图片区域实际上根本点不到图片组件点击事件自然从未触发。解决办法是回云开发控制台重新复制下载地址。建议给图片绑定加载失败的事件链接失效时控制台会直接报错能一眼定位问题。音频链接同理也会过期失效后重新复制即可。第二个坑播放速率不要设置得太早。 最初我在页面加载时设置完音频地址就立刻设置 0.5 倍速结果在部分机型和模拟器上会导致音频无声或者倍速不生效。正确的做法是等音频真正开始播放后再去设置倍速这样在各个端上都稳定生效。第三个坑提示app.json 在项目根目录找不到。 这是打开项目时选错了目录层级——真正的小程序代码在子文件夹里打开的外层目录中没有 app.json。重新导入项目时选择包含 app.json 的那一层目录即可如果目录结构不方便调整也可以在项目配置中指定小程序所在的子目录。五、总结通过这个案例我掌握了 image 组件的数据绑定与事件绑定、音频上下文的创建与播放控制、倍速与播放位置的读取、onLoad 生命周期的使用时机以及云存储的基本用法。最大的收获反而是那几个坑知道了云存储签名链接会过期、倍速设置的时机有讲究、项目目录层级不能选错。这种小案例建议大家一定亲手做一遍把坑都踩一遍收获远比看一遍大。