企业官网建设流程全解析

一、案例简介

本案例实现点击图片切换音频播放 / 暂停效果，图片与音频文件上传至微信云开发云存储，采用网络 HTTPS 远程资源加载，不打包进小程序本地项目包。点击宝塔山图片，控制《重回延安抒怀》音频播放与暂停；设置音频播放倍速 0.5 倍，每次点击在控制台打印当前音频播放位置与播放速率，完成图片 + 音频多媒体演示。

二、开发环境

• 开发工具：微信开发者工具
• 项目类型：微信小程序
• 资源存储：微信云开发 - 云存储
• 基础库版本：默认

三、实现思路

1. 开通微信云开发，新建云存储桶，创建images、audios两个文件夹，分别上传宝塔山图片yanan.webp、音频huiyanan.mp3。
2. 获取云存储文件的 HTTPS 下载链接，在 js 中绑定图片资源地址、音频资源地址。
3. 使用image组件展示图片，绑定点击事件sing。
4. 使用wx.createInnerAudioContext()创建音频实例，控制 play () 播放、pause () 暂停。
5. 扩展功能：设置音频playbackRate播放速率为 0.5，点击事件中通过console.log输出播放信息到调试控制台。

四、完整源代码

1. app.json

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black" }, "style": "v2", "renderer": "webview", "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }

2. pages/index/index.wxml

<!--index.wxml--> <navigation-bar title="图片与声音" back="{{false}}" color="black" background="#FFF"></navigation-bar> <view class="box container"> <view class="title">宝塔山</view> <image src="{{imgSrc}}" mode="widthFix" bind:tap="sing" /> </view>

3. pages/index/index.wxss

/**index.wxss**/ page { height: 100vh; display: flex; flex-direction: column; }

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; }

5. pages/index/index.js

// index.js let innerAudioContext; let start = false; Page({ data: { imgSrc: 'https://636c-cloud1-d0g9ha2pgb3fddddc-1509079397.tcb.qcloud.la/images/yanan.webp?sign=a94b506e3852934b126518af48bb60c7&t=1792228289' }, onLoad() { innerAudioContext = wx.createInnerAudioContext() innerAudioContext.src = 'https://636c-cloud1-d0g9ha2pgb3fddddc-1509079397.tcb.qcloud.la/audios/huiyanan.mp3?sign=e2e0cfd2ea0c1af06cac3cb4336f7d35&t=1792228206' // 设置音频播放速率 innerAudioContext.playbackRate = 0.5; }, sing() { start = !start if (start === true) { innerAudioContext.play() } else { innerAudioContext.pause() } // 打印当前播放位置、播放速率 console.log("当前音频的播放位置：", innerAudioContext.currentTime); console.log("当前音频播放速率：", innerAudioContext.playbackRate); } })

五、运行效果

1. 页面加载成功，顶部导航栏标题【图片与声音】，页面展示标题 “宝塔山” 与宝塔山图片。
2. 单击图片：音频开始播放；再次单击图片，音频暂停。反复点击可切换播放 / 暂停状态。
3. 打开调试器 Console 控制台，每次点击图片，控制台输出两行信息：音频当前播放位置、音频播放速率 0.5。
4. 资源来源：图片、音频均存放在微信云开发云存储，通过 HTTPS 网络链接远程加载。

控制台出现黄色警告Some selectors are not allowed in component wxss，属于新版小程序框架提示。

六、知识点总结

1. wx.createInnerAudioContext：小程序内部音频 API，用于创建音频实例，实现本地 / 网络音频播放控制。
   • .src：音频资源地址，支持网络 HTTPS 云端资源。
   • .play()：播放音频
   • .pause()：暂停音频
   • .playbackRate：音频播放速率
   • .currentTime：获取音频当前播放时间位置
2. image 组件：展示图片，bind:tap绑定点击事件，mode="widthFix"保持图片宽高比自适应。
3. 云存储：将静态资源（图片、音频）上传云存储，使用 HTTPS 签名链接访问，资源不占用小程序包体积。
4. 事件逻辑：使用布尔变量start做状态标记，每次点击取反，切换播放、暂停。

七、遇到问题说明

云存储下载链接带有sign签名，属于临时访问链接，具备有效期。如果后期图片 / 音频加载失败，进入云存储重新复制新的下载链接替换代码内地址即可。模拟器可以正常演示全部功能。