使用JS(TS)判断页面在 微信 / 微博 / QQ / 支付宝 各APP平台内置浏览器

这篇具有很好参考价值的文章主要介绍了使用JS(TS)判断页面在 微信 / 微博 / QQ / 支付宝 各APP平台内置浏览器。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

使用JS(TS)判断页面在 微信 / 微博 / QQ / 支付宝 各APP平台内置浏览器

主要代码如下

type NavigatorMap = '微信' | '支付宝' | '钉钉' | '专有钉钉' | '企业微信' | '微信小程序'

export default (nav: NavigatorMap): boolean => {
  const u = navigator.userAgent.toLowerCase()
  const navigatorMap = {
    微信: new RegExp(/micromessenger/, 'i').test(u),  //微信
    企业微信: new RegExp(/micromessenger/, 'i').test(u) && new RegExp(/wxwork/, 'i').test(u),//企业微信
    支付宝: new RegExp(/alipay/, 'i').test(u),// 支付宝
    专有钉钉: new RegExp(/taurusapp/, 'i').test(u),//专有钉钉
    钉钉: new RegExp(/dingtalk/, 'i').test(u), // 钉钉
    微信小程序: (window as any)?.__wxjs_environment == "miniprogram"
  }

  return navigatorMap[nav]
}
使用
navigatorUserAgent('微信') 
// 如果在微信浏览器中直接返回 true,其他平台返回false

技术点说明

navigator.userAgent.toLowerCase() UserAgent 只读属性返回当前浏览器的用户代理字符串。
先看在谷歌浏览器控制台打印的结构:

‘mozilla/5.0 (iphone; cpu iphone os 13_2_3 like mac os x) applewebkit/605.1.15 (khtml, like gecko) version/13.0.3 mobile/15e148 safari/604.1’

主要判断移动端APP的内置浏览器,以移动端钉钉浏览器环境为例

mozilla/5.0 (linux; u; android 11; zh-cn; v1936a build/rp1a.200720.012) applewebkit/537.36 (khtml, like gecko) version/4.0 chrome/69.0.3497.100 uws/3.22.1.210 mobile safari/537.36 aliapp(dingtalk/6.5.20) com.alibaba.android.rimet/24646881 channel/10003993 language/zh-cn abi/64 ut4aplus/0.2.25 colorscheme/light

❗❗❗注意: 该规范要求浏览器通过该字段提供尽可能少的信息。不要假设此属性的值在同一浏览器的未来版本中保持不变。尽量完全不要使用它,或者只在浏览器的当前版本和过去版本中使用它。新的浏览器可能开始使用相同的 UA,或部分,作为一个旧的浏览器,你真的不能保证浏览器代理确实是这个属性的广告。还要记住,浏览器用户可以根据需要更改此字段的值(UA 欺骗)。

Navigator.userAgent文章来源地址https://www.toymoban.com/news/detail-524499.html

到了这里,关于使用JS(TS)判断页面在 微信 / 微博 / QQ / 支付宝 各APP平台内置浏览器的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • uni-app的Vue.js实现微信小程序的紧急事件登记页面功能

    主要功能实现  完成发生时间选择功能,用户可以通过日期选择器选择事件发生的时间。 实现事件类型选择功能,用户可以通过下拉选择框选择事件的类型。 添加子养殖场编号输入框,用户可以输入与事件相关的子养殖场编号。 完成事件描述输入功能,用户可以通过文本输

    2024年02月12日
    浏览(60)
  • uniapp 开发App使用微信H5支付解决方案(包含前后端,后端用的thinkphp)

    我们在开发app常常需要接入支付功能,但是有时候出于包体积或审核的因素,并不想接入支付相关的sdk,这个时候,就可以考虑使用 h5支付 完成购买服务,只需要访问后端返回的 h5支付链接 即可,便捷而简单。 话不多说,进入正题! 前往微信商户平台 - 产品中心 - 我的产品

    2024年02月06日
    浏览(45)
  • js 制作qq、微信 的表情

    2024年04月28日
    浏览(41)
  • uni-app 微信、支付宝APP支付流程

    1、登录微信开放平台,添加移动应用,审核通过后可获取应用ID(AppID,支付订单中需要使用) 2、使用商户号和登录密码登录微信商户平台,进入 “账户中心” “API安全” “设置APIv2密钥” 设置API密钥(用于服务器生成订单),详情参考API证书及密钥 APP支付流程 3、在ma

    2024年02月13日
    浏览(48)
  • vue项目h5端判断所处环境(支付宝、微信、判断安卓和iOS环境)

    一、判断是否为支付宝坏境 isAlipayClient () {     if (navigator.userAgent.indexOf(\\\'AlipayClient\\\') -1) {       return true     }     return false   }, 二、判断安卓还是ios   phoneOs () {     var u = navigator.userAgent,       isAndroid = u.indexOf(\\\'Android\\\') -1 || u.indexOf(\\\'Linux\\\') -1,       isiOS = !!u.match(/(i[^;]+;(

    2024年02月07日
    浏览(73)
  • uni-app | 小程序嵌入H5页面实现支付功能

    前一阵在做公司小程序时,有个需要对接支付的功能。但是本着订单数据和支付统一入口的设计原则,计划是对接公司商城现有的支付体系。故本方案是分析对接商城支付几种可行方案以及每种方案的可行性,最后综合选出一种最佳的方案。 实现方式 跳转商城小程序支付 跳

    2024年02月07日
    浏览(69)
  • ThinkPHP 5 支付宝微信支付(支付宝H5,微信H5、APP支付、公众号支付)

     Pay.php支付控制器 模型:Weixin.php Weixin.php Alipay.php 支付宝需要的submit文件: 点击下载 wx.html在使用微信客户端支付时需要的页面    

    2024年02月08日
    浏览(51)
  • uniapp 手持弹幕全端实现(微信/QQ小程序 + APP)

    见下述效果图,本文话少纯干货

    2024年02月04日
    浏览(45)
  • app第三方支付,微信小程序支付

    最近公司开发一个app,需要从app跳转到小程序去微信支付,当时在网上看了好长时间没有看到适合自己的,在这里记录一下,也方便自己以后可以再复习一下,毕竟本人脑子不太好使,只能记下来。 app跳转页面携带参数到小程序 小程序接收参数,拉起微信支付

    2024年02月16日
    浏览(79)
  • 微信H5页面实现微信小程序支付

    背景: 在微信H5页面已经实现了微信JSAPI的网页支付,老板要求把整个业务线快速转移到微信小程序中,作为懒惰的程序员来说,直接把页面嵌套到小程序不就行了。说干就干,在小程序中设置好基本信息后,一预览居然成功了,一切看来是那么顺利,可到了系统的支付环节

    2024年02月14日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包