hookehuyr

feat(网络状态): 添加网络从可用变为弱网/无网时的弹窗提示功能

在网络状态从可用变为弱网或无网时,新增弹窗提示用户并可一键进入离线模式
优化网络状态变化处理逻辑,避免重复提示并增加页面路由判断
......@@ -26,6 +26,7 @@
* 离线预约记录详情/离线二维码 (`pages/offlineBookingDetail/index`)
* 离线预约码入口页 (`pages/offlineBookingCode/index`)
* 离线预约缓存刷新与轮询 (`src/composables/useOfflineBookingCache.js`, `src/composables/useOfflineBookingCachePolling.js`)
* 网络从可用变为弱网/无网时,弹窗提示并可一键进入离线模式(`src/app.js`
5. **义工核销**
* 义工登录与权限预检 (`pages/volunteerLogin/index`)
......
/*
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2026-01-13 23:30:40
* @LastEditTime: 2026-01-16 00:17:50
* @FilePath: /xyxBooking-weapp/src/app.js
* @Description: 应用入口文件
*/
......@@ -16,7 +16,10 @@ import { is_usable_network, get_network_type } from '@/utils/network'
import { enable_offline_booking_cache_polling } from '@/composables/useOfflineBookingCachePolling'
import { weak_network_text, get_weak_network_modal_use_cache_options } from '@/utils/uiText'
// 记录是否已展示过网络异常提示弹窗
let has_shown_network_modal = false
// 记录上一次网络是否可用,用于识别“从可用变为不可用”的场景
let last_network_usable = null
const App = createApp({
// 对应 onLaunch
......@@ -48,32 +51,34 @@ const App = createApp({
}
/**
* 监听网络状态变化
* - 当网络连接且有授权时,预加载离线预约记录数据
* 判断是否应该跳过网络异常提示弹窗
* - 仅在当前页面为离线预约列表/详情/核销码页时返回 true
*/
Taro.onNetworkStatusChange((res) => {
if (res.isConnected && hasAuth()) {
preloadBookingData()
}
})
const should_skip_network_prompt = () => {
const pages = Taro.getCurrentPages ? Taro.getCurrentPages() : []
const current_page = pages && pages.length ? pages[pages.length - 1] : null
const current_route = String(current_page?.route || '')
if (!current_route) return false
if (current_route.includes('pages/offlineBookingList/index')) return true
if (current_route.includes('pages/offlineBookingDetail/index')) return true
if (current_route.includes('pages/offlineBookingCode/index')) return true
return false
}
/**
* 处理在启动时出现的不良网络情况
* - 当网络连接不良且有离线预约记录缓存时,提示用户是否使用缓存进入离线模式
* - 当网络连接不良且无缓存时,提示用户网络连接不畅
* @returns {Promise<boolean>} 如果用户选择进入离线模式,则返回 true;否则返回 false
* 处理不良网络情况
* - 仅在当前页面未跳过提示弹窗时调用
* - 若有离线预约缓存,则展示弹窗询问是否使用缓存数据
* - 否则展示简单提示弹窗
*/
const handle_bad_network_on_launch = async () => {
/**
* 避免重复提示用户
* - 仅在首次启动时检查网络情况
*/
const handle_bad_network = async (network_type) => {
if (has_shown_network_modal) return false
if (should_skip_network_prompt()) return false
const network_type = await get_network_type()
const is_none_network = network_type === 'none'
const is_weak_network = !is_usable_network(network_type)
if (!is_weak_network) return false
has_shown_network_modal = true
......@@ -99,8 +104,48 @@ const App = createApp({
return is_none_network
}
const should_stop = await handle_bad_network_on_launch()
if (should_stop) return
/**
* 监听网络状态变化
* - 当网络连接且有授权时,预加载离线预约记录数据
*/
Taro.onNetworkStatusChange((res) => {
const is_connected = res?.isConnected !== false
const network_type = res?.networkType || 'none'
const network_usable = is_connected && is_usable_network(network_type)
if (network_usable) {
has_shown_network_modal = false
last_network_usable = true
if (hasAuth()) preloadBookingData()
return
}
const should_prompt = last_network_usable === true || last_network_usable === null
last_network_usable = false
if (should_prompt) {
handle_bad_network(network_type)
}
return
})
/**
* 处理在启动时出现的不良网络情况
* - 当网络连接不良且有离线预约记录缓存时,提示用户是否使用缓存进入离线模式
* - 当网络连接不良且无缓存时,提示用户网络连接不畅
* @returns {Promise<boolean>} 如果用户选择进入离线模式,则返回 true;否则返回 false
*/
const handle_bad_network_on_launch = async () => {
/**
* 避免重复提示用户
* - 仅在首次启动时检查网络情况
* - 如果用户已展示过提示弹窗,则直接返回 false
*/
if (has_shown_network_modal) return false
const network_type = await get_network_type()
last_network_usable = is_usable_network(network_type)
return handle_bad_network(network_type)
}
/**
* 尝试在网络可用时预加载离线预约记录数据
......@@ -119,16 +164,28 @@ const App = createApp({
}
/**
* 尝试在有授权时预加载二维码数据
* @description: 授权成功后的共用启动逻辑
* - 尝试在网络可用时预加载离线预约数据
* - 启动离线预约缓存轮询(会自行处理网络可用性与引用计数)
*/
const bootstrap_after_auth = () => {
try_preload_when_online()
enable_offline_booking_cache_polling()
}
// 处理在启动时出现的不良网络情况
const should_stop = await handle_bad_network_on_launch()
// 如果用户选择进入离线模式,则直接返回
if (should_stop) return
/**
* 尝试在有授权时预加载离线预约记录数据
* - 若无授权,则尝试静默授权
* - 授权成功后调用 try_preload_when_online 预加载数据
* - 授权成功后调用 bootstrap_after_auth 启动共用逻辑
* - 授权失败则跳转至授权页面
*/
if (hasAuth()) {
// 有授权时预加载数据
try_preload_when_online()
// 启动离线预约缓存轮询
enable_offline_booking_cache_polling()
bootstrap_after_auth()
return
}
......@@ -137,19 +194,18 @@ const App = createApp({
try {
// 尝试静默授权
await silentAuth()
// 授权成功后预加载数据
try_preload_when_online()
// 启动离线预约缓存轮询
enable_offline_booking_cache_polling()
// 授权成功后调用 bootstrap_after_auth 启动共用逻辑
bootstrap_after_auth()
} catch (error) {
console.error('静默授权失败:', error)
// 授权失败则跳转至授权页面
navigateToAuth(full_path || undefined)
}
return
},
onShow() {
},
// 入口组件不需要实现 render 方法,即使实现了也会被 taro 所覆盖
});
App.use(createPinia())
......