H5调取APP或跳转至下载
来源:
最近在配合移动端做几个详情页h5分享页面,需要调取App并跳转至app详情页, 如果没有安装App,需要判断引导至下载页面。
参考文档:
https://juejin.im/post/5b7efb2ee51d45388b6af96c
URL Scheme —— 唤端媒介
[scheme]://[host]/[path]?[query]
我们拿 https://www.baidu.com 来举例,scheme 自然就是 https 了,后面拼接的是传递的参数。URL Schemes 没有特别严格的规范,所以后面参数的具体定义是app开发者去自定义。
就像给服务器资源分配一个 URL,以便我们去访问它一样,我们同样也可以给手机APP分配一个特殊格式的 URL,用来访问这个APP或者这个APP中的某个功能(来实现通信)。APP得有一个标识,好让我们可以定位到它,它就是 URL 的 Scheme 部分。
但是,两者还有几个重要的区别:
所有网页都一定有网址,不管是首页还是子页。但未必所有的应用都有自己的 URL Schemes,更不是每个应用的每个功能都有相应的 URL Schemes。几乎没有所有功能都有对应 URL 的应用。一个 App 是否支持 URL Schemes 要看那个 App 的作者是否在自己的作品里添加了 URL Schemes 相关的代码。
一个网址只对应一个网页,但并非每个 URL Schemes 都只对应一款应用。这点是因为苹果没有对 URL Schemes 有不允许重复的硬性要求,所以曾经出现过有 App 使用支付宝的 URL Schemes 拦截支付帐号和密码的事件。
一般网页的 URL 比较好预测,而URL Scheme 因为没有统一标准,所以非常难猜,通过猜来获取 应用的 URL Schemes 是不现实的。
主要注意点:
1、和原生移动端协商好调取app的Url schema和参数:investnote://chengan:8888/main?note_id=991&open_type=1
2、判断是否是微信,因为微信不能直接调取app,需要引导用户用浏览器打开,andriod有默认的引导页可以隐藏,ios需要自己设计
3、大体上判断安卓和ios两种设备,再做不同处理
4、iOS版本在9以上会默认弹出一个打开APP的弹出框,通过延时来打开app的方法就不适用了
<script lang="javascript"> var createIframe=(function(){
var iframe;
return function(){
if(iframe){
return iframe;
}else{
iframe = document.createElement('iframe');
iframe.style.display = 'none';
document.body.appendChild(iframe);
return iframe;
}
}
})() /*判断是否是ios9以上*/
function isIOS9() {
//获取固件版本
var getOsv = function () {
var reg = /OS ((\d+_?){2,3})\s/;
if (navigator.userAgent.match(/iPad/i) || navigator.platform.match(/iPad/i) || navigator.userAgent.match(/iP(hone|od)/i) || navigator.platform.match(/iP(hone|od)/i)) {
var osv = reg.exec(navigator.userAgent);
if (osv.length > 0) {
return osv[0].replace('OS', '').replace('os', '').replace(/\s+/g, '').replace(/_/g, '.');
}
}
return '';
};
var osv = getOsv();
var osvArr = osv.split('.');
//初始化显示ios9引导
if (osvArr && osvArr.length > 0) {
if (parseInt(osvArr[0]) >= 9) {
return true
}
}
return false
} //判断是否是微信
function isWeiXin(){
var ua = window.navigator.userAgent.toLowerCase();
if(ua.match(/MicroMessenger/i) == 'micromessenger'){
return true;
}else{
return false;
}
} function checkIsweixin(){
var mask = document.getElementById('mask')
var openBtn = document.getElementById('openBtn')
if(isWeiXin()){
mask.setAttribute('style','display:block');
openBtn.setAttribute('style','display:block');
return false
}
mask.addEventListener('click', function(){
this.setAttribute('style','display:none');
openBtn.setAttribute('style','display:none');
})
openBtn.addEventListener('click', function(){
mask.setAttribute('style','display:none');
this.setAttribute('style','display:none');
})
openApp();
} function openApp(){
var localUrl="investnote://chengan:8888/main?note_id=991&open_type=1";
var openIframe=createIframe();
var u = navigator.userAgent;
var isIos = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
var isAndroid= u.indexOf('Android') > -1 || u.indexOf('Adr') > -1; //android终端
var isChrome = window.navigator.userAgent.indexOf("Chrome") !== -1;
if(isIos){
if(isIOS9()){
//判断是否为ios9以上的版本,跟其他判断一样navigator.userAgent判断,ios会有带版本号
/* localUrl=createScheme({type:1,id:"sdsdewe2122"},true);//代码还可以优化一下*/
window.location.href = localUrl;
return;
}
//判断是否是ios,具体的判断函数自行百度
window.location.href = localUrl;
var loadDateTime = Date.now();
setTimeout(function () {
var timeOutDateTime = Date.now();
if (timeOutDateTime - loadDateTime < 1000) {
window.location.href = "https://itunes.apple.com/cn/app/%E6%8A%95%E8%B5%84%E4%BA%91/id1376471541?mt=8";
}
}, 25);
}else if(isAndroid){
//判断是否是android,具体的判断函数自行百度
if (isChrome) {
//chrome浏览器用iframe打不开得直接去打开,算一个坑
window.location.href = localUrl;
} else {
//抛出你的scheme
openIframe.src = localUrl;
}
var loadDateTime = Date.now();
setTimeout(function () {
var timeOutDateTime = Date.now();
if (timeOutDateTime - loadDateTime < 1000) {
window.location.href = "http://chengantech.com/download/";
}
}, 25);
}else{
//主要是给winphone的用户准备的,实际都没测过,现在winphone不好找啊
openIframe.src = localUrl;
setTimeout(function () {
window.location.href = "http://chengantech.com/download/";
}, 500);
}
} var appBtn = document.getElementById('appBtn')
appBtn.addEventListener('click', checkIsweixin ) </script>
页面大致布局如下:
<div class="note-fixfoot">
<a class="note-share-button" id="appBtn">用APP打开</a>
</div>
<div id="mask"></div>
<div id="openBtn"></div>
加入简单的样式:
.note-fixfoot{
position: fixed;
bottom:;
width: 100%;
height: 60px;
background: url('./share_wechat@3x.png') no-repeat center;
background-size: 100% 100%;
}
.note-fixfoot .note-share-button{
border-radius:4px;
display: block;
width: 100px;
height: 34px;
position: absolute;
right: 20px;
top: 14px;
background:rgba(94,105,199,1);
color: #ffffff;
text-align: center;
line-height: 34px;
text-decoration: initial;
font-weight: normal;
font-size: 14px;
}
html,body{
overflow: hidden;
}
#mask{
height:100%;
width:100%;
position:fixed;
top:;
z-index:;
opacity:0.8;
filter: alpha(opacity=80);
background-color:#000;
display: none;
}
#openBtn{
width: 90%;
height: 30.5%;
color: #ffffff;
left: 5%;
top:;
font-size: 14px;
position: absolute;
margin-top: -15px;
cursor: pointer;
background: url('./android.png') no-repeat center;
background-size: contain;
border-radius: 5px;
text-align: center;
z-index:;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
overflow: hidden;
background-color: #ffffff;
display: none;
}
H5调取APP或跳转至下载的更多相关文章
- 通过手机浏览器打开APP或者跳转到下载页面.md
目录 通过手机浏览器打开APP或者跳转到下载页面 添加 schemes 网页设置 参考链接 通过手机浏览器打开APP或者跳转到下载页面 以下仅展示最简单的例子及关键代码 由于硬件条件有限,仅测试了 A ...
- HTML中判断手机是否安装某APP,跳转或下载该应用
有些时候在做前端输出的时候,需要和app的做些对接工作.就是在手机浏览器中下载某app时,能判断该用户是否安装了该应用.如果安装了该应用,就直接打开该应用:如果没有安装该应用,就下载该应用.那么下面就 ...
- h5 唤起app或跳转appStore
//唤起app通过唤端媒介(URL Scheme) //微信浏览器自6.3.x版本起禁用了大多数Scheme跳转功能,扫一扫目前可用 // URL 的组成: // [scheme:][// ...
- H5 唤起 APP的解决方案
H5 页面唤起APP或跳转到下载APP的某个链接地址.总结如下: 在 IOS 中, 系统版本在 8 以下时,可以监听页面的 pagehide / visibilitychange 事件. 系统版本大于 ...
- ios&h5混合开发项目仿app页面跳转优化
前言:本人原本是ios开发工程师,但由于现今H5的兴起,行内刮起了一阵混合开发的风气,趁着这股劲,我也学了前端开发,不说研究的多深,但也能胜任日常的开发工作.长话短说,现今的混合开发应该还处于摸索阶段 ...
- 微信浏览器跳转浏览器下载app解决方案
新版本微信浏览器中,已禁用下载APP应用,只支持打开微信合作商APP下载,所以无法通过微信浏览器直接下载APP应用.列举微信浏览器下载APP的种解决方案: 方案:通过Url 跳转到手机默认浏览器,或者 ...
- 微信不支持App下载的解决方案 微信跳转打开外部浏览器下载(苹果跳转商店下载)
在微信中,打开app下载链接,或者使用微信扫一扫app下载二维码,都是无法下载app的. 因为腾讯为了自身利益,屏蔽了其他app直接在微信中下载.下面给分享下,找到的2种有效的解决方案. 方案:点击链 ...
- 通过页面调用APP【H5与APP互通】
现在H5和App原生的内容原来越互通,所涉及的业务也越来越复杂和融合,所以如何互相之间方便的调用才是王道. 场景1 比如用hybrid获取地理位置和短信信息,这当然需要框架封装好,比如利用框架的bri ...
- H5唤醒app,不完全兼容
---ps---最近新发现一个开源的H5唤醒app的库:建议使用第三方开源库https://github.com/suanmei/callapp-lib实现:或者极光魔链(后期可能会收费)https: ...
随机推荐
- 逻辑回归 vs 决策树 vs 支持向量机(II)
原文地址: Logistic Regression vs Decision Trees vs SVM: Part II 在这篇文章,我们将讨论如何在逻辑回归.决策树和SVM之间做出最佳选择.其实 第一 ...
- css之absolute温习
1.absolute:生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位.(父元素不仅可以是相对定位(relative)) 2.当绝对定位的元素找不到定位类型是非static定位 ...
- 内存栅栏(memory barrier):解救peterson算法的应用陷阱
最近一个项目中用到了peterson算法来做临界区的保护,简简单单的十几行代码,就能实现两个线程对临界区的无锁访问,确实很精炼.但是在这不是来分析peterson算法的,在实际应用中发现peterso ...
- 执行一个内容为SQL语句的字符串
两种方式:exec (sqlStr);或exec sp_executesql @sqlStr;绝大多数情况下,应使用第二种方式来执行动态sql.因为这种方式能重用执行计划,并且更安全. 参考例子:ht ...
- day_12函数默认值,数据类型的补充,函数对象名称空间与作用域,函数的嵌套定义
复习, 昨天讲了字符串的比较,按照从左往右比较每一个字符,通过字符对应的ASCII码进行比较 函数的参数,‘ 实参与形参 形参:在函数定义时()中出现的参数 实参,在函数调用时()中出现的参数 实参的 ...
- [转]Virtualization Basics
Virtualization Basics Virtualization is not a new concept, but its complexity has been growing, and ...
- Java中线程同步锁和互斥锁有啥区别?看完你还是一脸懵逼?
首先不要钻概念牛角尖,这样没意义. 也许java语法层面包装成了sycnchronized或者明确的XXXLock,但是底层都是一样的.无非就是哪种写起来方便而已. 锁就是锁而已,避免多个线程对同一个 ...
- 基于APNs最新HTTP/2接口实现iOS的高性能消息推送(服务端篇)
1.前言 本文要分享的消息推送指的是当iOS端APP被关闭或者处于后台时,还能收到消息/信息/指令的能力. 这种在APP处于后台或关闭情况下的消息推送能力,通常在以下场景下非常有用: 1)IM即时通讯 ...
- 吴恩达机器学习笔记35-诊断偏差和方差(Diagnosing Bias vs. Variance)
当你运行一个学习算法时,如果这个算法的表现不理想,那么多半是出现两种情况:要么是偏差比较大,要么是方差比较大.换句话说,出现的情况要么是欠拟合,要么是过拟合问题.那么这两种情况,哪个和偏差有关,哪个和 ...
- Node.js(day2)
一.使用Node实现基本Apache的功能 在上一篇笔记中,我们提到如果打开一个文件需要进行一次url判断是繁琐的,我们希望我们的Node具有类似Apache这种web服务器的一个功能:将文件放到ww ...