打造一个有点好看的 uniapp 网络测速软件

大家好，我是一名前端小白。今天想和分享一个有点好看的网络测速 uniapp 组件的实现过程。这个组件不仅外观精美，而且具有完整的功能性，是一个非常适合学习和实践的案例。

设计理念

在开始coding之前，先聊聊设计理念。一个好的测速工具应该具备以下特点：

直观的速度显示
清晰的测试过程
完整的设备信息
优雅的交互体验

基于这些考虑，将整个界面分为四个主要部分。下面让一步步实现这个组件。

1. 速度显示面板 - 视觉核心

速度显示面板是整个组件最吸引眼球的部分。我选择了圆形设计，因为圆形给人一种仪表盘的感觉，非常符合测速工具的定位。

<template><view class="speed-panel"><view class="speed-circle" :class="{ 'testing': isTesting }"><view class="speed-content"><text class="speed-value">{{ isFirst ? "点击开始" : (downloadSpeed ? (downloadSpeed * 1024).toFixed(0) : '...') }}</text><text class="speed-unit">{{ isFirst ? "" : "kb/s" }}</text></view><view class="speed-wave"></view></view></view>
</template>

在样式设计上，使用了现在非常流行的新拟态（Neumorphism）设计风格：

.speed-circle {width: 200px;height: 200px;border-radius: 50%;background: linear-gradient(145deg, #ffffff, #f0f0f0);box-shadow: 20px 20px 60px #d1d9e6, -20px -20px 60px #ffffff;position: relative;overflow: hidden;
}

这里有个小技巧：通过设置两个方向的阴影，一个深色一个浅色，创造出了非常漂亮的立体效果。而当测速开始时，会显示一个波浪动画，这给用户一种动态的反馈：

@keyframes wave {0% { transform: translateY(100%); }100% { transform: translateY(-100%); }
}.speed-wave {position: absolute;bottom: 0;width: 100%;height: 100%;background: linear-gradient(0deg, rgba(66, 153, 225, 0.1) 0%, rgba(66, 153, 225, 0) 50%);animation: wave 2s infinite linear;
}

2. 信息卡片 - 设备信息一目了然

信息卡片区域采用了现代化的卡片设计。使用Flex布局来实现响应式的排列，这样在不同尺寸的屏幕上都能很好地展示：

<template><view class="info-cards"><view class="info-card"><view class="card-icon">📱</view><view class="card-content"><text class="card-title">设备信息</text><text class="card-detail">{{ phoneBrand }} {{ phoneModel }}</text></view></view></view>
</template>

样式上追求简洁但不失细节：

.info-cards {display: flex;flex-wrap: wrap;gap: 15px;margin: 20px 0;
}.info-card {flex: 1;min-width: 150px;background: white;padding: 15px;border-radius: 16px;box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
}

在这里插入图片描述

这里的flex-wrap: wrap属性确保了在窄屏设备上卡片会自动换行，gap属性则提供了卡片之间优雅的间距。

3. 测速核心逻辑 - 性能与准确性的平衡

测速的核心是通过计算下载固定大小文件所需的时间来得出网速。这里选择了Cloudflare的测速API，它可以提供稳定的测试环境：

Cloudflare 测速 API 的基本格式如下：

https://speed.cloudflare.com/__down?bytes={size}

其中：

speed.cloudflare.com 是 Cloudflare 的测速服务器
__down 表示下载测试
bytes 参数指定要下载的文件大小（以字节为单位）

bytes（必需）
- 类型：整数
- 范围：1 到 1073741824（1GB）
- 示例：bytes=10485760（10MB）
其他可选参数
```
https://speed.cloudflare.com/__down?bytes=10485760&duration=10
```
- duration：测试持续时间（秒）
- throughput：限制下载速度（字节/秒）

搞一个 10 M 的文件大小，并使用 uni.downloadFile 下载该文件

methods: {testDownloadSpeed() {const fileSize = 10 * 1024 * 1024; // 选择10MB作为测试文件大小const url = `https://speed.cloudflare.com/__down?bytes=${fileSize}`;const startTime = Date.now();// 开始下载测试uni.downloadFile({url,success: () => {const duration = (Date.now() - startTime) / 1000;const speedMB = (fileSize / (1024 * 1024)) / duration;this.downloadSpeed = speedMB.toFixed(2);// 转换为Mbps以计算带宽等级this.bandwidth = (speedMB * 8).toFixed(2);}});}
}

为了提供更好的用户体验，在测试过程中添加了进度提示：

// 模拟进度更新
const progressInterval = setInterval(() => {if (this.progress < 90) {this.progress += 5;} else {clearInterval(progressInterval);}
}, 200);

4. 进度条设计 - 动态反馈的艺术

进度条的设计看似简单，但要做好也需要注意很多细节：

<template><view class="progress-wrapper" v-if="isTesting"><view class="progress-bar"><view class="progress-fill" :style="{ width: progress + '%' }"></view></view><text class="progress-text">{{ progress }}%</text></view>
</template>

样式上使用渐变色来增加视觉效果：

.progress-bar {width: 100%;height: 8px;background: #e2e8f0;border-radius: 4px;overflow: hidden;
}.progress-fill {height: 100%;background: linear-gradient(90deg, #4299e1, #3182ce);transition: width 0.3s ease;
}

在这里插入图片描述

transition属性确保了进度条的平滑动画效果，给用户更好的视觉体验。

5. 带宽等级计算 - 数据的智能解读

为了让测试结果更有意义，简单添加了带宽等级的计算功能：

computed: {getBandwidthCategory() {if (this.downloadSpeed) {const speedMbps = this.downloadSpeed * 8;// 根据实际速度返回对应的带宽等级if (speedMbps <= 10) return "10M宽带";else if (speedMbps <= 20) return "20M宽带";else if (speedMbps <= 50) return "50M宽带";else if (speedMbps <= 100) return "100M宽带";else if (speedMbps <= 200) return "200M宽带";else if (speedMbps <= 500) return "500M宽带";else return "1000M宽带以上";}return '正在测试...';}
}