微信小程序全局断网提示实现方案

本文介绍如何在微信小程序中为所有页面添加网络状态变化提示，确保用户体验不受网络问题影响。

微信小程序隐私权限调试

一站式排查小程序隐私授权报错（errno 104 / buttonId is wrong 等）+ 标准修改模式。适用：隐私协议配置、隐私弹窗不弹、授权报错、隐私接口调用失败。已抽离具体项目，适用于任何微信小程序。

下载

核心步骤

1. 在app.js中监听网络状态变化: 利用wx.onNetworkStatusChange API，实时监控网络连接状态。我们将网络状态存储在全局变量中，方便所有页面访问。

App({
  globalData: {
    networkStatus: 'connected' // 初始化网络状态为连接
  },
  onLaunch() {
    wx.onNetworkStatusChange(res => {
      this.globalData.networkStatus = res.isConnected ? 'connected' : 'disconnected';
    });
  }
});

2. 在页面中显示断网提示: 在每个页面的onShow生命周期函数中检查全局网络状态变量globalData.networkStatus。如果状态为disconnected，则显示断网提示。

Page({
  onShow() {
    const networkStatus = getApp().globalData.networkStatus;
    if (networkStatus === 'disconnected') {
      wx.showToast({
        title: '网络连接已断开，请检查网络设置',
        icon: 'none',
        duration: 2000
      });
    }
  }
});

通过以上两步，即可实现小程序所有页面对网络状态变化的全局监听和提示。 当网络连接中断时，小程序会自动在页面显示提示信息，提升用户体验。