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

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
  }
}

你可能感兴趣的:(H5 跳转到app或者应用商店 vue3)