需用titlenview自定义导航栏并配合uni.setnavigationbarcolor强制重载来实时显示网络图标，因原生层不响应vue数据变化。
导航栏里显示网络图标，得靠自定义 titleNView + 动态 data 绑定
uni-app 的原生导航栏（navigationStyle: "default"）不支持直接插入状态图标或文字，必须用 titleNView 自定义。它本质是原生渲染的标题栏，不能直接写 Vue 模板，但可以通过页面 data 动态控制其 titleText 或 buttons 内容。
关键点：titleNView 的配置项（如 titleText、buttons）只在页面初始化时读取一次，后续 data 变化不会自动刷新——所以不能只靠 {{ networkStatus }} 插值。
- 在
pages.json中为该页面开启titleNView，并设置type: "transparent"或固定背景色，避免遮挡 - 把网络状态文本（如 “? WiFi”、“? 4G”、“⚠️ 离线”）存到页面
data，比如navTitle: '? WiFi' - 用
uni.setNavigationBarColor或uni.setNavigationBarTitle不起作用；必须调用uni.setNavigationBarColor配合titleNView的backgroundColor才能改背景，而文字更新得走uni.setNavigationBarTitle（仅对默认导航栏有效）——所以真正可行的是：用buttons渲染一个只读状态按钮 - 推荐做法：在
titleNView.buttons里定义一个右对齐的 icon 按钮，内容设为 Unicode 网络符号（如'?'、'❌'），通过uni.setNavigationBarColor触发重绘（实际是 hack：修改任意 color 值即可强制 titleNView 重载）
怎么让 titleNView 的按钮实时响应网络变化
titleNView 的 buttons 数组本身不响应式，但你可以用 uni.setNavigationBarColor 作为“刷新触发器”。只要调用它（哪怕传入相同颜色），iOS/Android 原生层就会重新拉取当前页面的 titleNView 配置，从而读取最新的 data.buttons 值。
- 先在页面
data里定义navButtons: [{ text: '?', float: 'right' }] - 监听
uni.onNetworkStatusChange，根据res.isConnected和res.networkType更新this.navButtons - 紧接着调用
uni.setNavigationBarColor({ backgroundColor: this.$options.style.titleNView.backgroundColor })—— 这个调用不为改色，只为“骗”原生层重载按钮 - 注意：
titleNView的backgroundColor必须在pages.json中显式声明（哪怕和页面背景一样），否则重载会失败 - Android 上部分机型（如华为 EMUI）可能对频繁调用敏感，建议加 300ms 节流
为什么直接改 data 不生效，还容易白屏
因为 titleNView 是在 native 层初始化的，Vue 的响应式系统管不到它。你改了 this.navButtons，但原生侧缓存的按钮数组没变；强行用 watch 监听再调 setNavigationBarColor 也不可靠——onNavigationBarButtonTap 等事件回调里 this 可能已失活，尤其在 tabBar 页面切换时。
- 错误写法：
watch: { navButtons() { uni.setNavigationBarColor(...) } }→ 切页后 this 失效，报Cannot read property 'setNavigationBarColor' of undefined - 正确姿势：把网络状态处理逻辑收口到一个独立方法（如
updateNavStatus(res)），并在onNetworkStatusChange回调、onShow、以及请求失败兜底处统一调用 - 别在
onLoad里就调uni.getNetworkType初始化按钮——安卓冷启动可能返回'unknown'，导致导航栏显示 ❓ - 真机测试时，iOS 模拟器不触发
onNetworkStatusChange，必须用真机断网验证
图标字体兼容性比 emoji 更稳
直接用 '?' 这类 emoji 在旧 Android（如 6.0）或某些定制 ROM 上会显示方块或空白。更稳妥的方式是用 iconfont 字体 + fontSrc 指定路径，把网络状态映射为不同字符（如 'a' 表 WiFi，'b' 表 4G，'c' 表离线）。
- 在
static/fonts/放好 iconfont.ttf，确保pages.json中titleNView.buttons[0].fontSrc指向它（路径必须是绝对路径，如'/static/fonts/iconfont.ttf'） - 提前在 iconfont 平台生成三个图标：WiFi、蜂窝、断连，并分配对应 Unicode 码位（如
\ue601,\ue602,\ue603） - 更新
navButtons时，用String.fromCodePoint(0xe601)拼字符，而不是写死'\ue601'（后者在 JS 字符串中会被转义） - HBuilderX 编译时若提示 fontSrc 路径无效，请检查 manifest.json 中是否开启了
"usingComponents": true（App 端不需要，但 H5 端需要）
onShow 里补一次 uni.getNetworkType，并立即触发 updateNavStatus，否则用户从后台切回，看到的永远是上一次的状态。
