企业官网建设流程全解析

一、实验目的

1. 掌握小程序image图片组件的使用，理解src、mode属性作用。
2. 学会使用wx.createInnerAudioContext()创建音频上下文，实现音频播放、暂停控制。
3. 理解页面生命周期onLoad函数的执行时机与用途。
4. 掌握数据绑定、事件绑定bind:tap。
5. 了解微信云存储，把图片、音频资源上传云存储，减少小程序包体积。
6. 扩展功能：设置音频播放速率，打印音频播放位置、播放速率到控制台。

背景知识：微信小程序主包大小限制 2M，图片、音频等媒体资源不建议放在本地项目内，上传到云存储，代码引用网络 HTTPS 地址，减小安装包体积。

二、实验环境

• 操作系统：Windows
• 开发工具：微信开发者工具
• 项目类型：小程序，不使用云服务模板，后期开通云开发存储。

三、实验功能描述

界面展示一张宝塔山图片，点击图片交替完成播放音乐 / 暂停音乐； 扩展需求：设置音频慢速播放；每次点击播放 / 暂停，在控制台输出当前音频播放位置、播放速率。

页面布局：

1. 顶部导航标题 “图片与声音”
2. 页面红色加粗标题 “宝塔山”
3. 图片组件，点击触发音频切换播放状态。

四、实现步骤

步骤 1：新建小程序项目

打开微信开发者工具，新建项目，选择不使用云服务、不使用模板，填写 AppID，创建空白小程序项目。

步骤 2：开通云开发，上传媒体资源

1. 点击顶部【云开发】按钮，开通云开发环境。
2. 进入【存储】模块，新建两个文件夹：images存放图片，audios存放音频。
3. 将图片yanan.webp、音频huiyanan.mp3上传至对应文件夹。
4. 修改存储权限为所有用户可读（免费账号无法修改则使用默认权限，链接过期后重新复制）。
5. 点击文件，复制文件的下载 HTTPS 链接，后续代码替换使用。

⚠️注意：云存储下载链接带 sign 签名，一段时间会失效，如果图片音频不加载，重新复制新链接替换代码。

步骤 3：编写 app.json 全局配置

删除navigationStyle":"custom"，使用系统原生导航栏，规避navigation‑bar组件警告。

{ "pages": [ "pages/index/index" ], "window": { "navigationBarTextStyle": "black", "navigationBarTitleText": "图片与声音", "navigationBarBackgroundColor": "#ffffff" }, "style": "v2", "renderer": "webview", "componentFramework": "glass‑easel", "sitemapLocation": "sitemap.json", "lazyCodeLoading": "requiredComponents" }

步骤 4：页面结构 index.wxml

<view class="page"> <view class="title">宝塔山</view> <view class="image-wrap"> <image src="{{imgSrc}}" mode="widthFix" bind:tap="sing" /> </view> </view>

代码说明：

1. src="{{imgSrc}}"：数据绑定，从 js 的 data 读取图片网络地址。
2. mode="widthFix"：图片宽度自适应，高度自动变化，保持原图比例。
3. bind:tap="sing"：事件绑定，点击图片触发 sing 函数。

步骤 5：页面逻辑 index.js（含作业扩展）

// index.js let innerAudioContext; let start = false; Page({ data: { //替换为自己云存储图片下载地址 imgSrc: "https://xxx.tcb.qcloud.la/images/yanan.webp?sign=xxx" }, //页面生命周期：页面加载时执行，只执行一次 onLoad() { //创建音频上下文对象 innerAudioContext = wx.createInnerAudioContext(); //设置音频网络地址，替换为自己云存储音频地址 innerAudioContext.src = "https://xxx.tcb.qcloud.la/audios/huiyanan.mp3?sign=xxx"; //设置播放速率，0.5慢速，1正常，1.5快速 innerAudioContext.playbackRate = 0.5; }, //图片点击事件 sing() { //取反布尔状态 start = !start; if(start){ innerAudioContext.play(); //播放 }else{ innerAudioContext.pause(); //暂停 } //扩展作业：控制台打印播放位置、播放速率 console.log("当前音频的播放位置：", innerAudioContext.currentTime); console.log("当前音频播放速率：", innerAudioContext.playbackRate); } })

核心 API 说明：

1. wx.createInnerAudioContext()创建音频实例，全局只创建一次，写在onLoad。
2. .play()播放音频；.pause()暂停音频。
3. .playbackRate设置播放速率。
4. .currentTime获取当前已经播放的秒数。

小程序限制：音频不能自动播放，必须由用户点击交互才可以播放，本案例点击图片触发符合规范。

步骤 6：页面样式 index.wxss

.page { min-height: 100vh; background: #fff; display: flex; flex-direction: column; align-items: center; padding:40rpx 30rpx; box-sizing: border-box; } .title { font-size: 40rpx; font-weight: bold; color: red; margin-bottom: 30rpx; } .image-wrap { width:100%; display:flex; justify-content:center; } image { width:100%; max-width:680rpx; }

步骤 7：app.wxss 全局样式

page { background-color: #ffffff; }

五、运行测试结果

1. 编译项目，页面顶部导航栏显示 “图片与声音”；页面红色标题 “宝塔山”，下方正常加载图片。
2. 第一次点击图片：音频开始慢速播放；控制台打印播放位置、播放速率。
3. 第二次点击图片：音频暂停；控制台打印播放位置、播放速率。
4. 再次点击继续播放，循环交替；控制台每次点击输出日志，完成扩展作业要求。

六、遇到的问题与解决

问题 1：<navigation‑bar>组件报警告

报错信息：[Component] <navigation-bar>: 只能是 <page‑meta> 内的第一个节点

• 原因：新版本小程序navigation‑bar自定义导航组件使用规则改变，必须嵌套在page‑meta标签内。
• 解决方案：本实验直接放弃自定义导航，改用系统自带导航栏，修改app.json，删除"navigationStyle":"custom"，消除警告。

问题 2：图片 / 音频无法加载

• 原因 1：云存储下载链接签名过期。解决：重新进入云存储复制最新下载链接替换代码。
• 原因 2：链接复制不全，少字符。解决：完整复制下载地址。

问题 3：音频不会自动播放

• 原因：微信小程序安全策略，音频不允许页面加载自动播放，必须用户手动点击交互。
• 解决：点击图片才触发 play ()，符合小程序规范。

问题 4：onLoad 耗时日志输出

控制台输出Page.onLoad took 84ms

• 这是性能提示日志，不是错误，代表页面加载耗时，无需处理。

七、实验总结

1. image组件通过src绑定网络资源，mode="widthFix"保证图片自适应布局。
2. wx.createInnerAudioContext()得到音频实例，完成播放暂停控制；playbackRate控制播放速度，currentTime获取播放进度。
3. onLoad生命周期函数页面加载只执行一次，适合做资源初始化。
4. 云存储适合存放图片音频媒体文件，规避小程序包大小限制；但是下载链接带签名，存在有效期。
5. 数据绑定{{变量名}}，事件绑定bind:tap，是小程序页面交互的基础。
6. 完成扩展作业，点击交互时打印音频播放位置和播放速率，在调试器 Console 面板观察输出。