uniapp【新增】：全局检测断网状态，断网清空下，给出相应提示

CoreCms.Net.Uni-App/CoreShop/App.vue

@@ -3,17 +3,11 @@
 	import { queryShopConfigV2, queryAppVersions } from '@/core/api';
 	import type { Response, ShopConfigType } from '@/core/models';
 	import { useShopConfigStore } from '@/core/store';
+	import { useNetWorkHook } from '@/core/hooks';
 	
 	/** 获取项目配置 */
 	const shopConfigStore = useShopConfigStore();
-
+	const useNetWork = useNetWorkHook();
-	onShow(() => {
-		console.log('App Show')
-	})
-
-	onHide(() => {
-		console.log('App Hide')
-	})
 	
 	onLaunch(() => {
 		getShopConfigV2();
@@ -35,6 +29,18 @@
 		// #endif
 	})
 	
+	onShow(() => {
+		console.log('App Show');
+		useNetWork.checkNetworkStatus();
+		useNetWork.subscriptionNetworkStatusChange();
+	})
+	
+	onHide(() => {
+		console.log('App Hide')
+		useNetWork.offNetworkStatusChange();
+		useNetWork.setNetWorkStatusToDefault();
+	})
+
 	const getShopConfigV2 = async () => {
 		shopConfigStore.querySystemConfig();
 	}

CoreCms.Net.Uni-App/CoreShop/core/hooks/index.ts

@@ -1,3 +1,4 @@
 /** 系统配置 */
 export * from './systemInfo';
 export * from './use-loading';
+export * from './use-network-hook';

CoreCms.Net.Uni-App/CoreShop/core/hooks/use-network-hook.ts

@@ -0,0 +1,50 @@
+import { ref, watchEffect } from 'vue';
+import { getNetworkType } from '../utils/uni-promise';
+
+export const isConnectedRef = ref(undefined);
+export const useNetWorkHook = () => {
+	watchEffect(() => {
+		if (typeof isConnectedRef.value === 'boolean' && !isConnectedRef.value) {
+			uni.showToast({ title: '网络跑小差啦~', icon: 'none' });
+		}
+	});
+	const callBack = (res : UniNamespace.OnNetworkStatusChangeSuccess) => {
+		isConnectedRef.value = res.isConnected;
+	};
+
+	const subscriptionNetworkStatusChange = () => {
+		uni.onNetworkStatusChange(callBack);
+	};
+	const offNetworkStatusChange = () => {
+		uni.offNetworkStatusChange(callBack);
+	};
+
+	const checkNetworkStatus = async () => {
+		if (typeof isConnectedRef.value === 'undefined') {
+			const result : UniNamespace.GetNetworkTypeSuccess = await getNetworkType();
+			isConnectedRef.value = result.networkType !== 'none';
+		}
+	};
+
+	const setNetWorkOffline = () => {
+		isConnectedRef.value = undefined;
+		isConnectedRef.value = false;
+	};
+
+	const setNetWorkStatusToDefault = () => {
+		isConnectedRef.value = undefined;
+	};
+
+	const checkNetWorkOffline = async () => {
+		if (typeof isConnectedRef.value === 'undefined') {
+			await checkNetworkStatus();
+		}
+
+		if (!isConnectedRef.value) {
+			setNetWorkOffline();
+		}
+		return isConnectedRef.value;
+	};
+
+	return { subscriptionNetworkStatusChange, offNetworkStatusChange, setNetWorkOffline, checkNetworkStatus, setNetWorkStatusToDefault, checkNetWorkOffline };
+};

CoreCms.Net.Uni-App/CoreShop/core/utils/http.ts

@@ -3,6 +3,7 @@ import { UserToken } from '@/core/consts'
 import UniP from "./uni-promise";
 import { getRequestHost } from './host';
 import { handleLoginGetToken } from '@/core/utils';
+import { useNetWorkHook } from '@/core/hooks';
 
 type TReqOptions = Pick<UniApp.RequestOptions, 'method' | 'data' | 'header'>;
 type TReqMethodOptions = Omit<TReqOptions, 'method'>;
@@ -10,6 +11,7 @@ type TResData = UniApp.RequestSuccessCallbackResult['data'];
 
 let isRefreshing = true;
 let subscribers = [];
+const useNetWork = useNetWorkHook();
 
 function onAccessTokenFetched() {
 	subscribers.forEach((callback) => {
@@ -19,11 +21,24 @@ function onAccessTokenFetched() {
 	isRefreshing = true;
 }
 
-function addSubscriber(callback:Function) {
+function addSubscriber(callback : Function) {
 	subscribers.push(callback)
 }
 
 const request = async <T = TResData>(url : string, { method, data, header = {} } : TReqOptions, auth : boolean = true, callBack ?: Function) : Promise<Response<T>> => {
+
+	// 检查是否存在网络
+	const isConnected : boolean = await useNetWork.checkNetWorkOffline();
+	if (!isConnected) {
+		return Promise.reject({
+			data: undefined,
+			code: 500,
+			msg: '网络跑小差啦~',
+			status: false,
+			otherData: '网络跑小差啦~'
+		});
+	}
+
 	return new Promise(async (resolve, _) => {
 		const res = await UniP.request<T>({
 			url: url.indexOf('http') >= 0 ? url : `${getRequestHost()}/${url}`,

CoreCms.Net.Uni-App/CoreShop/core/utils/uni-promise.ts

@@ -187,6 +187,14 @@ export const showModal = (options : UniNamespace.ShowModalOptions) : Promise<any
 		});
 	})
 }
+export const getNetworkType = () => {
+	return new Promise((success, fail) => {
+		uni.getNetworkType({
+			success,
+			fail
+		});
+	});
+};
 
 
 export default {
@@ -207,5 +215,6 @@ export default {
 	openSetting,
 	authorize,
 	showToast,
-	showModal
+	showModal,
+	getNetworkType
 }

CoreCms.Net.Uni-App/CoreShop/manifest.json

@@ -54,7 +54,7 @@
         "setting" : {
             "urlCheck" : false,
             "checkSiteMap" : false,
-            "minified" : false,
+            "minified" : true,
             "postcss" : false,
             "es6" : true
         },
@@ -79,7 +79,7 @@
         }
     },
     "mp-alipay" : {
-		"appid" : "2021004107611929",
+        "appid" : "2021004107611929",
         "usingComponents" : true
     },
     "mp-baidu" : {

CoreCms.Net.Uni-App/CoreShop/pages/home/home.vue

@@ -74,6 +74,16 @@
 	onShow(() => {
 		/** 触发自定义onshow事件，让后代组件监听页面是都进入 */
 		uni.$emit(onHomePageShow);
+		console.log('ddd')
+		uni.getNetworkType({
+			success: function (res) {
+				console.log(res.networkType);
+			}
+		});
+		uni.onNetworkStatusChange(function (res) {
+			console.log(res.isConnected);
+			console.log(res.networkType);
+		});
 	})
 	onPullDownRefresh(async () => {
 		await queryHomePageConfig();

CoreCms.Net.Uni-App/CoreShop/pages/subpackage/notice/list/list.vue

@@ -10,7 +10,7 @@
 				<view class="no-data" v-if="state.noData">没有更多了</view>
 			</view>
 			<view v-else class="layout-empty-box">
-				<coreshop-empty :mode="EmptyEnum.data" text="暂无拼团商品"></coreshop-empty>
+				<coreshop-empty :mode="EmptyEnum.data" text="暂无数据"></coreshop-empty>
 			</view>
 		</view>