H5 跳转到app或者应用商店 vue3 hook写法

简介: H5 跳转到app或者应用商店 vue3 hook写法
import { ref } from "vue"

export const shareHook = () => {
  let u = navigator.userAgent,
    ua = u.toLowerCase();
  const loading = ref(false);

  const isAndroid = ref(false);
  const isIOS = ref(false);
  const isIOS9 = ref(false);
  const isWeixin = ref(false);
  const version = ref(0);
  const showWxToast = ref(false)
  const openAppTime = 3000  //跳转app时间
  const openAppStoreTime = 4000 //跳转到商店时间
  checkSystem();

//检查系统和版本
  function checkSystem() {
    if (ua.indexOf("micromessenger") > -1) {

      isWeixin.value = true;
      return
    }

    else if (u.indexOf("Android") > -1 || u.indexOf("Linux") > -1) {
      //android终端或者uc浏览器
      //Android系统
      isAndroid.value = true;
    }
    if (ua.indexOf("like mac os x") > 0) {
      //ios
      var regStr_saf = /os [\d._]*/gi;
      var verinfo = ua.match(regStr_saf);
      version.value = Number(
        (verinfo + "").replace(/[^0-9|_.]/gi, "").replace(/_/gi, ".")
      );
      var version_str = version + "";
      if (version_str != "undefined" && version_str.length > 0) {
        if (version.value >= 8) {
          // ios9以上

          isIOS9.value = true;
        } else {
          isIOS.value = true;
        }
      }
    }

  }
  // 判断手机上是否安装了app,如果安装直接打开url,如果没安装,执行callback
  function openApp(callback: any) {
    const urlScheme = "XXXX"

    if (loading.value) {
      return
    }

    loading.value = true
    if (isAndroid.value) {
      let timeout: any,
        hasApp = true;
      let openScript = setTimeout(function () {
        if (!hasApp) {

          loading.value = false
          callback && callback();
        }
        document.body.removeChild(ifr);
      }, 5000);

      var t1 = Date.now();
      var ifr = document.createElement("iframe");
      ifr.setAttribute("src", urlScheme);
      ifr.setAttribute("style", "display:none");
      document.body.appendChild(ifr);
    //判断是否能打开APP 如果没打开打开 hasAPP设置false 同下
      timeout = setTimeout(function () {
        var t2 = Date.now();
        if (t2 - t1 < openAppStoreTime + 100) {
          hasApp = false;
        }
      }, openAppStoreTime);
    } else if (isIOS.value) {
      var loadDateTime = new Date();
      window.setTimeout(function () {
        var timeOutDateTime = new Date();
        if (Number(timeOutDateTime) - Number(loadDateTime) < openAppStoreTime) {
          window.location.href = "https://apps.apple.com/cn/app/id1551747739";
        } else {
          window.close();
        }
      }, 25);
      window.location.href = urlScheme;
    } else if (isIOS9.value) {

      setTimeout(function () {
        callback && callback();
        loading.value = false
      }, openAppTime);
      setTimeout(function () {
        location.reload();
      }, openAppStoreTime);
      location.href = urlScheme;

    }
  }

  function goAndriAddr() {
    //跳转到安卓商城地址
    let isVivo = ua.indexOf("vivo") != -1;
    let isHuawei = ua.indexOf("huawei") != -1;
    let isMi = ua.indexOf("redmi") != -1 || ua.indexOf("xiaomi") != -1;
    let isMeizu = ua.indexOf("meizu") != -1;
    let hreff = "";
    if (isVivo) {
      hreff = "vivoMarket://details?id=XXX";
    } else if (isHuawei) {
      hreff = "appmarket://details?id=XXX";
    } else if (isMi) {
      hreff = "mimarket://details?id=XXX";
    } else if (isMeizu) {
      hreff = "mstore://details?id=XXX";
    } else {
      hreff = "XXX"; // 官网下载地址  也可以跳到应用宝
    }

    window.location.href = hreff;
  }
  function goIOSAddr() {
跳转到苹果商城
    window.location.href = "https://apps.apple.com/cn/app/idXXXX";
  }

  const toDownLoad = () => {
    if (isIOS.value || isIOS9.value) {
      openApp(goIOSAddr);
    } else if (isAndroid.value) {
      openApp(goAndriAddr);
    } else if (isWeixin.value) {
      showWxToast.value = true
    }
  };
  return {
    toDownLoad,
    showWxToast,
    loading
  }
}
目录
相关文章
|
9天前
|
缓存 前端开发 IDE
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
|
16天前
|
移动开发 开发框架 小程序
轻松搭建婚恋交友系统源码,H5/小程序/APP自动适配,智能匹配恋爱交友平台快速落地
婚恋交友系统涵盖在线交友、线下活动、专业服务、社交娱乐等,满足用户多样化需求。系统设计简洁易用,提供实名认证、多注册方式及安全保护,确保用户隐私和数据安全。功能丰富,支持图文展示、筛选匹配、聊天互动、虚拟礼物等,提升互动趣味性。平台可分类管理用户、审核信息、智能推荐,优化用户体验。基于TP6+Uni-app框架,实现跨平台同步,支持二次开发,适应不同市场需求。 [了解更多](https://gitee.com/multi-customer-software/jy)
|
2月前
|
XML 移动开发 开发者
京东商品详情数据接口(H5、APP 端)
京东商品详情数据接口是为H5和APP开发者提供的工具,支持获取商品名称、价格、库存、销量、评价、图片等详细信息,优化应用功能。接口返回JSON或XML格式数据,方便解析处理。适用于电商导购、社交媒体分享、活动推广、价格监控等场景,提升用户体验和购物决策效率。示例代码展示了使用Python发送GET请求的方法。
|
29天前
|
移动开发 JSON API
1688 商品详情数据接口(H5、APP 端)
1688商品详情数据接口是1688平台提供的数据交互通道,支持H5和APP端,提供商品的全面信息(如标题、价格、库存、销量等),并实时更新。开发者可通过HTTP/HTTPS协议调用接口,使用GET或POST方法获取数据。示例代码展示了如何用Python请求该接口,需替换API密钥和商品ID。
|
13天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
14 0
|
2月前
|
缓存 移动开发 小程序
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
90 8
|
3月前
|
移动开发 小程序
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
112 3
|
4月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
520 3
|
4月前
|
安全 开发者 UED
APP上架到应用商店需要哪些流程?
APP上架是一个涉及多个步骤和准备工作的过程,主要包括准备上架资料和遵循上架流程两个方面。
207 1
|
6月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
144 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目

热门文章

最新文章

  • 1
    DeepSeek Artifacts:在线实时预览的前端 AI 编程工具,基于DeepSeek V3快速生成React App
  • 2
    圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
  • 3
    【05】2025年1月首发完整版-篇幅较长-苹果app如何上架到app store完整流程·不借助第三方上架工具的情况下无需花钱但需仔细学习-优雅草央千澈详解关于APP签名以及分发-们最关心的一篇来了-IOS上架app
  • 4
    【05】flutter完成注册页面完善样式bug-增加自定义可复用组件widgets-严格规划文件和目录结构-规范入口文件-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
  • 5
    电竞陪玩系统架构优化设计,陪玩app如何提升系统稳定性,陪玩小程序平台的测试与监控
  • 6
    京东商品详情数据接口(H5、APP 端)
  • 7
    年轻人如何运用圈子系统进行扩列,社交圈子论坛app扩列的好处,兴趣行业圈子提升社交技能
  • 8
    【Azure App Service】对App Service中CPU指标数据中系统占用部分(System CPU)的解释
  • 9
    【Azure Logic App】使用MySQL 新增行触发器遇见错误 :“Unknown column 'created_at' in 'order clause'”
  • 10
    app开发之安卓Android+苹果ios打包所有权限对应解释列表【长期更新】-以及默认打包自动添加权限列表和简化后的基本打包权限列表以uniapp为例-优雅草央千澈