支付宝H5唤醒APP

  1. <html class="normal ">  
  2. <head>  
  3.     <meta charset="UTF-8">  
  4.     <title>支付宝title>  
  5.     <meta name="apple-mobile-web-app-capable" content="yes">  
  6.     <meta name="apple-mobile-web-app-status-bar-style" content="black">  
  7.     <meta name="format-detection" content="telephone=no">  
  8.     <meta name="format-detection" content="email=no">  
  9.     <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">   
  10.     <style>  
  11.         *,  
  12.         :before,  
  13.         :after {  
  14.             -webkit-tap-highlight-color: rgba(0, 0, 0, 0);  
  15.         }  
  16.         body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,form,fieldset,legend,input,textarea,p,blockquote,th,td {  
  17.             margin: 0;  
  18.             padding: 0;  
  19.         }  
  20.         table {  
  21.             border-collapse: collapse;  
  22.             border-spacing: 0;  
  23.         }  
  24.         fieldset,img {  
  25.             border: 0;  
  26.         }  
  27.         li {  
  28.             list-style: none;  
  29.         }  
  30.         caption,th {  
  31.             text-align: left;  
  32.         }  
  33.         q:before,q:after {  
  34.             content: "";  
  35.         }  
  36.         input:password {  
  37.             ime-mode: disabled;  
  38.         }  
  39.         :focus {  
  40.             outline: 0;  
  41.         }  
  42.         html,body {  
  43.             text-align: center;  
  44.             -webkit-user-select: none;  
  45.             user-select: none;  
  46.             font-family:"Helvetica Neue",Helvetica,STHeiTi,sans-serif;  
  47.             font-size: 12px;  
  48.             line-height: 1.5;  
  49.             text-align: center;  
  50.         }  
  51.         html{  
  52.             background:#181c27;  
  53.         }  
  54.         .download-cover{  
  55.             display:block;  
  56.             height:360px;  
  57.             background-position:center 0;  
  58.             background-repeat:no-repeat;  
  59.             -webkit-background-size:320px auto;  
  60.             -moz-background-size:320px auto;  
  61.             -ms-background-size:320px auto;  
  62.             -o-background-size:320px auto;  
  63.             background-size:320px auto;  
  64.             margin:0 auto;  
  65.             overflow:hidden;  
  66.         }  
  67.         .download-cover .download-cover-slogan,  
  68.         .download-cover .download-cover-picture{  
  69.             display:none;  
  70.         }  
  71.         .download-interaction{  
  72.             margin-top:20px;  
  73.             height:42px;  
  74.             padding-bottom:20px;  
  75.   
  76.         }  
  77.         .download-interaction .download-button{  
  78.             display:none;  
  79.             text-decoration: none;  
  80.             font-size: 16px;  
  81.             color: #ffffff;  
  82.             letter-spacing: 2px;  
  83.             margin:0 48px;  
  84.             background:#181c27;  
  85.             height:42px;  
  86.             line-height:42px;  
  87.             text-align:center;  
  88.             border:1px solid #7f7f87;  
  89.             border-top-left-radius:2px;  
  90.             border-top-right-radius:2px;  
  91.             border-bottom-left-radius:2px;  
  92.             border-bottom-right-radius:2px;  
  93.             -webkit-background-clip:padding-box;  
  94.             background-clip:padding-box;  
  95.         }  
  96.   
  97.         .download-interaction .download-opening,  
  98.         .download-interaction .download-asking{  
  99.             display:none;  
  100.             color:#fff;  
  101.             font-size:15px;  
  102.         }  
  103.         .download-interaction.download-interaction-asking .download-asking,  
  104.         .download-interaction.download-interaction-opening .download-opening,  
  105.         .download-interaction.download-interaction-button .download-button{  
  106.             display:block;  
  107.         }  
  108.         .download-putcenter,  
  109.         .copyright{  
  110.             font-size:12px;  
  111.             color:#999;  
  112.             text-align:center;  
  113.         }  
  114.         .download-putcenter{  
  115.             padding-top:10px;  
  116.         }  
  117.         .download-putcenter .version,  
  118.         .download-putcenter .date,  
  119.         .download-putcenter .size{  
  120.             margin-left:3px;  
  121.         }  
  122.         .copyright{  
  123.             padding-bottom:10px;  
  124.         }  
  125.         a{  
  126.             color:#0af;  
  127.             text-decoration:none;  
  128.         }  
  129.     style>  
  130.     <script>  
  131.         window.readyToRun = [];  
  132.     script>  
  133. head>  
  134. <body ryt14421="1">  
  135.     <script>  
  136.         function track(type) {  
  137.             var img = new Image();  
  138.             img.onload = function(){};  
  139.             img.onerror = function(){};  
  140.             img.src = 'https://cmspromo.alipay.com/mseed/index.jsonp?seed=startAppFrom_'+type+'&t='+(new Date()).getTime();  
  141.         }  
  142.         if (!location.hash) {  
  143.           track('mobileweb');  
  144.         }  
  145.     script>  
  146.     <script>  
  147.         if (typeof AlipayWallet !== 'object') {  
  148.             AlipayWallet = {};  
  149.         }  
  150.   
  151.         (function () {  
  152.             var ua = navigator.userAgent.toLowerCase(),  
  153.                 locked = false,  
  154.                 domLoaded = document.readyState==='complete',  
  155.                 delayToRun;  
  156.   
  157.             function customClickEvent() {  
  158.                 var clickEvt;  
  159.                 if (window.CustomEvent) {  
  160.                     clickEvt = new window.CustomEvent('click', {  
  161.                         canBubble: true,  
  162.                         cancelable: true  
  163.                     });  
  164.                 } else {  
  165.                     clickEvt = document.createEvent('Event');  
  166.                     clickEvt.initEvent('click', true, true);  
  167.                 }  
  168.   
  169.                 return clickEvt;  
  170.             }  
  171.   
  172.             function getAndroidVersion() {  
  173.                 var match = ua.match(/android\s([0-9\.]*)/);  
  174.                 return match ? match[1] : false;  
  175.             }  
  176.   
  177.             var noIntentTest = /aliapp|360 aphone|weibo|windvane|ucbrowser|baidubrowser/.test(ua);  
  178.             var hasIntentTest = /chrome|samsung/.test(ua);  
  179.             var isAndroid = /android|adr/.test(ua) && !(/windows phone/.test(ua));  
  180.             var canIntent = !noIntentTest && hasIntentTest && isAndroid;  
  181.             var openInIfr = /weibo|m353/.test(ua);  
  182.             var inWeibo = ua.indexOf('weibo')>-1;  
  183.             
  184.             if (ua.indexOf('m353')>-1 && !noIntentTest) {  
  185.                 canIntent = false;  
  186.             }  
  187.   
  188.             // 是否在 webview  
  189.             var inWebview = '';  
  190.             if (inWebview) {  
  191.                 canIntent = false;  
  192.             }  
  193.   
  194.   
  195.             /**  
  196.              * 打开钱包  
  197.              * @param   {string}    params  唤起钱包的参数设置('alipays://platformapi/startapp?'后面的值)  
  198.              * @param   {boolean}   jumpUrl 唤起钱包后,android下要跳转到的URL;  
  199.              *                      若传"default",则为https://d.alipay.com/i/index.htm?nojump=1#once  
  200.              */  
  201.             AlipayWallet.open = function (params, jumpUrl) {  
  202.                 if (!domLoaded && (ua.indexOf('360 aphone')>-1 || canIntent)) {  
  203.                     var arg = arguments;  
  204.                     delayToRun = function () {  
  205.                         AlipayWallet.open.apply(null, arg);  
  206.                         delayToRun = null;  
  207.                     };  
  208.                     return;  
  209.                 }  
  210.   
  211.                 // 唤起锁定,避免重复唤起  
  212.                 if (locked) {  
  213.                     return;  
  214.                 }  
  215.                 locked = true;  
  216.   
  217.                 var o;  
  218.                 // 参数容错  
  219.                 if (typeof params==='object') {  
  220.                     o = params;  
  221.                 } else {  
  222.                     o = {  
  223.                         params: params,  
  224.                         jumpUrl: jumpUrl  
  225.                     };  
  226.                 }  
  227.   
  228.                 // 参数容错  
  229.                 if (typeof o.params !== 'string') {  
  230.                     o.params = '';  
  231.                 }  
  232.                 if (typeof o.openAppStore !== 'boolean') {  
  233.                     o.openAppStore = true;  
  234.                 }  
  235.   
  236.                 o.params = o.params || 'appId=20000001';  
  237.                 o.params = o.params + '';  
  238.                 o.params = o.params + '&_t=' + (new Date()-0);  
  239.   
  240.                 if (o.params.indexOf('startapp?')>-1) {  
  241.                     o.params = o.params.split('startapp?')[1];  
  242.                 } else if (o.params.indexOf('startApp?')>-1) {  
  243.                     o.params = o.params.split('startApp?')[1];  
  244.                 }  
  245.   
  246.                 // 是否为RC环境  
  247.                 var isRc = '';  
  248.   
  249.                 // 是否唤起re包  
  250.                 var isRe = '';  
  251.                 if (typeof o.isRe==='undefined') {  
  252.                     o.isRe = !!isRe;  
  253.                 }  
  254.   
  255.                 // 通过alipays协议唤起钱包  
  256.                 var schemePrefix;  
  257.                 if (ua.indexOf('mac os')>-1 && ua.indexOf('mobile')>-1) {  
  258.                     // IOS RC包前缀为 alipaysrc  
  259.                     if (isRc) {  
  260.                         if (o.isRe) {  
  261.                             schemePrefix = 'alipayrerc';  
  262.                         } else {  
  263.                             schemePrefix = 'alipaysrc';  
  264.                         }  
  265.                     }  
  266.                 }  
  267.                 if (!schemePrefix && o.isRe) {  
  268.                     schemePrefix = 'alipayre';  
  269.                 }  
  270.                 schemePrefix = schemePrefix || 'alipays';  
  271.   
  272.                 // 由于历史原因,对 alipayqr 前缀做特殊处理  
  273.                 if (location.href.indexOf('scheme=alipayqr') > -1) {  
  274.                     schemePrefix = 'alipayqr';  
  275.                     isRc = false;  
  276.                 }  
  277.   
  278.   
  279.                   
  280.   
  281.                 if (!canIntent) {  
  282.                     var alipaysUrl = schemePrefix + '://platformapi/startapp?' + o.params;  
  283.   
  284.                     if ( ua.indexOf('qq/') > -1 || ( ua.indexOf('safari') > -1 && ua.indexOf('os 9_') > -1 ) ) {  
  285.                         var openSchemeLink = document.getElementById('openSchemeLink');  
  286.                         if (!openSchemeLink) {  
  287.                             openSchemeLink = document.createElement('a');  
  288.                             openSchemeLink.id = 'openSchemeLink';  
  289.                             openSchemeLink.style.display = 'none';  
  290.                             document.body.appendChild(openSchemeLink);  
  291.                         }  
  292.                         openSchemeLink.href = alipaysUrl;  
  293.                         // 执行click  
  294.                         openSchemeLink.dispatchEvent(customClickEvent());  
  295.                     } else {  
  296.                         var ifr = document.createElement('iframe');  
  297.                         ifr.src = alipaysUrl;  
  298.                         ifr.style.display = 'none';  
  299.                         document.body.appendChild(ifr);  
  300.                     }  
  301.                 } else {  
  302.                     // android 下 chrome 浏览器通过 intent 协议唤起钱包  
  303.                     var packageKey = 'AlipayGphone';  
  304.                     if (isRc) {  
  305.                         packageKey = 'AlipayGphoneRC';  
  306.                     }  
  307.                     var intentUrl = 'intent://platformapi/startapp?'+o.params+'#Intent;scheme='+ schemePrefix +';package=com.eg.android.'+ packageKey +';end';  
  308.   
  309.                     var openIntentLink = document.getElementById('openIntentLink');  
  310.                     if (!openIntentLink) {  
  311.                         openIntentLink = document.createElement('a');  
  312.                         openIntentLink.id = 'openIntentLink';  
  313.                         openIntentLink.style.display = 'none';  
  314.                         document.body.appendChild(openIntentLink);  
  315.                     }  
  316.                     openIntentLink.href = intentUrl;  
  317.                     // 执行click  
  318.                     openIntentLink.dispatchEvent(customClickEvent());  
  319.                 }  
  320.   
  321.                 // 延迟移除用来唤起钱包的IFRAME并跳转到下载页  
  322.                 setTimeout(function () {  
  323.                     if (typeof o.jumpUrl !== 'string') {  
  324.                         o.jumpUrl = '';  
  325.                     }  
  326.   
  327.                     // URL白名单  
  328.                     var urlPattern = /^http(s)?:\/\/([a-z0-9_\-]+\.)*(alipay|taobao|alibaba|alibaba-inc|tmall|koubei)\.(com|net|cn|com\.cn)(:\d+)?([/;?].*)?$/;  
  329.                     // 默认跳转地址  
  330.                     if (o.jumpUrl==='default') {  
  331.                         o.jumpUrl = 'https://ds.alipay.com/?nojump=true';  
  332.                     }  
  333.   
  334.                     if (o.jumpUrl && typeof o.jumpUrl==='string' && urlPattern.test(o.jumpUrl)) {  
  335.                         location.href = o.jumpUrl;  
  336.                     }  
  337.                 }, 1000)  
  338.   
  339.               
  340.                 // 唤起加锁,避免短时间内被重复唤起  
  341.                 setTimeout(function () {  
  342.                     locked = false;  
  343.                 }, 2500)  
  344.             }  
  345.   
  346.             if (!domLoaded) {  
  347.                 document.addEventListener('DOMContentLoaded', function () {  
  348.                     domLoaded = true;  
  349.                     if (typeof delayToRun === 'function') {  
  350.                         delayToRun();  
  351.                     }  
  352.                 }, false);  
  353.             }  
  354.         })();  
  355.     script>  
  356.   
  357.     <script type="text/javascript">  
  358.         (function(){  
  359.             var schemeParam = '';  
  360.                 schemeParam = schemeParam.replace(/&/ig, '&');  
  361.   
  362.                       
  363.                 if (!location.hash) {  
  364.                     AlipayWallet.open({  
  365.                         params: schemeParam,  
  366.                         jumpUrl: '',  
  367.                         openAppStore: false  
  368.                     });  
  369.                             }  
  370.               
  371.                   
  372.                   
  373.             function pageFuntion(){  
  374.                     }  
  375.   
  376.             if (/complete|loaded|interactive/.test(document.readyState && document.body)) {  
  377.                 pageFuntion();  
  378.             } else {  
  379.                 document.addEventListener('DOMContentLoaded', function () {  
  380.                     pageFuntion();  
  381.                 }, true);  
  382.             }  
  383.         })();  
  384.     script>  
  385.   
  386.     <iframe src="alipays://platformapi/startapp?appId=20000001&_t=1464601210564" style="display: none;">iframe>  
  387.     <style>  
  388.         .normal .download-cover{  
  389.             background-image:url("https://os.alipayobjects.com/rmsportal/hNfINSQHpUoLRly.png");  
  390.         }  
  391.         html{background-color:#019fe8;}  
  392.         a{color:#8cffff;}  
  393.         .download-interaction .download-button{background:#019fe8;border:1px solid #fff;}  
  394.         .download-putcenter, .copyright{color:#fff;}  
  395.     style>  
  396.   
  397.     <script>  
  398.         window.readyToRun.push(function () {  
  399.             setTimeout(function () {  
  400.                 var downloadCover = document.getElementById('downloadCover');  
  401.                 if (downloadCover) {  
  402.                     downloadCover.style.backgroundImage = 'url(https://os.alipayobjects.com/rmsportal/hNfINSQHpUoLRly.png)';  
  403.                 }  
  404.             }, 50);  
  405.         });  
  406.     script>  
  407.   
  408.     <div class="download-view-wrap" id="downloadViewWrap">  
  409.         <div class="wrap-view-addon-1">div>  
  410.         <div class="wrap-view-addon-2">div>  
  411.         <div class="wrap-view-addon-3">div>  
  412.         <div class="wrap-view-addon-4">div>  
  413.         <div class="download-inner-view" id="downloadInnerView">  
  414.             <div class="inner-view-addon-1">div>  
  415.             <div class="inner-view-addon-2">div>  
  416.             <div class="inner-view-addon-3">div>  
  417.             <div class="inner-view-addon-4">div>  
  418.             <div class="download-view" id="downloadView">  
  419.                 <div class="download-view-addon-1">div>  
  420.                 <div class="download-view-addon-2">div>  
  421.                 <div class="download-view-addon-3">div>  
  422.                 <div class="download-view-addon-4">div>  
  423.                 <div class="download-cover" id="downloadCover" style="background-image: url("https://os.alipayobjects.com/rmsportal/hNfINSQHpUoLRly.png");">  
  424.                     <div class="download-cover-logo" id="downloadCoverLogo">div>  
  425.                     <div class="download-cover-slogan" id="downloadCoverSlogan">div>  
  426.                     <div class="download-cover-picture" id="downloadCoverPicture">   
  427.                         <div class="download-cover-picture-1">div>   
  428.                         <div class="download-cover-picture-2">div>   
  429.                         <div class="download-cover-picture-3">div>   
  430.                         <div class="download-cover-picture-4">div>  
  431.                     div>   
  432.                 div>   
  433.                 <div id="J_downloadInteraction" class="download-interaction download-interaction-button">   
  434.                     <div class="inner-interaction">   
  435.                         <p class="download-opening">正在打开支付宝<span class="download-opening-1">.span><span class="download-opening-2">.span><span class="download-opening-3">.span>p>   
  436.                         <p class="download-asking">如果没有打开支付宝,<a id="J_downloadBtn" href="https://itunes.apple.com/cn/app/id333206289?mt=8">请下载最新版a>p>  
  437.                         <a id="J_downloadBtn" href="https://itunes.apple.com/cn/app/id333206289?mt=8" class="download-button">立即下载a>   
  438.                     div>   
  439.                 div>  
  440.   
  441.                 <script>  
  442.                 document.getElementById('J_downloadBtn').onclick = function () {  
  443.                   var ifr = document.createElement('iframe');  
  444.                   ifr.src = 'itms-apps://itunes.apple.com/app/zhi-fu-bao/id333206289?mt=8';  
  445.                   ifr.style.display = 'none';  
  446.                   document.body.appendChild(ifr);  
  447.                   location.href = 'itms-apps://itunes.apple.com/app/zhi-fu-bao/id333206289?mt=8';  
  448.                 };  
  449.                 script>  
  450.             div>  
  451.         div>  
  452.     div>  
  453.   
  454.     <div class="base-info">  
  455.         <div class="download-putcenter"> <span class="word">最新版本:span> <span class="version">9.6.6span> <span class="date">(2016-05-10)span> <span class="size">93.2MBspan> div>  
  456.         <p class="copyright">支付宝版权所有 © 2004 - 2016p>   
  457.     div>  
  458.   
  459.     <script>  
  460.         function jsBridgeRun(fn) {  
  461.             if (typeof window.AlipayJSBridge==='object' && window.AlipayJSBridge.startupParams) {  
  462.                 fn();  
  463.             } else {  
  464.                 document.addEventListener('AlipayJSBridgeReady', function () {  
  465.                     fn();  
  466.                 }, false);  
  467.             }  
  468.         }  
  469.         jsBridgeRun(function () {  
  470.             AlipayJSBridge.call("hideOptionMenu");  
  471.         });  
  472.   
  473.         // 等待运行函数  
  474.         var rtrLen = window.readyToRun.length;  
  475.         if(window.readyToRun.length) {  
  476.             var rtrIdx, rtrFn;  
  477.             for(rtrIdx=0; rtrIdx<rtrLen; rtrIdx++) {  
  478.                 rtrFn = window.readyToRun[rtrIdx];  
  479.                 typeof rtrFn==='function' && rtrFn();  
  480.             }  
  481.   
  482.             window.readyToRun = [];  
  483.         }  
  484.     script>  
  485. body>html>

你可能感兴趣的:(iOS进阶,H5唤醒APP)