init

xhs-mini-demos/api-case/on-network-status-change/on-network-status-change.css

@@ -0,0 +1,7 @@
+.page-body-info {
+  height: 100px;
+}
+.page-body-text-network-type {
+  font-size: 40px;
+  font-family: -apple-system-font,Helvetica Neue,Helvetica,sans-serif;
+}

xhs-mini-demos/api-case/on-network-status-change/on-network-status-change.js

@@ -0,0 +1,34 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: '监听手机网络变化',
+      path: 'packageAPI/pages/on-network-status-change/on-network-status-change',
+    };
+  },
+
+  data: {
+    isConnected: false,
+  },
+
+  onLoad() {
+    const that = this;
+    xhs.onNetworkStatusChange(res => {
+      console.log('res----------', res);
+      that.setData({
+        isConnected: res.isConnected,
+        networkType: res.networkType,
+      });
+    });
+  },
+  onShow() {
+    const that = this;
+    xhs.getNetworkType({
+      success(res) {
+        that.setData({
+          isConnected: res.networkType !== 'none',
+          networkType: res.networkType,
+        });
+      },
+    });
+  },
+});

xhs-mini-demos/api-case/on-network-status-change/on-network-status-change.json

@@ -0,0 +1,3 @@
+{
+    "navigationBarTitleText": "监听手机网络变化"
+}

xhs-mini-demos/api-case/on-network-status-change/on-network-status-change.xhsml

@@ -0,0 +1,15 @@
+<view class="container">
+  <view class="page-body">
+    <view class="page-section">
+      <view class="page-body-info">
+        <view class="page-body-title">网络状态</view>
+        <block xhs:if="{{isConnected === false}}">
+          <text class="page-body-text">没有网络连接</text>
+        </block>
+        <block xhs:if="{{isConnected === true}}">
+          <text class="page-body-text-network-type">{{networkType}}</text>
+        </block>
+      </view>
+    </view>
+  </view>
+</view>