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
  }
}
目录
相关文章
|
2月前
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
254 3
|
2月前
|
安全 开发者 UED
APP上架到应用商店需要哪些流程?
APP上架是一个涉及多个步骤和准备工作的过程,主要包括准备上架资料和遵循上架流程两个方面。
92 1
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
109 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
3月前
|
小程序 开发工具
app跳转微信小程序,使用明文scheme拉起
app跳转微信小程序,使用明文scheme拉起
501 4
|
4月前
|
移动开发 前端开发 JavaScript
|
5月前
|
存储 移动开发 Android开发
使用kotlin Jetpack Compose框架开发安卓app, webview中h5如何访问手机存储上传文件
在Kotlin和Jetpack Compose中,集成WebView以支持HTML5页面访问手机存储及上传音频文件涉及关键步骤:1) 添加`READ_EXTERNAL_STORAGE`和`WRITE_EXTERNAL_STORAGE`权限,考虑Android 11的分区存储;2) 配置WebView允许JavaScript和文件访问,启用`javaScriptEnabled`、`allowFileAccess`等设置;3) HTML5页面使用`<input type="file">`让用户选择文件,利用File API;
|
4月前
|
移动开发 JavaScript 开发工具
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
微信浏览器内 h5 直接唤醒 app 之 微信开放标签 wx-open-launch-app
路由不跳转,只留在首页,写的样式写到了App.vue中,没使用router-view
路由不跳转,只留在首页,写的样式写到了App.vue中,没使用router-view
路由不跳转,只留在首页,写的样式写到了App.vue中,没使用router-view
|
6月前
|
移动开发 小程序 开发工具
微信支付的类型分析(JSAPI+APP+H5+NATIVE+付款码+合单)
微信支付的类型分析(JSAPI+APP+H5+NATIVE+付款码+合单)
561 1
|
5月前
【Vue3+TypeScript】CRM系统项目搭建之 — 处理 .app 背景宽高
【Vue3+TypeScript】CRM系统项目搭建之 — 处理 .app 背景宽高
29 0

热门文章

最新文章