fix:wifi页面列表样式优化

This commit is contained in:
2026-06-01 17:46:18 +08:00
parent b5e7e72104
commit c9ea368a19
2 changed files with 72 additions and 17 deletions

View File

@@ -64,7 +64,11 @@
"usingComponents" : true, "usingComponents" : true,
"darkmode" : true, "darkmode" : true,
"themeLocation" : "theme.json", "themeLocation" : "theme.json",
"permission" : {}, "permission" : {
"scope.userLocation": {
"desc": "用于扫描附近 WiFi完成设备 OTA 升级网络连接"
}
},
"requiredPrivateInfos" : [ "getLocation", "chooseLocation" ] "requiredPrivateInfos" : [ "getLocation", "chooseLocation" ]
} }
} }

View File

@@ -26,13 +26,33 @@ const connectError = ref("");
const progress = ref(0); const progress = ref(0);
let progressTimer = null; let progressTimer = null;
let timeoutTimer = null; let timeoutTimer = null;
let wifiPermissionModalVisible = false;
const MOCK_WIFI_LIST = [ // 判断 WiFi 列表失败是否由用户拒绝位置授权引起。
{ SSID: "shelingxingqiu", secure: true, signalStrength: -50 }, const isWifiPermissionDenied = (err) => {
{ SSID: "tplink3435_02", secure: true, signalStrength: -65 }, const errMsg = err?.errMsg || "";
{ SSID: "tplink2025_007", secure: true, signalStrength: -70 }, return /auth deny|authorize|permission denied|user denied|scope\.userLocation/i.test(errMsg);
]; };
// 提示用户改用手动输入 WiFi 名称和密码。
const showWifiPermissionDeniedModal = () => {
if (wifiPermissionModalVisible) return;
wifiPermissionModalVisible = true;
uni.showModal({
title: "无法获取 WiFi 列表",
content: "无法获取附近 WiFi 列表,请手动输入 WiFi 名称和密码完成连接。",
cancelText: "取消",
confirmText: "去输入",
success(res) {
if (res.confirm) selectOther();
},
complete() {
wifiPermissionModalVisible = false;
},
});
};
// 启动小程序 WiFi 能力并监听真实 WiFi 列表。
const startScanning = () => { const startScanning = () => {
currentState.value = STATES.SCANNING; currentState.value = STATES.SCANNING;
wifiList.value = []; wifiList.value = [];
@@ -40,29 +60,44 @@ const startScanning = () => {
connectError.value = ""; connectError.value = "";
wx.startWifi({ wx.startWifi({
success() { success(res) {
console.log("[OTA WiFi] wx.startWifi success:", res);
wx.getWifiList({ wx.getWifiList({
success(res) {
console.log("[OTA WiFi] wx.getWifiList request success:", res);
},
fail(err) { fail(err) {
console.error("[OTA WiFi] wx.getWifiList fail:", {
errCode: err?.errCode,
errMsg: err?.errMsg,
err,
});
if (isWifiPermissionDenied(err)) showWifiPermissionDeniedModal();
if (err.errCode === 12005) showWifiBanner.value = true; if (err.errCode === 12005) showWifiBanner.value = true;
}, },
}); });
}, },
fail(err) { fail(err) {
console.error("[OTA WiFi] wx.startWifi fail:", {
errCode: err?.errCode,
errMsg: err?.errMsg,
err,
});
if (isWifiPermissionDenied(err)) showWifiPermissionDeniedModal();
if (err.errCode === 12005) showWifiBanner.value = true; if (err.errCode === 12005) showWifiBanner.value = true;
}, },
}); });
wx.onGetWifiList((res) => { wx.onGetWifiList((res) => {
wifiList.value = res.wifiList || []; const realWifiList = res.wifiList || [];
if (realWifiList.length) {
console.log("[OTA WiFi] wx.onGetWifiList received wifiList:", realWifiList);
} else {
console.warn("[OTA WiFi] wx.onGetWifiList received empty wifiList:", res);
}
wifiList.value = realWifiList;
currentState.value = STATES.LIST; currentState.value = STATES.LIST;
}); });
setTimeout(() => {
if (currentState.value === STATES.SCANNING) {
wifiList.value = MOCK_WIFI_LIST;
currentState.value = STATES.LIST;
}
}, 2000);
}; };
const selectWifi = (wifi) => { const selectWifi = (wifi) => {
@@ -101,6 +136,14 @@ const joinDisabled = computed(() => {
return false; return false;
}); });
// 按当前页面状态限制 WiFi 列表高度,避免列表撑开整页。
const wifiListScrollHeight = computed(() => {
if (currentState.value === STATES.SCANNING) return "auto";
const itemCount = wifiList.value.length + 1;
const maxHeight = currentState.value === STATES.CONNECTED ? 276 : 420;
return `${Math.min(itemCount * 92, maxHeight)}rpx`;
});
const joinNetwork = () => { const joinNetwork = () => {
if (joinDisabled.value) return; if (joinDisabled.value) return;
connectError.value = ""; connectError.value = "";
@@ -255,7 +298,12 @@ onUnmounted(() => {
</view> </view>
<!-- 网络列表卡片 --> <!-- 网络列表卡片 -->
<view class="wifi-list-card"> <scroll-view
scroll-y
class="wifi-list-card"
:class="{ 'wifi-list-scroll': currentState !== 'SCANNING' }"
:style="{ height: wifiListScrollHeight }"
>
<block v-if="currentState === 'SCANNING'"> <block v-if="currentState === 'SCANNING'">
<view class="wifi-item" @click="selectOther"> <view class="wifi-item" @click="selectOther">
<text class="wifi-ssid other-text">其他...</text> <text class="wifi-ssid other-text">其他...</text>
@@ -283,7 +331,7 @@ onUnmounted(() => {
<text class="wifi-ssid other-text">其他...</text> <text class="wifi-ssid other-text">其他...</text>
</view> </view>
</block> </block>
</view> </scroll-view>
<!-- CONNECTED开始更新按钮 --> <!-- CONNECTED开始更新按钮 -->
<view v-if="currentState === 'CONNECTED'" class="bottom-btn-area connected-bottom-btn-area"> <view v-if="currentState === 'CONNECTED'" class="bottom-btn-area connected-bottom-btn-area">
@@ -502,6 +550,9 @@ onUnmounted(() => {
overflow: hidden; overflow: hidden;
margin-bottom: 20rpx; margin-bottom: 20rpx;
} }
.wifi-list-scroll {
flex-shrink: 0;
}
.connected-wifi-card { .connected-wifi-card {
background-color: rgba(35, 40, 56, 0.96); background-color: rgba(35, 40, 56, 0.96);
margin-bottom: 44rpx; margin-bottom: 44rpx;