支付宝文档地址

H5页面唤醒支付宝APP

Created by IntelliJ IDEA.

Date: 17/1/12

Time: 下午1:32

To change this template use File | Settings | File Templates.

--%>

支付宝

*,

: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;

}

window.readyToRun = [];

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');

}

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);

}

})();

(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);

}

})();

.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;}

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);

});

正在打开支付宝...

如果没有打开支付宝,请下载最新版

立即下载

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';

};

最新版本: 9.6.6 (2016-05-10) 93.2MB

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

rtrFn = window.readyToRun[rtrIdx];

typeof rtrFn==='function' && rtrFn();

}

window.readyToRun = [];

}

页面效果

如果是手机浏览器访问,可以直接唤起支付宝APP

f15e3fc6032a?utm_campaign=maleskine

Paste_Image.png

html5 打开支付宝app,支付宝H5唤醒APP相关推荐

  1. H5唤醒app,不完全兼容

    ---ps---最近新发现一个开源的H5唤醒app的库:建议使用第三方开源库https://github.com/suanmei/callapp-lib实现:或者极光魔链(后期可能会收费)https: ...

  2. uniapp解决H5唤醒APP

    H5唤醒APP 解决H5唤醒指定APP 设置schemes - Android 打开项目manifest.json文件源码视图 在manifest.json文件的"app-plus" ...

  3. uniApp H5唤醒App

    H5唤醒App 安装依赖 npm install --save callapp-lib 引入 callapp-lib import CallApp from "callapp-lib&quo ...

  4. 微信开放标签<wx-open-launch-app>之Vue项目H5唤醒APP

    微信开放标签<wx-open-launch-app>之Vue项目H5唤醒APP 在微信开放标签出来之前,大多数人都是采用 URI Scheme 以及 ios 的universal Link ...

  5. H5 唤醒APP小记

    最近遇到一个需求,需要在从APP分享出去的H5页面中,带有一个立即打开的按钮,如果本地安装了app,那么就直接唤起本地的app,如果没有安装,则跳转到下载.这是一个很正常的推广和导流量的策略.前端小白 ...

  6. vue H5唤醒app

     一:普通浏览器唤醒app //判断是否为微信浏览器 function isWeiXin() {var ua = window.navigator.userAgent.toLowerCase();if ...

  7. 国外html5转app store,H5唤醒移动端APP,或跳转到App Store和应用宝

    //实际上就是新建一个iframe的生成器 var createIframe=(function(){ var iframe; return function(){ if(iframe){ retur ...

  8. h5 iframe显示不全_H5 唤醒APP小记

    H5 唤醒APP功能 最近遇到一个需求,需要在从APP分享出去的H5页面中,带有一个立即打开的按钮,如果本地安装了app,那么就直接唤起本地的app,如果没有安装,则跳转到下载.这是一个很正常的推广和 ...

  9. h5页面启动安卓应用_H5唤醒App方式汇总

    H5唤醒App方式汇总 最近在做扫码之后的h5页面唤醒App的功能,做下记录 唤醒方式列表URL Schemes chrome intent ios UniversalLink / android a ...

  10. 微信浏览器中唤醒APP到指定页

    首先判断是在微信中,还是在浏览器中,如果在浏览器中,直接使用scheme url进行跳转,如果有app就直接进入app并通过页面隐藏事件监听,取消到下载页的跳转,没有唤醒则说明无app,到下载页. 在 ...

最新文章

  1. shell基础04 结构化命令
  2. 3、JPA一些常用的注解
  3. @GetMapping和@PostMapping接收参数的格式
  4. 过拟合(原因、解决方案、原理)
  5. java 0000 0001 0002 000a 000b_Java代码编译后的class文件
  6. 那么到底什么是热点???
  7. abap 添加alv上的工具栏的按钮_你需要属于自己的PPT工具栏!
  8. layer 弹出层 回调函数调用 弹出层页面 函数
  9. (转载)排序六 堆排序
  10. HTML 颜色名:及16进制颜色值:建议收藏!!!
  11. WTL的CBitmapButton在MFC下完美使用
  12. kafka彻底删除topic清理数据
  13. Python 用10行代码教你画出太阳花
  14. 华硕主板的网络唤醒(Wake-on-LAN)
  15. 谷歌中设置utf8编码
  16. 如何看待CS院校正式推免鸽人紧急补录的混乱局面?
  17. Android Studio 如何查看Sqlite数据文件
  18. 运维工程师必知:什么是千兆交换机?
  19. web测试与APP测试方法总结
  20. 哔哩哔哩怎么调节屏幕亮度

热门文章

  1. 关于关系型数据库锁机制的理解
  2. 机器学习算法LR(logit regression逻辑回归)原理简单解析
  3. 昵图网源码php,【PHP】仿我图,千图,昵图网素材下载,素材销售平台最新宽屏商业版:含新版vip会员中心,全开源...
  4. 解决win10系统flash player无法播放,升级
  5. 电力IEC104规约协议解读(含源码下载)
  6. 什么是信息化?什么是数字化?这两者有什么联系和区别?
  7. wwwscan目录扫描器的逆向分析
  8. jszip打包下载文件
  9. 数学建模酶促反应matlab求解,数学建模实验指导书2011
  10. PyQt环境的搭建:安装python+pyqt+eric