JS实现唤起手机APP应用，如果本地没有则跳转到下载地址

实现唤起手机APP应用，如果本地没有则跳转到下载地址

https://blog.csdn.net/caimingxian401/article/details/83379929

代码实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />
    <meta name="format-detection" content="telephone=no">
    <meta http-equiv="Pragma" content="no-cache">
    <meta http-equiv="Cache-control" content="no-cache">
    <meta http-equiv="Cache" content="no-cache">
    <title>啦扑</title>    <style>
        @media screen and (min-width: 900px) {
            body {
                width: 900px;
            }
        }

        body {
            margin: 0 auto;
            padding: 0;
            overflow-x: hidden;
            min-height: 100vh;
        }

        .title_togo {
            margin: 0 auto;
            width: 23%;
            animation: alternate logo_show 3s;
        }

        @keyframes logo_show {
            0% {
                opacity: 0;
            }

            100% {
                opacity: 100;
            }
        }

            .title_togo img {
            /* width: 3.2rem; 
            margin-top: 100%;
            width: 100%;*/
       margin-top: -10%;
            margin-left: -60%;
            width: 100%;
        }

        .ewg_title_box {
            margin: auto 0;
        }

        .ewg_title_box p {
            font-size: .6rem;
            font-family: PingFang-SC-Medium;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0;
            transition: 1s;
            animation: font linear 1s;
            -moz-animation: font linear 1s;
            /* Firefox */
            -webkit-animation: font linear 1s;
            /* Safari and Chrome */
            -o-animation: font 1s;
            /* Opera */
            font-size: .6rem;
            font-family: PingFang SC;
            font-weight: bold;
            color: rgba(65, 53, 94, 1);
            text-align: center;
            line-height: 1.6rem;
            margin: .3rem 0;
        }

        @keyframes font {
            0% {
                /*left: -15rem;*/
                opacity: 0;
                transform: translate3d(0, 3rem, 0);
                -webkit-transform: translate3d(0, 3rem, 0);
            }

            100% {
                opacity: 1;
                transform: translate3d(0, 0, 0);
                -webkit-transform: translate3d(0, 0, 0);
            }
        }

        @keyframes show_slow {
            0% {
                opacity: 0;
                transform: translate3d(0, 10rem, 0);
                -webkit-transform: translate3d(0, 10rem, 0);

            }

            25% {
                opacity: 0;
                transform: translate3d(0, 10rem, 0);
                -webkit-transform: translate3d(0, 10rem, 0);
            }

            50% {
                opacity: 0;
                transform: translate3d(0, 8rem, 0);
                -webkit-transform: translate3d(0, 8rem, 0);
            }

            100% {
                opacity: 1;
                transform: translate3d(0, 0, 0);
                -webkit-transform: translate3d(0, 0, 0);
            }
        }

        .down_btn {
            animation: alternate logo_show 6s;
            margin: 14% auto 0;
            width: 3%;
            height: 3%;
            /*background-image: linear-gradient(-69deg,*/
            /*    #d91227 0%,*/
            /*    #f55f36 100%);*/
            border-radius: .8rem;
            display: flex;
            justify-content: center;
            /*font-family: PingFang-SC-Medium;*/
            align-items: center;
            font-size: .6rem;
            color: #FFF;
            line-height: 16%;
            background: #FF285B;
            /* border: 1px solid #A88758; */
            text-align: center;
            transition: 1s;
            animation: down_btn linear 1.2s;
            -moz-animation: down_btn linear 1.2s;
            /* Firefox */
            -webkit-animation: down_btn linear 1.2s;
            /* Safari and Chrome */
            -o-animation: down_btn 1.2s;
            /* Opera */
            position: relative;
            z-index: 99;
       margin-top: 95%;
        }

        @keyframes down_btn {
            0% {
                /*left: -15rem;*/
                opacity: 0;
                transform: translate3d(0, 3rem, 0);
-webkit-transform: translate3d(0, 3rem, 0);
            }            

25% {                
opacity: 0;
transform: translate3d(0, 3rem, 0);
-webkit-transform: translate3d(0, 3rem, 0);
            }            

100% {                
opacity: 1;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
            }        }        .


down_version {            
height: 10%;
display: flex;
justify-content: center;
flex-flow: nowrap column;
align-items: center;
margin: .3rem auto 0;
animation: alternate logo_show 3s;

transition: 1s;
animation: down_version linear 1.2s;
-moz-animation: down_version linear 1.2s;
/* Firefox */
-webkit-animation: down_version linear 1.2s;
/* Safari and Chrome */
-o-animation: down_version 1.2s;
/* Opera */
        }        

@keyframes down_version {            
0% {                
/*left: -15rem;*/
opacity: 0;
transform: translate3d(0, 3rem, 0);
-webkit-transform: translate3d(0, 3rem, 0);
            }            

25% {                
opacity: 0;
transform: translate3d(0, 3rem, 0);
-webkit-transform: translate3d(0, 3rem, 0);
            }            

50% {                
opacity: 0;
transform: translate3d(0, 3rem, 0);
-webkit-transform: translate3d(0, 3rem, 0);
            }            

100% {                
opacity: 1;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
            }        }        .


