企业官网建设流程全解析

微信小程序实战：图片与音乐

一、案例效果

最近在学微信小程序开发，完成了一个经典入门案例—— 图片与声音 ：页面上显示一张宝塔山的图片，点击图片时播放音乐，再次点击暂停，再点击继续播放，如此交替。在此基础上还做了两个功能扩展：一是让音频以 0.5 倍速慢速播放，二是在播放过程中把当前播放位置和播放速率实时打印到控制台。

这个案例主要用到了 image 图片组件、InnerAudioContext 音频上下文、数据绑定、事件绑定，以及页面的 onLoad 生命周期函数。

二、为什么把图片和音频放到云存储

微信小程序对包大小有限制，单个分包或主包不能超过 2M。图片、音频这类资源体积比较大，直接打进包里很容易超限。所以这个案例的做法是：把资源文件上传到微信云开发的云存储中，代码里只引用它们的网络地址，从而减小小程序包的体积。

三、实现过程

先新建一个不使用云服务、不使用模板的小程序项目，然后点击开发者工具上方的「云开发」按钮开通环境，新用户可以免费体验六个月。接着进入存储管理，分别新建 images 和 audios 两个文件夹，把宝塔山的图片和音频文件上传上去。上传完成后点击文件名，在右侧详情页复制「下载地址」，在页面代码中通过数据绑定引用图片地址，通过音频上下文引用音频地址。

页面结构很简单：一个标题、一张图片。图片通过数据绑定设置来源，并绑定了点击事件。页面的 JS 中，在 onLoad 生命周期函数里创建音频上下文并指定音频地址——onLoad 在页面加载时触发且只触发一次，非常适合做这类初始化工作。点击图片时，通过一个布尔变量的取反实现播放与暂停的交替：第一次点击播放，第二次点击暂停，依此循环。

两个扩展功能也很顺手：倍速通过音频上下文的 playbackRate 属性设置，播放位置和速率则在播放进度更新的回调里读取 currentTime 打印出来。

四、踩坑记录（重点）

案例代码不长，但实际做下来踩了三个坑，记录下来供大家参考。

第一个坑：点击图片没有任何反应。 排查后发现，云存储复制出来的下载地址是带签名的，有时效性，过一段时间就会失效。我的图片链接已经失效返回 403，而图片设置了宽度自适应模式，加载失败后高度塌陷，页面上看似有个图片区域，实际上根本点不到图片组件，点击事件自然从未触发。解决办法是回云开发控制台重新复制下载地址。建议给图片绑定加载失败的事件，链接失效时控制台会直接报错，能一眼定位问题。音频链接同理，也会过期，失效后重新复制即可。

第二个坑：播放速率不要设置得太早。 最初我在页面加载时设置完音频地址就立刻设置 0.5 倍速，结果在部分机型和模拟器上会导致音频无声或者倍速不生效。正确的做法是等音频真正开始播放后，再去设置倍速，这样在各个端上都稳定生效。

第三个坑：提示"app.json 在项目根目录找不到"。 这是打开项目时选错了目录层级——真正的小程序代码在子文件夹里，打开的外层目录中没有 app.json。重新导入项目时选择包含 app.json 的那一层目录即可；如果目录结构不方便调整，也可以在项目配置中指定小程序所在的子目录。

五、总结

通过这个案例，我掌握了 image 组件的数据绑定与事件绑定、音频上下文的创建与播放控制、倍速与播放位置的读取、onLoad 生命周期的使用时机，以及云存储的基本用法。最大的收获反而是那几个坑：知道了云存储签名链接会过期、倍速设置的时机有讲究、项目目录层级不能选错。这种小案例建议大家一定亲手做一遍，把坑都踩一遍，收获远比看一遍大。