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
  }
}
AI 代码解读
Dragonn
+关注
目录
打赏
0
0
0
0
0
分享
相关文章
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
36 0
【06】flutter完成注册页面-密码登录-手机短信验证-找回密码相关页面-并且实现静态跳转打包demo做演示-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草央千澈
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
46 0
1688 商品详情数据接口(H5、APP 端)
1688商品详情数据接口是1688平台提供的数据交互通道,支持H5和APP端,提供商品的全面信息(如标题、价格、库存、销量等),并实时更新。开发者可通过HTTP/HTTPS协议调用接口,使用GET或POST方法获取数据。示例代码展示了如何用Python请求该接口,需替换API密钥和商品ID。
京东商品详情数据接口(H5、APP 端)
京东商品详情数据接口是为H5和APP开发者提供的工具,支持获取商品名称、价格、库存、销量、评价、图片等详细信息,优化应用功能。接口返回JSON或XML格式数据,方便解析处理。适用于电商导购、社交媒体分享、活动推广、价格监控等场景,提升用户体验和购物决策效率。示例代码展示了使用Python发送GET请求的方法。
uni-vue3-wetrip自创跨三端(H5+小程序+App)酒店预订app系统模板
vue3-uni-wetrip原创基于vite5+vue3+uniapp+pinia2+uni-ui等技术开发的仿去哪儿/携程预约酒店客房app系统。实现首页酒店展示、预订搜索、列表/详情、订单、聊天消息、我的等模块。支持编译H5+小程序+App端。
120 8
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
仿青藤之恋社交交友软件系统源码 即时通讯 聊天 微信小程序 App H5三端通用
176 3
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
642 3
APP上架到应用商店需要哪些流程?
APP上架是一个涉及多个步骤和准备工作的过程,主要包括准备上架资料和遵循上架流程两个方面。
256 1
app跳转微信小程序,使用明文scheme拉起
app跳转微信小程序,使用明文scheme拉起
1311 4
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
164 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目

热门文章

最新文章

  • 1
    MNN-LLM App:在手机上离线运行大模型,阿里巴巴开源基于 MNN-LLM 框架开发的手机 AI 助手应用
    178
  • 2
    原生鸿蒙版小艺APP接入DeepSeek-R1,为HarmonyOS应用开发注入新活力
    16
  • 3
    【11】flutter进行了聊天页面的开发-增加了即时通讯聊天的整体页面和组件-切换-朋友-陌生人-vip开通详细页面-即时通讯sdk准备-直播sdk准备-即时通讯有无UI集成的区别介绍-开发完整的社交APP-前端客户端开发+数据联调|以优雅草商业项目为例做开发-flutter开发-全流程-商业应用级实战开发-优雅草Alex
    5
  • 4
    1688APP 原数据 API 接口的开发、应用与收益
    20
  • 5
    PiliPala:开源项目真香,B站用户狂喜!这个开源APP竟能自定义主题+去广告?PiliPala隐藏功能大揭秘
    2
  • 6
    APP-国内主流安卓商店-应用市场-鸿蒙商店上架之必备前提·全国公安安全信息评估报告如何申请-需要安全评估报告的资料是哪些-优雅草卓伊凡全程操作
    15
  • 7
    语音app系统软件源码开发搭建新手启蒙篇
    1
  • 8
    【03】仿站技术之python技术,看完学会再也不用去购买收费工具了-修改整体页面做好安卓下载发给客户-并且开始提交网站公安备案-作为APP下载落地页文娱产品一定要备案-包括安卓android下载(简单)-ios苹果plist下载(稍微麻烦一丢丢)-优雅草卓伊凡
    4
  • 9
    flutter3-dart3-dymall原创仿抖音(直播+短视频+聊天)商城app系统模板
    6
  • 10
    语音交友app系统源码功能及技术研发流程剖析
    5
  • AI助理

    你好,我是AI助理

    可以解答问题、推荐解决方案等