html5 打开支付宝app,支付宝H5唤醒APP
支付宝文档地址
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';
};
支付宝版权所有 © 2004 - 2016
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
Paste_Image.png
html5 打开支付宝app,支付宝H5唤醒APP相关推荐
- H5唤醒app,不完全兼容
---ps---最近新发现一个开源的H5唤醒app的库:建议使用第三方开源库https://github.com/suanmei/callapp-lib实现:或者极光魔链(后期可能会收费)https: ...
- uniapp解决H5唤醒APP
H5唤醒APP 解决H5唤醒指定APP 设置schemes - Android 打开项目manifest.json文件源码视图 在manifest.json文件的"app-plus" ...
- uniApp H5唤醒App
H5唤醒App 安装依赖 npm install --save callapp-lib 引入 callapp-lib import CallApp from "callapp-lib&quo ...
- 微信开放标签<wx-open-launch-app>之Vue项目H5唤醒APP
微信开放标签<wx-open-launch-app>之Vue项目H5唤醒APP 在微信开放标签出来之前,大多数人都是采用 URI Scheme 以及 ios 的universal Link ...
- H5 唤醒APP小记
最近遇到一个需求,需要在从APP分享出去的H5页面中,带有一个立即打开的按钮,如果本地安装了app,那么就直接唤起本地的app,如果没有安装,则跳转到下载.这是一个很正常的推广和导流量的策略.前端小白 ...
- vue H5唤醒app
一:普通浏览器唤醒app //判断是否为微信浏览器 function isWeiXin() {var ua = window.navigator.userAgent.toLowerCase();if ...
- 国外html5转app store,H5唤醒移动端APP,或跳转到App Store和应用宝
//实际上就是新建一个iframe的生成器 var createIframe=(function(){ var iframe; return function(){ if(iframe){ retur ...
- h5 iframe显示不全_H5 唤醒APP小记
H5 唤醒APP功能 最近遇到一个需求,需要在从APP分享出去的H5页面中,带有一个立即打开的按钮,如果本地安装了app,那么就直接唤起本地的app,如果没有安装,则跳转到下载.这是一个很正常的推广和 ...
- h5页面启动安卓应用_H5唤醒App方式汇总
H5唤醒App方式汇总 最近在做扫码之后的h5页面唤醒App的功能,做下记录 唤醒方式列表URL Schemes chrome intent ios UniversalLink / android a ...
- 微信浏览器中唤醒APP到指定页
首先判断是在微信中,还是在浏览器中,如果在浏览器中,直接使用scheme url进行跳转,如果有app就直接进入app并通过页面隐藏事件监听,取消到下载页的跳转,没有唤醒则说明无app,到下载页. 在 ...
最新文章
- shell基础04 结构化命令
- 3、JPA一些常用的注解
- @GetMapping和@PostMapping接收参数的格式
- 过拟合(原因、解决方案、原理)
- java 0000 0001 0002 000a 000b_Java代码编译后的class文件
- 那么到底什么是热点???
- abap 添加alv上的工具栏的按钮_你需要属于自己的PPT工具栏!
- layer 弹出层 回调函数调用 弹出层页面 函数
- (转载)排序六 堆排序
- HTML 颜色名:及16进制颜色值:建议收藏!!!
- WTL的CBitmapButton在MFC下完美使用
- kafka彻底删除topic清理数据
- Python 用10行代码教你画出太阳花
- 华硕主板的网络唤醒(Wake-on-LAN)
- 谷歌中设置utf8编码
- 如何看待CS院校正式推免鸽人紧急补录的混乱局面?
- Android Studio 如何查看Sqlite数据文件
- 运维工程师必知:什么是千兆交换机?
- web测试与APP测试方法总结
- 哔哩哔哩怎么调节屏幕亮度
热门文章
- 关于关系型数据库锁机制的理解
- 机器学习算法LR(logit regression逻辑回归)原理简单解析
- 昵图网源码php,【PHP】仿我图,千图,昵图网素材下载,素材销售平台最新宽屏商业版:含新版vip会员中心,全开源...
- 解决win10系统flash player无法播放,升级
- 电力IEC104规约协议解读(含源码下载)
- 什么是信息化?什么是数字化?这两者有什么联系和区别?
- wwwscan目录扫描器的逆向分析
- jszip打包下载文件
- 数学建模酶促反应matlab求解,数学建模实验指导书2011
- PyQt环境的搭建:安装python+pyqt+eric