fix:wifi页面列表样式优化
This commit is contained in:
@@ -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" ]
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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;
|
||||||
|
|||||||
Reference in New Issue
Block a user