uniapp--微信小程序无网络提示组件页面

news/2024/9/23 7:26:58/

uniapp–小程序>微信小程序无网络提示组件页面

1.组件页面fu-notwork.vue代码

<template><view class="fu-notwork" v-if="!isConnected"><view class="fu-count-df" v-if="mode == 'full'" :style="{ zIndex: zIndex }"><image class="icon" :src="image" mode="aspectFit"></image><view class="tips">{{ tips }}</view><view class="text-gray text-sm margin-bottom-sm">{{ i18n['请检查网络,或者前往'] }}<text class="text-blue">{{ i18n['设置'] }}</text></view><view @click="getNetworkStattus">{{ i18n['点击刷新'] }}</view></view><view class="fu-count-tips" v-if="mode == 'tips'"><text></text><text>{{ tips }}</text></view></view>
</template><script>/*** fu-notwork 无网络提示* @description 该组件无需任何配置,引入即可,内部自动处理所有功能和事件。* @property {String} mode full 全屏模式 | tips 占位模式 | toast 提示框模式 | modal 弹框模式* @property {String} tips 没有网络时的提示语(默认哎呀,网络信号丢失)* @property {String Number} zIndex 组件的z-index值(默认1080)* @property {String} image 无网络的图片提示,可用的src地址或base64图片* @event {Function} retry 用户点击页面的"重试"按钮时触发* @example <fu-notwork></fu-notwork>*/export default {name: 'fu-notwork',props: {// 组件模式 默认全屏模式 、tips 占位模式 、toast 提示框模式mode: {type: String,default () {return 'full';}},tips: {type: String,default () {return global.i18n['哎呀,网络信号丢失'];}},zIndex: {type: [String, Number],default () {return 100;}},image: {type: String,default () {return 'data:image/png;base64,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';}}},data() {return {isConnected: true};},created() {let _this = this;uni.getSystemInfo({success: (res) => {console.log(res.platform, 'platformplatform')_this.platform = res.platform;}})// 监听网络状态的变化uni.onNetworkStatusChange(res => {// console.log(res)this.isConnected = res.isConnected;if (this.isConnected) {if (!uni.getStorageSync('CommonNetConnected') && _this.platform == 'ios') {uni.setStorageSync('CommonNetConnected', true)setTimeout(() => {plus.runtime.restart()}, 1000)} else {uni.setStorageSync('CommonNetConnected', true)}this.$emit('retry', {msg: this.i18n['网络链接成功'],networkType: res.networkType});} else {if (this.mode == 'toast') {this.$message.info(this.tips);}}});this.getNetworkStattus();},methods: {// 功能:获取当前网络状态getNetworkStattus() {uni.getNetworkType({success: res => {// console.log(res.networkType);if (res.networkType == 'none') {this.isConnected = false;switch (this.mode) {case 'modal':this.$util.showModal({title: '提示',content: this.tips});break;case 'toast':this.$message.info(this.tips);break;default:this.$message.info({content: this.i18n['无网络链接'],position: 'top'});break;}} else {this.isConnected = true;if (!uni.getStorageSync('CommonNetConnected')) {uni.setStorageSync('CommonNetConnected', true)setTimeout(() => {plus.runtime.restart()}, 1000)}this.$emit('retry', {msg: this.i18n['网络链接成功'],networkType: res.networkType});}}});}}};
</script><style lang="scss">
//在uni.scss中定义 $fu-prefix: fu;.#{$fu-prefix} {&-notwork {color: #666;.#{$fu-prefix}-count-df {position: fixed;top: 0;left: 0;width: 100%;height: 100%;background-color: white;text-align: center;padding-top: 380rpx;z-index: 9999;.icon {width: 200rpx;height: 200rpx;margin-bottom: 20rpx;}.tips {margin-bottom: 20rpx;}}.#{$fu-prefix}-count-tips {font-size: 24rpx;line-height: 80rpx;background-color: #ffdfdf;color: #666;text-align: center;}}}
</style>

2.全局引用

  <!-- 断网检测 start --><fu-notwork></fu-notwork><!-- 断网检测 end -->

http://www.ppmy.cn/news/1509909.html

相关文章

[GYCTF2020]FlaskApp1

打开题目 简单的一个base64加解密小程序 查看提示&#xff0c;好像并没有什么用&#xff0c;题目是flask&#xff0c;可能是ssti模板注入 加密窗口{{77}},解密窗口e3s3Kzd9fQ ({{77}} 加密窗口没看到注入&#xff0c;解密窗口存在注入&#xff0c;是模板注入 读取文件内容&am…

Java语言程序设计基础篇_编程练习题*16.16(使用ComboBox和ListView)

目录 题目&#xff1a;*16.16&#xff08;使用ComboBox和ListView&#xff09; 习题思路 示例代码 结果展示 题目&#xff1a;*16.16&#xff08;使用ComboBox和ListView&#xff09; 编程一个程序&#xff0c;演示在列表中选择的条目。程序用组合框指定选择方式&#xff0c;…

物流快递外卖管理平台系统-计算机毕设Java|springboot实战项目

&#x1f34a;作者&#xff1a;计算机毕设残哥 &#x1f34a;简介&#xff1a;毕业后就一直专业从事计算机软件程序开发&#xff0c;至今也有8年工作经验。擅长Java、Python、微信小程序、安卓、大数据、PHP、.NET|C#、Golang等。 擅长&#xff1a;按照需求定制化开发项目、 源…

VS Code安装配置ssh服务结合内网穿透远程连接本地服务器详细步骤

文章目录 前言1. 安装OpenSSH2.VS Code配置ssh3. 局域网测试连接远程服务器4. 公网远程连接4.1 ubuntu安装cpolar内网穿透4.2 创建隧道映射4.3 测试公网远程连接 5. 配置固定TCP端口地址5.1 保留一个固定TCP端口地址5.2 配置固定TCP端口地址5.3 测试固定公网地址远程 前言 远程…

C语言典型例题36

《C程序设计教程&#xff08;第四版&#xff09;——谭浩强》 例题3.4 输入一个字符&#xff0c;判别它是否为大写字母&#xff0c;如果是&#xff0c;将它转换为小写字母&#xff1a;如果不是&#xff0c;不转换。然后输出最后要输出的字符。 代码&#xff1a; //《C程序设计…

吴恩达open AI联合推出《大模型通关指南》免费pdf分享,手把手教你掌握大模型技术!

本书介绍 LLM&#xff08;Large Language Models&#xff09;正在逐步改变人们的生活&#xff0c;对于开发者来说&#xff0c;如何利用LLM提供的API快速、便捷地开发具备更强大能力、集成LLM的应用程序&#xff0c;以实现更新颖、更实用的功能&#xff0c;是一项急需学习的重要…

比OpenAI的Whisper快50%,最新开源语音模型

生成式AI初创公司aiOla在官网开源了最新语音模型Whisper-Medusa&#xff0c;推理效率比OpenAI开源的Whisper快50%。 aiOla在Whisper的架构之上进行了修改采用了“多头注意力”机制的并行计算方法&#xff0c;允许模型在每个推理步骤中预测多个token&#xff0c;同时不会损失性…

WXZ196微机消谐在出厂前都需要做哪些测试

WXZ196微机消谐在出厂前都需要做哪些测试&#xff1f;生产线把微机消谐组装完以后&#xff0c;出厂前都要做几方面的测试&#xff0c;一是看一下微机消谐上电后测试台检测接地&#xff0c;过电压和谐振是否良好启动&#xff0c;二货思通过笔记本电脑给微机消谐做一下通讯测试是…