前两天用微信小程序的云开发做了个玩意儿：点一下哈基米，它就叫一声；再点一下，闭嘴；再点，又叫。中间折腾了一会儿，把过程写下来。
云开发解决了一个大麻烦
微信小程序有个硬性限制：主包不能超过 2M。
一开始我想着直接把图片、音频丢项目里算了，结果还没放几张图，包体积就快爆了。这就好比你出门旅游，行李箱就那么大，非要把棉被枕头锅碗瓢盆全塞进去，最后拉链都拉不上。
用云开发就不一样了：把素材传到云存储，小程序里只放个网络地址。相当于你把东西寄存到酒店前台，行李箱里只留一张取件码，轻装上阵。
所以这个案例的核心不是图片也不是音频，而是云开发的用法。
最终效果
页面上趴着一张哈基米
点一下 → 哈基米开始叫
再点一下 → 闭嘴
再点 → 继续叫
控制台还会实时播报：当前叫到哪了、叫得多快
本质上就是个图片版的播放/暂停开关，但配上哈基米就莫名喜感。
开始动手
1. 新建项目
打开微信开发者工具：
项目名称：随便，我就叫“图片与声音”
后端服务：不使用云服务（没关系，云开发是后开的）
模板：不使用模板
建完得到一个光秃秃的空项目。
2. 上传素材到云存储
进云开发控制台 →存储→ 先创建存储桶（没有桶你往哪儿装）。
然后建两个文件夹：
images→ 把mao.jpg丢进去audios→ 把hajimi.mp3丢进去
3. 改权限
进存储权限标签页，选：
所有用户可读，仅创建者可读写
要是免费账号选不了这项，那就保持默认的“仅创建者可读写”。不过这种情况拿到的链接是带签名的，过一段时间会失效，到时候你得重新复制一遍。这就好比你拿的是临时门禁卡，过阵子就得去前台续一下。
4. 复制文件地址
回到存储管理：
点一下
mao.jpg→ 右边弹出详情 → 复制“下载地址”再点
hajimi.mp3→ 复制它的“下载地址”
这俩地址一会儿要粘到代码里，别搞混了。
代码部分（直接抄）
app.json
json { "pages": [ "pages/index/index" ], "window": { "backgroundTextStyle": "light", "navigationBarBackgroundColor": "#fff", "navigationBarTitleText": "图片与声音", "navigationBarTextStyle": "black" }, "renderer": "webview", "style": "v2", "sitemapLocation": "sitemap.json" }app.wxss
css /**app.wxss**/ .container { display: flex; flex-direction: column; align-items: center; box-sizing: border-box; } pages/index/index.json json { "usingComponents": {}, "navigationStyle": "custom" }pages/index/index.wxml
html <!-- index.wxml --> <navigation-bar title="图片与声音" back="{{false}}" color="black" background="#FFF"></navigation-bar> <view class="container"> <view class="title">哈基米</view> <!-- 点图片触发 sing 事件 --> <image src="{{imgSrc}}" mode="widthFix" bind:tap="sing" /> </view>pages/index/index.wxss
css /**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; }pages/index/index.js
javascript // index.js let innerAudioContext; let start = false; // 控制播放/暂停状态 Page({ data: { // 把这里换成你自己云存储里的图片地址 imgSrc: '你的图片下载地址' }, onLoad() { // 创建音频上下文 innerAudioContext = wx.createInnerAudioContext(); // 把这里换成你自己云存储里的音频地址 innerAudioContext.src = '你的音频下载地址'; // 设成 1.5 倍速，声音快一点，但不会变粗 innerAudioContext.playbackRate = 1.5; }, sing() { start = !start; if (start == true) { innerAudioContext.play(); console.log("当前音频的播放位置：", innerAudioContext.currentTime); console.log("当前音频播放速率：", innerAudioContext.playbackRate); } else { innerAudioContext.pause(); console.log("当前音频的播放位置：", innerAudioContext.currentTime); console.log("当前音频播放速率：", innerAudioContext.playbackRate); } } })顺手加的两个小功能
做完基础版之后，我又顺手加了两个小功能：
播放速度可调：在
onLoad里写innerAudioContext.playbackRate = 1.5。我试过设成 0.5，声音直接变粗，像哈基米感冒了。1.5 倍速就正常多了，只是变快变尖，像哈基米被踩了尾巴。控制台打印信息：在
sing函数里播放和暂停的分支各加两行console.log，打印currentTime和playbackRate。控制台就能看到哈基米叫到哪了。
结果展示
