欢迎来到尧图网

客户服务 关于我们

您的位置:首页 > 文旅 > 艺术 > H5:实现安卓和苹果点击下载App自动跳转到对应的应用市场

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

2025/4/19 13:16:59 来源:https://blog.csdn.net/ChinaDragon10/article/details/147146439  浏览:    关键词: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>

版权声明:

本网仅为发布的内容提供存储空间,不对发表、转载的内容提供任何形式的保证。凡本网注明“来源:XXX网络”的作品,均转载自其它媒体,著作权归作者所有,商业转载请联系作者获得授权,非商业转载请注明出处。

我们尊重并感谢每一位作者,均已注明文章来源和作者。如因作品内容、版权或其它问题,请及时与我们联系,联系邮箱:809451989@qq.com,投稿邮箱:809451989@qq.com

热搜词