关闭

支付宝H5唤醒APP

标签: h5唤醒app
12659人阅读 评论(1) 收藏 举报
分类:

https://ds.alipay.com/?from=mobileweb



<html class="normal ">
<head>
    <meta charset="UTF-8">
    <title>支付宝</title>
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <meta name="format-detection" content="email=no">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"> 
    <style>
        *,
        :before,
        :after {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        }
        body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,textarea,p,blockquote,th,td {
            margin: 0;
            padding: 0;
        }
        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        fieldset,img {
            border: 0;
        }
        li {
            list-style: none;
        }
        caption,th {
            text-align: left;
        }
        q:before,q:after {
            content: "";
        }
        input:password {
            ime-mode: disabled;
        }
        :focus {
            outline: 0;
        }
        html,body {
            text-align: center;
            -webkit-user-select: none;
            user-select: none;
            font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;
            font-size: 12px;
            line-height: 1.5;
            text-align: center;
        }
        html{
            background:#181c27;
        }
        .download-cover{
            display:block;
            height:360px;
            background-position:center 0;
            background-repeat:no-repeat;
            -webkit-background-size:320px auto;
            -moz-background-size:320px auto;
            -ms-background-size:320px auto;
            -o-background-size:320px auto;
            background-size:320px auto;
            margin:0 auto;
            overflow:hidden;
        }
        .download-cover .download-cover-slogan,
        .download-cover .download-cover-picture{
            display:none;
        }
        .download-interaction{
            margin-top:20px;
            height:42px;
            padding-bottom:20px;

        }
        .download-interaction .download-button{
            display:none;
            text-decoration: none;
            font-size: 16px;
            color: #ffffff;
            letter-spacing: 2px;
            margin:0 48px;
            background:#181c27;
            height:42px;
            line-height:42px;
            text-align:center;
            border:1px solid #7f7f87;
            border-top-left-radius:2px;
            border-top-right-radius:2px;
            border-bottom-left-radius:2px;
            border-bottom-right-radius:2px;
            -webkit-background-clip:padding-box;
            background-clip:padding-box;
        }

        .download-interaction .download-opening,
        .download-interaction .download-asking{
            display:none;
            color:#fff;
            font-size:15px;
        }
        .download-interaction.download-interaction-asking .download-asking,
        .download-interaction.download-interaction-opening .download-opening,
        .download-interaction.download-interaction-button .download-button{
            display:block;
        }
        .download-putcenter,
        .copyright{
            font-size:12px;
            color:#999;
            text-align:center;
        }
        .download-putcenter{
            padding-top:10px;
        }
        .download-putcenter .version,
        .download-putcenter .date,
        .download-putcenter .size{
            margin-left:3px;
        }
        .copyright{
            padding-bottom:10px;
        }
        a{
            color:#0af;
            text-decoration:none;
        }
    </style>
    <script>
        window.readyToRun = [];
    </script>
