企业官网建设流程全解析

摘要

在小程序开发中，图片展示与音频播放属于非常高频的基础功能。如果把图片、音频资源直接打包进小程序项目，会增大主包体积，容易触发 2M 包大小限制。本案例借助云存储存放媒体资源，使用image组件展示图片，实现音频播放控制；在此基础上完成拓展功能：音频播放速率调节，并且在控制台输出音频实时状态信息。

一、项目需求分析

基础需求

1. 页面展示标题 “宝塔山” 与一张宝塔山图片，媒体资源全部托管在微信云存储，不占用本地包体积。
2. 点击图片实现音频播放 / 暂停交替切换。
3. 使用自定义导航栏，渲染引擎使用 webview。

拓展需求

1. 提供按钮可以设置音频慢速 0.5 倍、快速 1.5 倍播放。
2. 每次执行播放、暂停、切换倍速操作时，控制台打印两行信息。

二、云存储准备工作

操作步骤：

1. 打开开发者工具，点击上方【云开发】按钮，开通云开发环境。

2. 切换到【存储】→【存储权限】，设置为仅创建者可读。

3. 新建两个文件夹：images存放图片，audios存放音频。

4. 上传图片yanan.webp、音频huiyanan.mp3。

5. 点击文件，复制下载 https 链接，填入代码src属性。

注意：如果权限是仅创建者可读，下载链接会过期，需要重新复制链接。

三、完整代码实现

app.json

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationStyle": "custom" }, "style": "v2", "renderer": "webview", "rendererOptions": { "skyline": { "defaultDisplayBlock": true, "defaultContentBox": true, "tagNameStyleIsolation": "legacy", "disableABTest": true, "sdkVersionBegin": "3.0.0", "sdkVersionEnd": "15.255.255" } }, "componentFramework": "glass-easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }

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

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 class="btn-group"> <button class="slow-btn" bind:tap="setSlow">慢速0.5倍</button> <button class="fast-btn" bind:tap="setFast">快速1.5倍</button> </view> </view>

index.wxss

.btn-group{ margin-top:40rpx; display:flex; flex-wrap:wrap; gap:20rpx; justify-content:center; padding:0 20rpx; } .slow-btn{ width:420rpx; height:80rpx; font-size:28rpx; background-color:#87CEFA; color:#000; } .fast-btn{ width:420rpx; height:80rpx; font-size:28rpx; background-color:#FFA07A; color:#fff; } button::after{ border:none; border-radius:0; }

index.js

// index.js let innerAudioContext; let start = false; Page({ data: { imgSrc:'https://636c-cloud1-d7gyc6g1b58472739-1505491443.tcb.qcloud.la/images/yanan.webp?sign=dcb5ff50072443dcd489436e810223aa&t=1791871257' }, onLoad() { innerAudioContext = wx.createInnerAudioContext() innerAudioContext.src = 'https://636c-cloud1-d7gyc6g1b58472739-1505491443.tcb.qcloud.la/audios/huiyanan.mp3?sign=140af813fe13045bfa19b456f925544f&t=1791871277' }, sing() { if (start) { innerAudioContext.pause(); start = false; console.log("当前音频的播放位置：", innerAudioContext.currentTime); console.log("当前音频播放速率：", innerAudioContext.playbackRate); } else { innerAudioContext.play(); start = true; console.log("当前音频的播放位置：", innerAudioContext.currentTime); console.log("当前音频播放速率：", innerAudioContext.playbackRate); } }, setSlow() { innerAudioContext.playbackRate = 0.5; console.log("当前音频的播放位置：", innerAudioContext.currentTime); console.log("当前音频播放速率：", innerAudioContext.playbackRate); }, setFast() { innerAudioContext.playbackRate = 1.5; console.log("当前音频的播放位置：", innerAudioContext.currentTime); console.log("当前音频播放速率：", innerAudioContext.playbackRate); } })

四、界面截图

五、核心知识点详解

1. wx.createInnerAudioContext()

• .play()：开始播放音频

• .pause()：暂停音频

• .src：设置音频资源网络地址

• .currentTime：只读属性，获取当前播放时间（单位秒）

• .playbackRate：读写属性，设置播放速率，范围 0.5‑2.0

2. image 组件属性

• src：图片地址，支持本地路径、云存储 https 网络地址

• mode="widthFix"：宽度自适应，高度自动变化，保持原图比例，防止图片拉伸变形

• bind:tap：绑定点击事件，点击图片触发sing函数

3. 页面生命周期 onLoad

页面加载时执行，只执行一次。我们在这里初始化音频对象，给音频设置资源地址。

六、易错点

云存储 https 链接失效

现象：图片、音频加载失败。原因：存储权限设置为仅创建者可读，下载链接带有时效签名，一段时间后失效。解决：修改存储权限为所有用户可读；或者重新进入云存储复制新链接。

音频对象写在 Page 的 data 里面获取不到

现象：调用 play 报错，提示 innerAudioContext 未定义。解决：把音频上下文定义为页面外部全局变量，不要放在 data 中。

七、总结

本案例把image 图片组件、InnerAudioContext 音频 API、事件绑定、生命周期、云存储组合在一起。云存储可以有效控制小程序包体积；通过布尔变量实现播放暂停切换；currentTime、playbackRate可以拿到 / 修改音频实时状态。控制台打印输出，方便开发调试，观察音频对象内部数据。本案例可以作为音频类小程序的基础模板进行二次开发。