别再问怎么扫WiFi了！用uniapp+Android原生插件，5分钟搞定周边WiFi列表与信号强度显示

用UniAppAndroid原生插件实现WiFi扫描与信号可视化实战指南在智能家居控制、室内定位导航等场景中获取周边WiFi列表并可视化信号强度是常见需求。许多UniApp开发者遇到的核心痛点在于跨平台框架提供的网络API功能有限而原生Android的WifiManager类又存在权限复杂、数据解析门槛高等问题。本文将分享一套经过实战检验的解决方案通过原生插件桥接实现权限动态申请处理Android 10的定位权限要求高效扫描机制避免频繁扫描导致的性能问题专业级信号可视化将RSSI数值转换为直观的强度图标多设备兼容方案解决不同厂商设备的特性差异1. 环境配置与权限处理1.1 基础环境搭建首先确保开发环境满足以下条件# 检查环境依赖 node -v # ≥14.18 npm -v # ≥6.14 hbuilderx # ≥3.4.7Android项目配置需在manifest.json中添加{ permissions: [ android.permission.ACCESS_WIFI_STATE, android.permission.CHANGE_WIFI_STATE, android.permission.ACCESS_FINE_LOCATION ], plugins: { Fvv-UniWifiHelper: { version: 1.1.3, provider: io.fvv.uniapp.wifihelper } } }注意从Android 10开始即使只需要获取WiFi列表不连接也必须申请ACCESS_FINE_LOCATION权限1.2 动态权限申请流程现代Android系统要求运行时申请危险权限推荐使用以下代码流程const checkAndRequestPermission async () { const status await uni.getSystemSetting({ success: (res) { if (!res.locationEnabled) { uni.showModal({ title: 位置服务未开启, content: 需要开启位置服务才能扫描WiFi, success: (res) { if (res.confirm) { uni.openSystemPermissionSetting() } } }) return false } return true } }) if (status) { const authStatus await uni.authorize({ scope: scope.userLocation }) return authStatus.authSetting[scope.userLocation] } return false }2. WiFi扫描核心实现方案2.1 原生插件与纯API方案对比方案类型优点缺点适用场景原生插件性能好功能完整需要集成额外组件商业级应用纯API调用无依赖轻量权限处理复杂快速原型开发混合方案平衡性较好维护成本高中长期项目2.2 推荐插件封装代码创建wifiHelper.js工具类class WifiHelper { constructor() { this.plugin uni.requireNativePlugin(Fvv-UniWifiHelper) this.scanResults [] } async scanNetworks() { return new Promise((resolve, reject) { this.plugin.startScan((res) { if (res.code 200) { this.scanResults this._processResults(res.data) resolve(this.scanResults) } else { reject(new Error(res.msg)) } }) }) } _processResults(rawData) { return rawData.map(item ({ ssid: item.SSID, bssid: item.BSSID, level: this._convertRssiToLevel(item.RSSI), frequency: item.frequency, capabilities: item.capabilities })) } _convertRssiToLevel(rssi) { if (rssi -50) return 4 // 最强 if (rssi -60) return 3 if (rssi -70) return 2 if (rssi -80) return 1 return 0 // 最弱 } } export default new WifiHelper()3. 前端展示与交互优化3.1 信号强度可视化方案在Vue组件中实现动态信号图标template view classwifi-container view v-for(wifi, index) in wifiList :keyindex classwifi-item text classssid{{ wifi.ssid }}/text view classsignal-bars view v-forn in 4 :keyn :class[bar, n wifi.level ? active : ] :style{ height: ${n * 8}px } /view /view text classrssi{{ wifi.rssi }}dBm/text /view /view /template style .signal-bars { display: flex; align-items: flex-end; gap: 2px; height: 32px; } .bar { width: 4px; background: #ccc; transition: all 0.3s; } .bar.active { background: #4CD964; } /style3.2 性能优化技巧节流扫描设置最小扫描间隔建议≥15秒let lastScanTime 0 const MIN_SCAN_INTERVAL 15000 const throttledScan async () { const now Date.now() if (now - lastScanTime MIN_SCAN_INTERVAL) { return } lastScanTime now await wifiHelper.scanNetworks() }差异更新仅刷新发生变化的WiFi节点function updateWifiList(newList) { newList.forEach(newItem { const existingIndex this.wifiList.findIndex( item item.bssid newItem.bssid ) if (existingIndex 0) { this.$set(this.wifiList, existingIndex, newItem) } else { this.wifiList.push(newItem) } }) }4. 厂商设备兼容性处理不同Android设备厂商对WiFi扫描的实现存在差异需要特殊处理常见问题解决方案华为/荣耀设备需额外检查WLAN开关状态小米设备后台扫描需要加入自启动白名单OPPO/Vivo电池优化设置会影响扫描频率推荐添加设备检测逻辑const getDeviceBrand () { const systemInfo uni.getSystemInfoSync() const brand systemInfo.brand.toLowerCase() if (brand.includes(huawei) || brand.includes(honor)) { return huawei } else if (brand.includes(xiaomi) || brand.includes(redmi)) { return xiaomi } else if (brand.includes(oppo)) { return oppo } else if (brand.includes(vivo)) { return vivo } return other }针对华为设备的特殊处理示例if (getDeviceBrand() huawei) { const isWlanPlusOn await this.plugin.checkHuaweiWlanPlus() if (!isWlanPlusOn) { uni.showModal({ title: 优化建议, content: 检测到WLAN功能未开启可能影响扫描结果准确性, confirmText: 去设置, success: (res) { if (res.confirm) { this.plugin.openHuaweiWlanPlusSetting() } } }) } }5. 进阶功能扩展5.1 信号历史趋势记录const signalHistory {} function recordSignal(wifiList) { const now new Date().toISOString() wifiList.forEach(wifi { if (!signalHistory[wifi.bssid]) { signalHistory[wifi.bssid] [] } signalHistory[wifi.bssid].push({ time: now, rssi: wifi.rssi, level: wifi.level }) }) }5.2 基于信号强度的定位辅助通过多AP信号强度可以实现简单的三角定位function estimatePosition(knownAPs, currentScan) { // knownAPs应包含预存的AP位置信息{x,y,z} // currentScan是当前扫描到的AP列表 const distances knownAPs.map(ap { const scanned currentScan.find(item item.bssid ap.bssid) if (!scanned) return null // 简化距离估算模型 const distance Math.pow(10, (ap.calibratedPower - scanned.rssi) / 20) return { ...ap, distance } }).filter(Boolean) // 此处应实现定位算法如最小二乘法 // 返回估算的{x,y}坐标 }在实际项目中建议结合蓝牙信标或传感器数据提高定位精度。这套方案在仓库管理、商场导航等场景下可以达到3-5米的定位精度。