</head>
<body ryt14421="1">
    <script>
        function track(type) {
            var img = new Image();
            img.onload = function(){};
            img.onerror = function(){};
            img.src = 'https://cmspromo.alipay.com/mseed/index.jsonp?seed=startAppFrom_'+type+'&t='+(new Date()).getTime();
        }
        if (!location.hash) {
          track('mobileweb');
        }
    </script>
    <script>
        if (typeof AlipayWallet !== 'object') {
            AlipayWallet = {};
        }

        (function () {
            var ua = navigator.userAgent.toLowerCase(),
                locked = false,
                domLoaded = document.readyState==='complete',
                delayToRun;

            function customClickEvent() {
                var clickEvt;
                if (window.CustomEvent) {
                    clickEvt = new window.CustomEvent('click', {
                        canBubble: true,
                        cancelable: true
                    });
                } else {
                    clickEvt = document.createEvent('Event');
                    clickEvt.initEvent('click', true, true);
                }

                return clickEvt;
            }

            function getAndroidVersion() {
                var match = ua.match(/android\s([0-9\.]*)/);
                return match ? match[1] : false;
            }

            var noIntentTest = /aliapp|360 aphone|weibo|windvane|ucbrowser|baidubrowser/.test(ua);
            var hasIntentTest = /chrome|samsung/.test(ua);
            var isAndroid = /android|adr/.test(ua) && !(/windows phone/.test(ua));
            var canIntent = !noIntentTest && hasIntentTest && isAndroid;
            var openInIfr = /weibo|m353/.test(ua);
            var inWeibo = ua.indexOf('weibo')>-1;
          
            if (ua.indexOf('m353')>-1 && !noIntentTest) {
                canIntent = false;
            }

            // 是否在 webview
            var inWebview = '';
            if (inWebview) {
                canIntent = false;
            }


            /**
             * 打开钱包
             * @param   {string}    params  唤起钱包的参数设置('alipays://platformapi/startapp?'后面的值)
             * @param   {boolean}   jumpUrl 唤起钱包后,android下要跳转到的URL;
             *                      若传"default",则为https://d.alipay.com/i/index.htm?nojump=1#once
             */
            AlipayWallet.open = function (params, jumpUrl) {
                if (!domLoaded && (ua.indexOf('360 aphone')>-1 || canIntent)) {
                    var arg = arguments;
                    delayToRun = function () {
                        AlipayWallet.open.apply(null, arg);
                        delayToRun = null;
                    };
                    return;
                }

                // 唤起锁定,避免重复唤起
                if (locked) {
                    return;
                }
                locked = true;

                var o;
                // 参数容错
                if (typeof params==='object') {
                    o = params;
                } else {
                    o = {
                        params: params,
                        jumpUrl: jumpUrl
                    };
                }

                // 参数容错
                if (typeof o.params !== 'string') {
                    o.params = '';
                }
                if (typeof o.openAppStore !== 'boolean') {
                    o.openAppStore = true;
                }

                o.params = o.params || 'appId=20000001';
                o.params = o.params + '';
                o.params = o.params + '&_t=' + (new Date()-0);

                if (o.params.indexOf('startapp?')>-1) {
                    o.params = o.params.split('startapp?')[1];
                } else if (o.params.indexOf('startApp?')>-1) {
                    o.params = o.params.split('startApp?')[1];
                }

                // 是否为RC环境
                var isRc = '';

                // 是否唤起re包
                var isRe = '';
                if (typeof o.isRe==='undefined') {
                    o.isRe = !!isRe;
                }

                // 通过alipays协议唤起钱包
                var schemePrefix;
                if (ua.indexOf('mac os')>-1 && ua.indexOf('mobile')>-1) {
                    // IOS RC包前缀为 alipaysrc
                    if (isRc) {
                        if (o.isRe) {
                            schemePrefix = 'alipayrerc';
                        } else {
                            schemePrefix = 'alipaysrc';
                        }
                    }
                }
                if (!schemePrefix && o.isRe) {
                    schemePrefix = 'alipayre';
                }
                schemePrefix = schemePrefix || 'alipays';

                // 由于历史原因,对 alipayqr 前缀做特殊处理
                if (location.href.indexOf('scheme=alipayqr') > -1) {
                    schemePrefix = 'alipayqr';
                    isRc = false;
                }


                

                if (!canIntent) {
                    var alipaysUrl = schemePrefix + '://platformapi/startapp?' + o.params;

                    if ( ua.indexOf('qq/') > -1 || ( ua.indexOf('safari') > -1 && ua.indexOf('os 9_') > -1 ) ) {
                        var openSchemeLink = document.getElementById('openSchemeLink');
                        if (!openSchemeLink) {
                            openSchemeLink = document.createElement('a');
                            openSchemeLink.id = 'openSchemeLink';
                            openSchemeLink.style.display = 'none';
                            document.body.appendChild(openSchemeLink);
                        }
                        openSchemeLink.href = alipaysUrl;
                        // 执行click
                        openSchemeLink.dispatchEvent(customClickEvent());
                    } else {
                        var ifr = document.createElement('iframe');
                        ifr.src = alipaysUrl;
                        ifr.style.display = 'none';
                        document.body.appendChild(ifr);
                    }
                } else {
                    // android 下 chrome 浏览器通过 intent 协议唤起钱包
                    var packageKey = 'AlipayGphone';
                    if (isRc) {
                        packageKey = 'AlipayGphoneRC';
                    }
                    var intentUrl = 'intent://platformapi/startapp?'+o.params+'#Intent;scheme='+ schemePrefix +';package=com.eg.android.'+ packageKey +';end';

                    var openIntentLink = document.getElementById('openIntentLink');
                    if (!openIntentLink) {
                        openIntentLink = document.createElement('a');
                        openIntentLink.id = 'openIntentLink';
                        openIntentLink.style.display = 'none';
                        document.body.appendChild(openIntentLink);
                    }
                    openIntentLink.href = intentUrl;
                    // 执行click
                    openIntentLink.dispatchEvent(customClickEvent());
                }

                // 延迟移除用来唤起钱包的IFRAME并跳转到下载页
                setTimeout(function () {
                    if (typeof o.jumpUrl !== 'string') {
                        o.jumpUrl = '';
                    }

                    // URL白名单
                    var urlPattern = /^http(s)?:\/\/([a-z0-9_\-]+\.)*(alipay|taobao|alibaba|alibaba-inc|tmall|koubei)\.(com|net|cn|com\.cn)(:\d+)?([/;?].*)?$/;
                    // 默认跳转地址
                    if (o.jumpUrl==='default') {
                        o.jumpUrl = 'https://ds.alipay.com/?nojump=true';
                    }

                    if (o.jumpUrl && typeof o.jumpUrl==='string' && urlPattern.test(o.jumpUrl)) {
                        location.href = o.jumpUrl;
                    }
                }, 1000)

            
                // 唤起加锁,避免短时间内被重复唤起
                setTimeout(function () {
                    locked = false;
                }, 2500)
            }

            if (!domLoaded) {
                document.addEventListener('DOMContentLoaded', function () {
                    domLoaded = true;
                    if (typeof delayToRun === 'function') {
                        delayToRun();
                    }
                }, false);
            }
        })();
    </script>

    <script type="text/javascript">
        (function(){
            var schemeParam = '';
                schemeParam = schemeParam.replace(/&/ig, '&');

                    
                if (!location.hash) {
                    AlipayWallet.open({
                        params: schemeParam,
                        jumpUrl: '',
                        openAppStore: false
                    });
                            }
            
                
                
            function pageFuntion(){
                    }

            if (/complete|loaded|interactive/.test(document.readyState && document.body)) {
                pageFuntion();
            } else {
                document.addEventListener('DOMContentLoaded', function () {
                    pageFuntion();
                }, true);
            }
        })();
    </script>

    <iframe src="alipays://platformapi/startapp?appId=20000001&_t=1464601210564" style="display: none;"></iframe>
    <style>
        .normal .download-cover{
            background-image:url("https://os.alipayobjects.com/rmsportal/hNfINSQHpUoLRly.png");
        }
        html{background-color:#019fe8;}
        a{color:#8cffff;}
        .download-interaction .download-button{background:#019fe8;border:1px solid #fff;}
        .download-putcenter, .copyright{color:#fff;}
    </style>

    <script>
        window.readyToRun.push(function () {
            setTimeout(function () {
                var downloadCover = document.getElementById('downloadCover');
                if (downloadCover) {
                    downloadCover.style.backgroundImage = 'url(https://os.alipayobjects.com/rmsportal/hNfINSQHpUoLRly.png)';
                }
            }, 50);
        });
    </script>

    <div class="download-view-wrap" id="downloadViewWrap">
        <div class="wrap-view-addon-1"></div>
        <div class="wrap-view-addon-2"></div>
        <div class="wrap-view-addon-3"></div>
        <div class="wrap-view-addon-4"></div>
        <div class="download-inner-view" id="downloadInnerView">
            <div class="inner-view-addon-1"></div>
            <div class="inner-view-addon-2"></div>
            <div class="inner-view-addon-3"></div>
            <div class="inner-view-addon-4"></div>
            <div class="download-view" id="downloadView">
                <div class="download-view-addon-1"></div>
                <div class="download-view-addon-2"></div>
                <div class="download-view-addon-3"></div>
                <div class="download-view-addon-4"></div>
                <div class="download-cover" id="downloadCover" style="background-image: url("https://os.alipayobjects.com/rmsportal/hNfINSQHpUoLRly.png");">
                    <div class="download-cover-logo" id="downloadCoverLogo"></div>
                    <div class="download-cover-slogan" id="downloadCoverSlogan"></div>
                    <div class="download-cover-picture" id="downloadCoverPicture"> 
                        <div class="download-cover-picture-1"></div> 
                        <div class="download-cover-picture-2"></div> 
                        <div class="download-cover-picture-3"></div> 
                        <div class="download-cover-picture-4"></div>
                    </div> 
                </div> 
                <div id="J_downloadInteraction" class="download-interaction download-interaction-button"> 
                    <div class="inner-interaction"> 
                        <p class="download-opening">正在打开支付宝<span class="download-opening-1">.</span><span class="download-opening-2">.</span><span class="download-opening-3">.</span></p> 
                        <p class="download-asking">如果没有打开支付宝,<a id="J_downloadBtn" href="https://itunes.apple.com/cn/app/id333206289?mt=8">请下载最新版</a></p>
                        <a id="J_downloadBtn" href="https://itunes.apple.com/cn/app/id333206289?mt=8" class="download-button">立即下载</a> 
                    </div> 
                </div>

                <script>
                document.getElementById('J_downloadBtn').onclick = function () {
                  var ifr = document.createElement('iframe');
                  ifr.src = 'itms-apps://itunes.apple.com/app/zhi-fu-bao/id333206289?mt=8';
                  ifr.style.display = 'none';
                  document.body.appendChild(ifr);
                  location.href = 'itms-apps://itunes.apple.com/app/zhi-fu-bao/id333206289?mt=8';
                };
                </script>
            </div>
        </div>
    </div>

    <div class="base-info">
        <div class="download-putcenter"> <span class="word">最新版本:</span> <span class="version">9.6.6</span> <span class="date">(2016-05-10)</span> <span class="size">93.2MB</span> </div>
        <p class="copyright">支付宝版权所有 © 2004 - 2016</p> 
    </div>

    <script>
        function jsBridgeRun(fn) {
            if (typeof window.AlipayJSBridge==='object' && window.AlipayJSBridge.startupParams) {
                fn();
            } else {
                document.addEventListener('AlipayJSBridgeReady', function () {
                    fn();
                }, false);
            }
        }
        jsBridgeRun(function () {
            AlipayJSBridge.call("hideOptionMenu");
        });

        // 等待运行函数
        var rtrLen = window.readyToRun.length;
        if(window.readyToRun.length) {
            var rtrIdx, rtrFn;
            for(rtrIdx=0; rtrIdx<rtrLen; rtrIdx++) {
                rtrFn = window.readyToRun[rtrIdx];
                typeof rtrFn==='function' && rtrFn();
            }

            window.readyToRun = [];
        }
    </script>
</body></html>


参考文档:http://www.tuicool.com/articles/uQr6Fff

一点万象

https://app.mixcapp.com/h5/share/templates/event.html?eventId=9bfef8ba73c3405d919251daee327ecc&appVersion=2.2.3&mallNo=0205A101&timestamp=1516261044800

function appLink(eventId){
                var url = 'app/eventDetail?eventId=' + eventId;
                var ua = window.navigator.userAgent.toLowerCase();
                if(ua.match(/MicroMessenger/i) == 'micromessenger'){
                    //处理微信端打开
                    if (/iphone|ipad|ipod/.test(ua)) {
                        $(".goods-detail").css({
                            display: "none"
                        })
                        $(".ios-down").css({
                            display: "block",
                            background: "#f0eff5;"
                        })
                    } else if (/android/.test(ua)) {
                        $(".goods-detail").css({
                            display: "none"
                        })
                        $(".android-down").css({
                            display: "block",
                            background: "#f7f7f7;"
                        })
                    }

                }else{
                    if(navigator.userAgent.match(/(iPhone|iPod|iPad);?/i)){
                        //ios设备
                        window.location = 'mixc://'+url;
                        setTimeout(function(){
                            window.location = 'https://itunes.apple.com/app/id1142151719';
                        }, 3000);
                    }else if(navigator.userAgent.match(/android/i)){
                        //安卓设备
                        window.location = 'mixc://'+url;
                        setTimeout(function(){
                            window.location = 'http://a.app.qq.com/o/simple.jsp?pkgname=com.crland.mixc';
                        }, 3000);
                    }
                }
            }




0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

在微信、支付宝、百度钱包实现点击返回按钮关闭当前页面和窗口

最近在使用微信、支付宝、百度钱包实现网页支付,对支付成功将自动关闭页面,对于支付失败,将显示错误信息。当在错误页面的时候,点击返回 或者Android物理按键上一步的时候,将关闭页面。 在微信、支付...
  • Mr_Smile2014
  • Mr_Smile2014
  • 2016-07-29 15:41
  • 6934

支付宝H5唤醒APP

html class="normal ">   head>       meta charset="UTF-8"> &...
  • jiang314
  • jiang314
  • 2016-08-21 21:51
  • 7153

h5页面调用支付宝支付

写的测试流程,比较乱,望勿吐槽 1、提交 支付基础数据 2、处理提交的支付数据 @RequestMapping("np-pay-confirm") ...
  • cai_chinasoft
  • cai_chinasoft
  • 2016-01-29 16:53
  • 24051

Android支付宝支付集成,同时支持无客户端H5支付

支付宝支付在app项目中非常常见,现在把集成步骤提出了,虽然非常简单,但是,希望对第一次集成支付的同学有帮助。 要集成别人的东西,第一步当然是去看他的开发文档,支付宝支付以前是在支付宝开发者平台,现...
  • wb_001
  • wb_001
  • 2016-09-12 17:40
  • 5667

Android WebView 微信和支付宝H5调用本地app支付

思路:在webview拦截网址,判断出是微信和支付宝的支付链接,然后本地调用app客户端支付。  下面上代码:  webView.setWebViewClient(new WebViewClien...
  • u013279866
  • u013279866
  • 2017-10-12 11:43
  • 444

h5调用支付宝接口

1.http://write.blog.csdn.net/postedit这是官方文档的地址 2.需要到GitHub上下载pingpp.js这个文件 3.在页面引入这个js 4.pingpp.crea...
  • susuzhe123
  • susuzhe123
  • 2017-04-19 12:18
  • 6555

支付宝手机网页唤醒app支付

其实支付宝并不怎么难,网上也有很多资料,不像微信比较麻烦,支付宝刚刚做完,微信正在接入中 最主要的还是理解过程和原理,知道调来调去的都是什么,传来传去的都是什么,我打了一些log,有助于大家的理解,只...
  • Goligory
  • Goligory
  • 2017-08-25 14:59
  • 2892

支付宝移动网页调用

  • 2013-09-23 10:02
  • 5.06MB
  • 下载

调用微信和支付宝第三方接口方法总结

最近项目上用到了调用微信和支付宝的第三方支付接口,因为以前没用过,所以这次用到了之后总结一下分享给大家,这里介绍两种支付方式,即app支付和扫码支付方式。 一、app支付(这里只介绍java端调用支付...
  • yufeng005
  • yufeng005
  • 2017-01-17 15:23
  • 16881

通过一个链接打开本地app,或者去下载app

目录(?)[-] app端的处理2js的处理 以前支付宝发短信给你手机 ,然后你点开这个链接的时候会发现它自动的打开了支付宝软件   ,这个是如何做到的呢 ? 我认为...
  • zjlovety
  • zjlovety
  • 2017-02-04 13:51
  • 1503
    个人资料
    • 访问:151442次
    • 积分:2442
    • 等级:
    • 排名:第17521名
    • 原创:89篇
    • 转载:64篇
    • 译文:0篇
    • 评论:8条
    文章分类