企业官网建设流程全解析

一、实验简介

本次实验为微信小程序课堂案例 2.2《图片与声音》，主要练习image图片组件、InnerAudioContext音频上下文、事件绑定、页面生命周期onLoad，同时学习云存储存放音视频资源，避免小程序主包体积超出 2MB 限制。

实现效果：页面展示宝塔山图片，点击图片切换播放 / 暂停《重回延安抒怀》音频；作业扩展需求：设置音频播放速率，每次点击后在控制台打印音频播放位置、播放速率。

踩坑提醒：云开发控制台偶尔打不开，需要关闭小程序开发工具，完全重启开发者工具。

二、实验环境

1. 开发工具：微信开发者工具
2. 项目类型：新建空白项目，不使用云服务、不使用模板
3. 渲染引擎：renderer: "webview"
4. 资源存放：图片、mp3 音频上传至小程序云存储，使用云存储临时下载链接访问

使用云存储的原因

微信小程序主包大小限制最大 2MB，如果把图片、音频直接放进项目本地，很容易超出包大小限制。将媒体文件上传到云存储，代码中引用网络地址，资源不会打包进小程序，减小项目包体积。

三、云存储操作流程

1. 在开发者工具顶部工具栏点击【云开发】按钮，打开云开发控制台。

⚠️坑点：云开发控制台打不开、点击无响应：完全关闭微信开发者工具，重启小程序工具后再次打开云开发。

1. 切换到【存储】选项卡，进入存储管理。
2. 存储权限设置：所有用户可读（课堂演示使用）。
3. 新建两个文件夹：images存放图片，audios存放音频。
4. 上传文件：yanan.webp宝塔山图片放入 images；huiyanan.mp3音频放入 audios。
5. 点击文件，复制【下载地址】，得到带 sign 签名的 https 临时链接，粘贴到代码中使用。

注意：云存储下载链接是临时签名链接，会过期失效。失效之后，重新到云存储复制新的下载链接替换代码。

四、完整全部代码

1. app.json（全局配置）

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

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

3. 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> <!-- 数据绑定图片地址，bind:tap绑定点击事件sing --> <image src="{{imgSrc}}" mode="widthFix" bind:tap="sing" /> </view>

4. pages/index/index.js（逻辑、音频控制、扩展作业）

// index.js let innerAudioContext; let start = false; Page({ data: { //云存储图片临时链接 imgSrc: 'https://636c-cloud1-1505520965.tcb.qcloud.la/images/yanan.webp?sign=b23c580cc686fb4db6e220471f981bf2&t=1791872604' }, //页面加载生命周期，页面只执行一次 onLoad() { //创建音频上下文对象 innerAudioContext = wx.createInnerAudioContext(); //设置音频云存储地址 innerAudioContext.src = 'https://636c-cloud1-1505520965.tcb.qcloud.la/audios/huiyanan.mp3?sign=08cc8b6bea6fe5ef630159a35f2985c7&t=1791872729'; //设置播放速率0.5倍慢速 innerAudioContext.playbackRate = 0.5; //监听音频加载失败，打印错误，方便调试排错 innerAudioContext.onError((err) => { console.log("音频加载失败：", err); }) }, //点击图片触发的事件函数 sing() { //状态取反，切换播放/暂停 start = !start; if (start === true) { innerAudioContext.play(); } else { innerAudioContext.pause(); } //扩展作业：控制台打印播放位置、播放速率 console.log("当前音频的播放位置：", innerAudioContext.currentTime); console.log("当前音频播放速率：", innerAudioContext.playbackRate); } })

5. pages/index/index.wxss（页面样式）

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

五、运行操作步骤

1. 创建空白小程序项目，不使用云服务，不使用模板。
2. 将上面全部代码复制替换对应文件。
3. 开发者工具右上角【详情】→【本地设置】，勾选：

✅不校验合法域名、web‑view（业务域名）、TLS 版本以及 HTTPS 证书

1. 清除缓存：工具栏【清缓存】，全部清除。
2. 点击编译运行，点击宝塔山图片测试播放暂停。

云开发控制台打不开解决方案：完全关闭微信开发者工具，重启整个小程序工具，再点云开发按钮。

六、核心知识点总结

表格

七、常见问题与排错

1. 图片或者音频 403 访问被拒绝云存储下载链接为临时签名链接，存在有效期。解决：打开云存储，重新复制下载链接替换代码。
2. 音频报错 Unable to decode audio data链接失效拿不到音频资源，或者网络拦截。检查链接是否有效，确认勾选不校验域名，清除缓存重编译。
3. 云开发控制台点击打不开，空白无显示

解决方案：关闭微信开发者工具全部窗口，重启小程序工具，再打开云开发。

1. 点击图片没有声音 检查InnerAudioContext实例是否创建成功，查看控制台onError打印错误信息。

八、实验总结

本次实验掌握小程序image图片组件、InnerAudioContext音频 API，学会使用云存储存放图片音频，解决小程序包大小限制。理解事件绑定、页面生命周期 onLoad 的使用。 同时需要注意云存储临时链接会过期、云开发工具异常需要重启开发者工具这类实操踩坑点。点击图片完成播放暂停切换，完成扩展作业控制台输出播放位置与速率，达到实验全部要求。