uview无网络提示

前提:使用uview框架

目的:没有网络时弹出页面提示

<template>
	<view>
		<view class="u-text">
			这里是页面正式内容
		</view>
		<u-no-network></u-no-network>
	</view>
</template>

<script>
	export default {
		
	}
</script>

 直接在需要使用的页面中引用 <u-no-network ></u-no-network > 即可 

一般是在底部导航的几个页面中引入,或者在每个需要调用接口的页面中引入

我将组件中的重试按钮去掉了,因为会和退出应用按钮有冲突,导致‘再次返回后台运行应用’提示信息一直显示在屏幕中。有办法解决的小伙伴可以评论区讨论哦!

### uView 中错误信息提示方法及实现 #### 使用 Toast 组件展示简单错误消息 对于简单的错误提示,`uView` 提供了 `uni.$u.toast()` 方法来快速显示一条短时间的消息通知。此方法适用于不需要用户交互的情况。 ```javascript // 当发生错误时调用 toast 显示错误信息 try { // 可能抛出异常的操作 } catch (error) { uni.$u.toast('发生了错误'); } ``` 这种方法简洁明了,适合用于表单验证失败或其他即时反馈场景[^1]。 #### 利用拦截器统一管理 HTTP 请求错误 为了更好地管理和标准化 API 调用过程中的错误处理逻辑,在 `uView` 的 HTTP 插件中可以设置全局的请求和响应拦截器。这样可以在一处集中捕获所有网络请求可能出现的问题,并给予一致性的用户体验。 ```javascript import { http } from 'uview-ui'; http.interceptors.response.use( response => response, error => { const message = error.message || '未知错误'; // 自定义错误处理逻辑 switch(error.status){ case 401: uni.showToast({ icon: 'none', title: '未授权访问' }); break; default: uni.$u.toast(message); } return Promise.reject(error); } ); ``` 这段代码展示了如何利用 `response` 拦截器捕捉到服务端返回的状态码,并根据不同情况进行相应的 UI 层面的通知[^2]。 #### 创建可重用的模态框组件处理复杂错误详情 针对较为复杂的错误情况(比如堆栈跟踪),可以通过创建一个专门用来呈现这些细节的弹窗组件来进行更好的展现形式控制。这种方式不仅解决了微信内置 `Toast` 长度限制的问题,还允许开发者自定义样式与行为。 ```html <!-- ErrorModal.vue --> <template> <div v-if="visible" class="modal"> <!-- 关闭按钮 --> <button @click="close">X</button> <!-- 错误描述 --> <p>{{ errorMessage }}</p> <!-- 更多详细信息链接/展开区域 --> ... </div> </template> <script> export default { props: ['errorMessage'], data(){ return{ visible:false }; }, methods:{ show(){this.visible=true;}, close(){this.visible=false;} } }; </script> ``` 当检测到特定类型的严重错误时,就可以实例化这个组件并将必要的参数传递进去: ```javascript if (isCriticalError) { this.$nextTick(() => { this.$refs.errorModal.show(); }); } ``` 这种模式下,即使是在不同页面之间也可以方便地共享同一个错误报告机制[^3]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值