H5：实现安卓和苹果点击下载App自动跳转到对应的应用市场

一、需求场景

手机扫描下载App，需要根据不同手机自动跳转到对应的应用市场（商店）里，苹果手机直接打开App Store里指定的app页面，安卓手机如果是海外用户则打开GooglePlay 商店里指定的app页面，国内直接下载apk安装包。

二、示例

效果图

示例代码

<template><div><div class="tip">温馨提示</div><!-- <div class="tip">确保点击下载App即可跳转到Google Play 商店里的 指定的 app 页面  </div> --><div class="tip">推荐使用Chorme或FireFox浏览器打开此链接</div><div class="btn" @click="downloadApp"> 点击下载App </div></div></template>
<script>
export default {data() {return {url: ""}},mounted(){setTimeout(() => {this.downloadApp();}, 1000);},methods: {downloadApp() {const userAgent = navigator.userAgent;const isiOS = /iPad|iPhone|iPod/.test(userAgent) && !window.MSStream;const isAndroid = /android/i.test(userAgent);if (isiOS) {// 跳转至App Store   id000000 需要添加下载app的id// window.location.href ="https://itunes.apple.com/app/id000000";window.location.href ="https://apps.apple.com/app/id000000";} else {// const url = 'https://play.google.com/store/apps/details?id=com.test.app';const url = 'intent://details?id=com.test.app#Intent;scheme=market;package=com.android.vending;end';console.log("执行了 打开Google Play url -> ", url);// 尝试通过Intent打开Google Playwindow.location.href = url;// 设置300ms超时检测，失败则跳转下载APKsetTimeout(() => {window.location.href = 'http://www.test.com/downLoad/test.apk';console.log("执行了 从官网下载")}, 300);}}}
}
</script><style scoped lang="scss">
.btn {width: 200px;height: 50px;background-color: #E12817;align-content: center;border-radius: 10px;font-size: 20px;color: white;font-weight: bold;margin-left: 80px;margin-top: 40px;
}.tip {font-size: 16px;color: black;font-weight: normal;margin-left: 10px;margin-right: 10px;margin-top: 20px;
}
</style>