通过navigator.userAgent解析当前是否qq微信移动设备中打开

本文提供了一段JavaScript代码,用于检测用户设备类型,包括移动设备、iOS、Android、iPhone、iPad以及应用环境如微信和QQ。通过分析UserAgent字符串,实现对不同设备和应用的识别。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

话不多说,直接上代码

var ua = navigator.userAgent.toLocaleLowerCase();
//是否移动设备
var isMobile = /mobile/i.test(ua);
var isAndroid = /android/i.test(ua);
//是否 iOS 设备
var isiOS = !!ua.match(/\(i[^;]+;( u;)? cpu.+mac os x/);
//是否 iPhone 设备
var isiPhone = /iphone/i.test(ua);
// 是否 iPad 设备
var isiPad = /ipad/i.test(ua);
//是否在微信中运行
var isWechat = /micromessenger/i.test(ua);
//是否在qq中打开
var isIosQQ = (isiOS && / QQ/i.test(navigator.userAgent));
var isAndroidQQ = (isAndroid && /MQQBrowser/i.test(navigator.userAgent) && /QQ/i.test((navigator.userAgent).split('MQQBrowser')));

需要注意的就是qq的判断ios和安卓是不一样的

### 判断网页是否通过微信小程序打开 为了判断当前网页是否微信小程序打开,可以通过 `wx.getLaunchOptionsSync()` 接口获取小程序启动参数[^1]。此接口返回的对象中包含 `scene` 字段,用于表示小程序的启动场景。当场景值为特定范围时,可以确认页面是由微信小程序内的 `web-view` 打开。 以下是具体的实现方式: #### 使用 `wx.getLaunchOptionsSync()` 在微信小程序环境中调用 `wx.getLaunchOptionsSync()` 可以同步获取小程序的启动信息。其中的关键字段如下: - **`path`**: 当前页面路径。 - **`query`**: 页面所带查询参数对象。 - **`scene`**: 启动场景值,具体含义可参考官方文档中的 [场景值列表](https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/scene.html)。 对于 `web-view` 跳转至 H5 的情况,通常会携带自定义参数传递给目标页面。这些参数可通过 URL 查询字符串的形式附加到 H5 链接上,并在 H5 页面加载时解析。 #### 实现代码示例 以下是一个完整的解决方案,展示如何在 H5 页面中检测是否来自微信小程序: ```javascript // 检测是否通过微信小程序 web-view 打开 function isFromWechatMiniProgram() { const ua = navigator.userAgent.toLowerCase(); // 判断是否运行于微信环境 if (ua.indexOf('micromessenger') === -1) { return false; // 不是微信浏览器 } // 解析 URL 参数 const urlParams = new URLSearchParams(window.location.search); const fromSource = urlParams.get('from'); // 假设小程序传递了一个名为 'from' 的参数 // 如果存在指定参数,则认为是从微信小程序跳转而来 return fromSource === 'miniProgram'; } document.addEventListener('DOMContentLoaded', () => { if (isFromWechatMiniProgram()) { console.log('当前页面由微信小程序打开'); } else { console.log('当前页面未由微信小程序打开'); } }); ``` 上述代码逻辑基于两个前提条件: 1. 用户设备处于微信客户端内; 2. 微信小程序向 H5 传递了明确标识来源的参数(如 `?from=miniProgram`),以便区分不同入口[^4]。 #### 注意事项 - 若需进一步增强兼容性和准确性,应结合实际业务需求调整参数名称及其验证机制。 - 对于某些特殊场景下的异常处理(例如缓存导致旧版页面被加载等情况),务必提前测试并做好预案。 --- ###
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值