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

在网络状态从可用变为弱网或无网时，新增弹窗提示用户并可一键进入离线模式优化网络状态变化处理逻辑，避免重复提示并增加页面路由判断

feat(网络状态): 添加网络从可用变为弱网/无网时的弹窗提示功能
在网络状态从可用变为弱网或无网时，新增弹窗提示用户并可一键进入离线模式优化网络状态变化处理逻辑，避免重复提示并增加页面路由判断
hookehuyr
Commit 98e0b2a4b23446a83570e1ad3e2d38ac588564a1 98e0b2a4 1 parent 27e5461d
Showing 2 changed files with 88 additions and 31 deletions
README.md
src/app.js
--- a/README.md
View file @98e0b2a
+++ b/README.md
View file @98e0b2a
@@ -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`)
--- a/src/app.js
View file @98e0b2a
+++ b/src/app.js
View file @98e0b2a
 /*
  * @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()) {
+        const should_skip_network_prompt = () => {
-                preloadBookingData()
+            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()) {
-            // 有授权时预加载数据
+            bootstrap_after_auth()
-            try_preload_when_online()
-            // 启动离线预约缓存轮询
-            enable_offline_booking_cache_polling()
             return
         }
@@ -137,19 +194,18 @@ const App = createApp({
         try {
             // 尝试静默授权
             await silentAuth()
-            // 授权成功后预加载数据
+            // 授权成功后调用 bootstrap_after_auth 启动共用逻辑
-            try_preload_when_online()
+            bootstrap_after_auth()
-            // 启动离线预约缓存轮询
-            enable_offline_booking_cache_polling()
         } catch (error) {
             console.error('静默授权失败:', error)
             // 授权失败则跳转至授权页面
             navigateToAuth(full_path || undefined)
         }
+
+        return
     },
     onShow() {
     },
-    // 入口组件不需要实现 render 方法，即使实现了也会被 taro 所覆盖
 });
 App.use(createPinia())