兼容浏览器,切换PC端显示PC端,切换H5端显示H5端

兼容浏览器,切换PC端显示PC端,切换H5端显示H5端
在这里插入图片描述

Uniapp + vue3 + Uview 项目
Vue3 + Vite + Ts + ElementPlus PC端 (在浏览器PC端,切换H5端兼容显示H5端页面)
浏览器H5 (在浏览器H5端,切换PC端兼容显示PC端页面)

PC端 (在浏览器PC端,切换H5端兼容显示H5端页面)
全局路由守卫中中获取是否是手机端

代码如下:

const isOnline = import.meta.env.VITE_SERVER_ENV === 'online'export const H5_URL = isOnline ? '生产H5地址' : '测试H5地址'
const client = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)if (client) {window.location.href = H5_URLreturn}

浏览器H5端 (在浏览器H5端,切换PC端兼容显示PC端页面)
app.vue中获取是否是那个端的

代码如下:

//获取 uniapp 自带的方法
const systemInfo = uni.getSystemInfoSync();
const platform = systemInfo.platform;
// PC_URL 和PC端同理
if (platform === 'windows' || platform === 'mac') {window.location.href = PC_URL
} else if (platform === 'browser') {console.log('当前是H5环境');
} else {console.log('其他环境');
}

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/diannao/49499.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

CSS实现的扫光效果组件