down_version p {            
height: 30%;
margin: 0;
color: #7d7d7d;
font-size: .4rem;
        }        .

main_phone {            
z-index: -1;
animation: show_slow alternate 2s;
position: absolute;
top: 0;
left: 0;
height: 100vh;
width: 100%;
        }        .

main_phone img {            
/*height: 18rem;*/
width: 100%;
height: 100%;
/*clip-path: inset(0 0 11.5rem 0);*/
        }        .

pic_box {            
position: absolute;
width: 3rem;
height: 1rem;
        }        .

pic_box img {            
width: 100%;
        }        .

right_pic_box {            
right: 0;
top: 7.8rem;
        }        .

left_pic_box {            
height: 1.2rem;
width: 2.5rem;
left: 0;
top: 11rem;
        }        .

left_pic_box img {            
height: 100%;
        }        .

cover {            
display: none;
position: fixed;
z-index: 100;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0, .7);
        }        .

cover img {            
display: none;
position: absolute;
top: .6rem;
right: 1rem;
width: 60%;
        }        .

cover.ios img.ios {            
display: block;
        }        .

cover.android img.android {            
display: block;
        }        .

main_demo {            
position: absolute;
width: 80%;
bottom: 0;
left: 15%;
transition: 1s;
animation: alternate logo_show 3s;
        }        

@keyframes main_demo {            
0% {                
opacity: 0;
transform: translate3d(0, 10rem, 0);
-webkit-transform: translate3d(0, 10rem, 0);

            }            

25% {                
opacity: 0;
transform: translate3d(0, 10rem, 0);
-webkit-transform: translate3d(0, 10rem, 0);
            }            

50% {                
opacity: 0;
transform: translate3d(0, 8rem, 0);
-webkit-transform: translate3d(0, 8rem, 0);
            }            

100% {                
opacity: 1;
transform: translate3d(0, 0, 0);
-webkit-transform: translate3d(0, 0, 0);
            }        }        .


main_demo img {            
display: block;
width: 100%;
height: 100%;
        }    
</style>    
</head>

<body style="position: relative">
<div class="title_togo">
    <img src="./assets/logo.png" style="height: 220%; width: 220%;">
</div>
<!--    <div class="ewg_title_box">-->
<!--        <p style='font-size: .8rem'>和更多朋友一起享受</p>-->
<!--        <p style='font-size: 1.1rem'>前沿科技带来的改变</p>-->
<!--    </div>-->
<div class="down_btn" onclick="downLoadApp()">
<!--<div class="down_btn" onclick="open_or_download_app()">-->
<!--<div class="down_btn" onclick="download()">-->
<img src="./assets/download.png" >
</div>
<div class="down_version">
    <p>iOS / Android</p>
<!--        <p>版本：V1.2.0</p>-->
</div>

<div class="main_phone">
    <img src="./assets/bg.png">
</div>
<!--    <div class="main_demo">-->
<!--        <img src="./assets/demo.png">-->
<!--    </div>-->

<div class="cover" id="cover">
    <img src="./assets/download_tips_ios.png" alt="" class="ios">
    <img src="./assets/download_tips_android.png" alt="" class="android">
</div>


    function downLoadApp() {
        if (navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)) {
            window.open("CnSellersApp://");//ios app协议
            window.setTimeout(function () {
                window.location.href = "https://apps.apple.com/cn/app/id1187218349";
            }, 5000)
        }
        if (navigator.userAgent.match(/android/i)) {
            window.open("sellingworldapp://");//android app协议
            window.setTimeout(function () {
                window.location.href = "http://openbox.mobilem.360.cn/index/d/sid/4172603";// 下载地址
            }, 5000)
        }
    }

</script>

</body>

</html>

以下为App版 url schemes：

launch center pro支持的参数主要有两个，[prompt]文本输入框和[clipboard]剪贴板
淘宝宝贝搜索 taobao://http://s.taobao.com/?q=[prompt]
淘宝店铺搜索taobao://http://shopsearch.taobao.com/browse/shop_search.htm?q=[prompt]
omnifocus:///add?name=[prompt]&note=[clipboard]
mdict://[prompt]
QQ的url是 mqq://
微信是weixin://
淘宝taobao://
点评dianping:// dianping://search
微博 sinaweibo://
名片全能王camcard://
weico微博weico://
支付宝alipay://
豆瓣fm：doubanradio://
微盘 sinavdisk://
网易公开课ntesopen://
美团 imeituan://
京冬openapp.jdmoble://
人人renren://
我查查 wcc://
1号店wccbyihaodian://
有道词典yddictproapp://
知乎zhihu://
优酷 youku://
————————————————
版权声明：本文为CSDN博主「H.A.N」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/u010960265/java/article/details/88660743

posted @ 2020-04-27 16:03 MargoHu 阅读(661) 评论(0) 收藏举报

刷新页面返回顶部

MargoHu

JS实现唤起手机APP应用，如果本地没有则跳转到下载地址

以下为App版 url schemes：

公告