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

ChinaDragonDreamer

于 2025-04-13 20:06:11 发布

阅读量230

点赞数 1

分类专栏： # 前端知识点文章标签： android

本文链接：https://blog.csdn.net/ChinaDragon10/article/details/147146439

版权

前端知识点专栏收录该内容

9 篇文章

订阅专栏

一、需求场景

手机扫描下载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 Play
                window.location.href = url;
                // 设置300ms超时检测，失败则跳转下载APK
                setTimeout(() => {
                    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>