theme: lilsnake 图片和内容如有侵权,及时与我联系~ 详细内容与注释: CSS实现的扫光效果组件 代码 技术栈与框架 Vue3 CSS 扫光效果的原理 扫光效果的原理就是从左到右无限循环的一个位移动画 实现方式 适配文字扫光效果的css .shark-box { …

Stable Diffusion基本原理通俗讲解

Stable Diffusion是一种基于深度学习的图像生成技术,它属于生成对抗网络(GANs)的一种。简单来说,Stable Diffusion通过训练一个生成器(Generator)和一个判别器(Discriminator)&#…

【linux】Shell脚本三剑客之sed命令的详细用法攻略

✨✨ 欢迎大家来到景天科技苑✨✨ 🎈🎈 养成好习惯,先赞后看哦~🎈🎈 🏆 作者简介:景天科技苑 🏆《头衔》:大厂架构师,华为云开发者社区专家博主,阿里云开发者社区专家博主,CSDN全栈领域优质创作者,掘金优秀博主,51CTO博客专家等。 🏆《博客》:Python全…

【OSS对象存储】Springboot集成阿里云OSS + 私有化部署Minio

【OSS对象存储】Springboot集成阿里云OSS 私有化部署Minio 一、摘要二、POM依赖三、配置文件四、表结构设计五、代码实现5.1 代码包结构5.2 API封装5.3 增删改查 六、扩展6.1 Minio配置https访问 一、摘要 掌握阿里云OSS、私有化部署Minio两种对象存储的使用方式运用工厂策略…

Blender 4.2 安装GIS插件步骤

Blender 4 更新以后插件安装变得复杂,插件界面的安装按钮不显示,界面布局改变,怎么安装插件: 1. 在线安装: “编辑”(Edit)>进入偏好设置(Preferences setting)>…

(四)js前端开发中设计模式之工厂方法模式

工厂方法模式,通过对产品类的抽象,使其创建业务主要用于负责创建多类产品的实例 const Java function (content) {this.content content;(function () {let oDiv document.createElement(div)oDiv.innerHTML contentoDiv.style.color greendocument.getElement…

前端 Tips

js监听iframe window事件 : const iframe document.querySelector(iframe); iframe.contentWindow.NativeFunction function NativeFunction(para) {} vue keepAlive页面销毁: 方法用在keepAlive页面返回时。自测没问题。参考的某大神的,github来源…

HTTP 协议浅析

HTTP(HyperText Transfer Protocol,超文本传输协议)是应用层最重要的协议之一。它定义了客户端和服务器之间的数据传输方式,并成为万维网(World Wide Web)的基石。本文将深入解析 HTTP 协议的基础知识、工作…

机械学习—零基础学习日志(高数10——函数图形)

零基础为了学人工智能,真的开始复习高数 函数图像,开始新的学习!本次就多做一做题目! 第一题: 这个解法是有点不太懂的了。以后再多研究一下。再出一道题目。 张宇老师,比较多提示了大家,一定…

设计模式12-构建器

设计模式12-构建器 由来和动机原理思想构建器模式的C代码实现构建器模式中的各个组件详解1. 产品类(Product)2. 构建类(Builder)3. 具体构建类(ConcreteBuilder)4. 指挥者类(Director&#xff0…

kettle从入门到精通 第七十九课 ETL之kettle kettle读取数据库BLOB字段转换为文件

上一课我们讲解了如何将文件以二进制流的方式写入数据库,本节课我们一起学习下如何将二进制数据读取为文件。 1、将二进制流转换为文件这里主要用到了步骤【文本文件输出】。表输入步骤从表中读取blob字段,java代码定义二进制流转换为文件的全路径&#…

Apache Tomcat文件包含漏洞复现(详细教程)

1.漏洞原理 Tomcat 服务器是一个免费的开放源代码的Web 应用服务器,其安装后会默认开启ajp连接器,方便与其他web服务器通过ajp协议进行交互。属于轻量级应用服务器,在中小型系统和并发访问用户不是很多的场合下被普遍使用,是开发和…

设计模式13-单件模式

设计模式13-单件模式 写在前面对象性能模式典型模式1. 单例模式(Singleton Pattern)2. 享元模式(Flyweight Pattern)3. 原型模式(Prototype Pattern)4. 对象池模式(Object Pool Pattern&#xf…

WVP+ZLMediaKit,和摄像头GB28181 实现摄像头播放

WVP(webvideoplatform)是一个基于gb/t28181-2016标准实现的开箱即用的网络视频平台,负责实现核心信令与设备管理后台部分,支持NAT穿透,支持海康、大华、宇视等品牌的IPC、NVR接入。它可以依托ZLMediaKit提供的功能&…

【Django】在vscode中新建Django应用并新增路由

文章目录 打开一个终端输入新建app命令在app下的views.py内写一个视图app路由引入该视图项目路由引入app路由项目(settings.py)引入app(AntappConfig配置类)运行项目 打开一个终端 输入新建app命令 python manage.py startapp antapp在app下的views.py内…

源代码加密软件有什么用?源代码怎么防泄密

在软件开发领域,源代码被视为软件的生命线,它包含了实现特定功能的算法、业务逻辑以及技术细节,是软件公司的核心竞争力所在。由于源代码的重要性,其安全防护变得尤为关键。一旦源代码泄露,企业不仅面临财务损失&#…

thinkphp8结合layui2.9 图片上传验证

<?php declare (strict_types 1);namespace app\index\validate;use think\Validate;class Upload extends Validate {/*** 定义验证规则* 格式&#xff1a;字段名 > [规则1,规则2...]** var array*/protected $rule [image > fileExt:jpg,png|fileSize:204800|fi…

DevExpress WinForms自动表单布局,创建高度可定制用户体验(二)

使用DevExpress WinForms的表单布局组件可以创建高度可定制的应用程序用户体验&#xff0c;从自动安排UI控件到按比例调整大小&#xff0c;DevExpress布局和数据布局控件都可以让您消除与基于像素表单设计相关的麻烦。 P.S&#xff1a;DevExpress WinForms拥有180组件和UI库&a…

【JavaEE初阶】线程的概念及创建

目录 &#x1f4d5; 前言 &#x1f4d5; 认识线程&#xff08;Thread&#xff09; &#x1f6a9; 概念 &#x1f60a;线程是什么 &#x1f642; 为啥要有线程 &#x1f62d; 进程和线程的区别&#xff08;面试题重点&#xff09; &#x1f92d; Java的线程和操作系统线程…

自学Java第15Day

学习目标&#xff1a;面向对象进阶 学习内容&#xff1a;常用API 学习时间&#xff1a; 3 点-下午 6 点 学习产出&#xff1a; 1.Math 方法名说明public static int abs(int a)获取参数绝对值public static double ceil(double a)向上取整public static double floor(double …