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: ...
随机推荐
- python insert所用 插入到自定的位置
a = list(range(50)) b = list(range(50)) c = [] for x in a: c.insert(x, [a[x], b[x]]) print(c)
- 用不到 50 行的 Python 代码构建最小的区块链
引用 译者注:随着比特币的不断发展,它的底层技术区块链也逐步走进公众视野,引起大众注意.本文用不到50行的Python代码构建最小的数据区块链,简单介绍了区块链去中心化的结构与其实现原理. 尽管一些人 ...
- mysql--user表
mysql数据库 用例:mysql mysql> show tables; +---------------------------+ | Tables_in_mysql | +------- ...
- Codeforces Round #421 (Div. 2)
A: 题意:给你一本书共c页,第一天看v0页,第二天看v0+a,第二天看v0+2a以此类推,每天最多看v1页,但是后一天要重复看前一天的后l页. 代码: #include<stdio.h> ...
- Windows的奇巧淫技(为什么GIF显示不出来??)
谁的电脑里没点小秘密?东藏西藏到最后自己都找不到了有木有?今天教大家个隐藏文件的高招: 将任意文件隐藏到图片中!怎么样?再也不用建什么「马列主义哲学」的文件夹啦!
- NodeJs在windows上安装配置测试
Node.js简介简单的说 Node.js 就是运行在服务端的 JavaScript.Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境.Node.js 使用了一个 ...
- mysql5.6版本的优化
1. 目标 l 了解什么是优化 l 掌握优化查询的方法 l 掌握优化数据库结构的方法 l 掌握优化MySQL服务器的方法 2. 什么是优化? l 合理安排资源.调整系统参数使MySQL运行更快.更节省 ...
- [编译] 2、minGW gcc在windows搭建编译win32程序环境
1.普通下载一个MinGW程序.安装之后可以直接将MinGW目录拷贝到总工程的tool里面: demo_mesh_common tree -L 2 . ├── app ├── bin ├── buil ...
- 使用node自动生成html并调用cmd命令提交代码到仓库
生成html提交到git仓库 基于目前的express博客,写了一点代码,通过request模块来请求站点,将html保存到coding-pages目录,复制静态文件夹到coding-pages,最后 ...
- FFmpeg开发实战(一):FFmpeg 打印日志
在Visual Studio 开发(二):VS 2017配置FFmpeg开发环境一文中,我们配置好了FFmpeg的开发环境,下面我们开始边实战,边学习FFmpeg. 首先,我们要学习的就是FFmpeg ...