admin管理员组文章数量:1657207
需求
判断是否有安装app, 安装了则跳转应用, 没有安装则跳转下载页
参考文章
通过浏览器判断是否安装APP
H5判断是否安装某款app,打开app或跳转到app下载页面
完整代码
<template>
<iframe
:value="iframeSrc"
ref="iframe"
style="display: none; width: 0; height: 0"
></iframe>
<div class="button" @click="openApp">
<span>test</span>
</div>
</template>
<script setup lang="ts">
import { ref } from "vue";
const iframeSrc = ref("");
const iframe = ref(null);
const iframeConfig = {
iosScheme: "com.example.app://",
iosStoreLink: "https://apps.apple/app/",
androidScheme: "com.example.app://",
androidStoreLink: "https://play.google/store/apps/details?",
fallbackUrl: "https:/www.miti.chat",
};
function openApp() {
const userAgent = navigator.userAgent;
const startTime = new Date().getTime();
console.log(startTime);
console.log(userAgent);
if (/iPhone|iPod|iPad/i.test(userAgent)) {
iframeSrc.value = iframeConfig.iosScheme;
setTimeout(() => {
const endTime = new Date().getTime();
if (endTime - startTime < 2000) {
window.location.href = iframeConfig.iosStoreLink;
}
}, 1000);
} else if (/android/i.test(userAgent)) {
iframeSrc.value = iframeConfig.androidScheme;
setTimeout(() => {
const endTime = new Date().getTime();
if (endTime - startTime < 2000) {
window.location.href = iframeConfig.androidStoreLink;
}
}, 1000);
iframeSrc.value = "";
} else {
window.location.href = iframeConfig.fallbackUrl;
}
console.log(iframeSrc.value);
}
</script>
const CONFIG = {
iosScheme: "com.example.app://", // 替换成你的 iOS 应用 URL
iosDownload: "https://apps.apple/app/example-app-id", // 替换成你的 iOS 下载页面 URL
androidScheme: "com.example.app://", // 替换成你的 Android 应用 URL
androidDownload:
"https://play.google/store/apps/details?id=com.example.app", // 替换成你的 Android 下载页面 URL
};
function openApp() {
const userAgent = navigator.userAgent;
const iframe: HTMLIFrameElement = document.createElement("iframe");
iframe.style.display = "none"; // 确保 iframe 不会显示在页面上
const startTime = new Date().getTime();
let hasApp = true; // 假设设备上已安装应用
if (/iPhone|iPod|iPad/i.test(userAgent)) {
iframe.src = CONFIG.iosScheme; // 尝试打开 iOS 应用的 URL
setTimeout(() => {
const endTime = new Date().getTime();
if (endTime - startTime < 2000) {
hasApp = false;
window.location.href = CONFIG.iosDownload; // 跳转到 iOS 下载页面的 URL
}
document.body.removeChild(iframe);
}, 1000);
} else if (/android/i.test(userAgent)) {
iframe.src = CONFIG.androidScheme; // 尝试打开 Android 应用的 URL
setTimeout(() => {
const endTime = new Date().getTime();
if (endTime - startTime < 2000) {
hasApp = false;
window.location.href = CONFIG.androidDownload; // 跳转到 Android 下载页面的 URL
}
document.body.removeChild(iframe);
}, 1000);
}
}
export default openApp;
版权声明:本文标题:h5端实现判断是否安装app和唤起app 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://m.elefans.com/dongtai/1729775323a1212439.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论