h5实现唤起本地app(h5页面唤起app如果没安装就跳转下载iOS和Android)
类别:Web前端 浏览量:157
时间:2021-10-15 00:11:48 h5实现唤起本地app
h5页面唤起app如果没安装就跳转下载iOS和Androidh5页面唤起app如果没安装就跳转下载(iOS和Android)
浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app。因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app。
微信里屏蔽了 schema 协议,如果在微信中打开h5,则会提示用户在浏览器中打开。<!doctype html>
<html> <head> <title></title> <meta charset="utf-8"> <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no;" name="viewport" /> <script> // 检查是否安装app function openApp(e){ var u = window.navigator.userAgent; var isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1; //android终端或者uc浏览器 var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); if(isAndroid){ android(); } if(isiOS){ ios(); } } function android(){ var _clickTime = new Date().getTime(); window.location.href = '??????????????????'; /***打开app的协议,有安卓同事提供***/ //启动间隔20ms运行的定时器,并检测累计消耗时间是否超过3000ms,超过则结束 var _count = 0, intHandle; intHandle = setInterval(function(){ _count++; var elsTime = new Date().getTime() - _clickTime; if (_count>=100 || elsTime > 3000 ) { console.log(_count) console.log(elsTime) clearInterval(intHandle); //检查app是否打开 if ( document.hidden || document.webkitHidden) { // 打开了 window.close(); } else { // 没打开 alert('没打开') // window.location.href = "??????????????";//下载链接 } } }, 20); } function ios(){ var _clickTime = +(new Date()); var ifr = document.createElement("iframe"); ifr.src = "??????????????"; /***打开app的协议,有ios同事提供***/ ifr.style.display = "none"; document.body.appendChild(ifr); //启动间隔20ms运行的定时器,并检测累计消耗时间是否超过3000ms,超过则结束 var _count = 0, intHandle; intHandle = setInterval(function(){ _count++; var elsTime = +(new Date()) - _clickTime; console.log(_count,elsTime,+(new Date()),_clickTime) if (_count>=100 || elsTime > 3000 ) { clearInterval(intHandle); document.body.removeChild(ifr); //检查app是否打开 if ( document.hidden || document.webkitHidden) { // 打开了 window.close(); } else { // 没打开 alert('没打开') // window.location.href = "???????????????";//下载链接 } } },20); } var objbtn=document.getElementById('btn'); objbtn.onclick=function(){ openApp() } </script> </head> <body style="background-color: #fff;" > <!--测试app调起--> <li id="btn" style="font-size: 40px;background: blue;color: #fff;height: 56px;text-align: center;">btn</li> <!--测试app调起over--> </body> </html>
重要的是 安装了app打开app,但是 不能让用户在点击确定的时候,跳转到下载页。
没安装app的用户,不能等待太久,还不到app下载页。
若通过url scheme 打开app成功,那么当前h5会进入后台,通过计时器会有明显延迟。利用时间来判断。
由于安卓手机,页面进入后台,定时器setTimeout仍会不断运行,所以这里使用setInterval,较小间隔时间重复多次。来根据累计时间判断。
document.hidden对大于4.4webview支持很好,为页面可见性api。
ios
window.location.href='rtjr://app.rongtuojinrong.com?flag=23&pid={$pid}';
js无法调起 这种协议的url
<a href="rtjr://app.rongtuojinrong.com?flag=23&pid={$pid}" ></a>
只能用 a标签,或者 iframe
到此这篇关于h5页面唤起app如果没安装就跳转下载(iOS和Android)的文章就介绍到这了,更多相关h5页面唤起app内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- html5canvas案例(h5使用canvas画布实现手势解锁)
- html5的canvas代码(H5最强接口之canvas实现动态图形功能)
- h5微信手机端debug模式(iOS微信H5页面橡皮回弹效果的踩坑记录)
- h5本地存储对比(H5离线存储Manifest原理及使用)
- h5嵌入app解决方案(app内嵌H5 webview 本地缓存问题的解决)
- h5适配横屏(详解移动端h5页面根据屏幕适配的四种方案)
- h5制作支付功能(基于HTML5+tracking.js实现刷脸支付功能)
- h5移动端开发app(移动端H5唤起APP的写法实例IOS、android)
- pythonssl版本(解决Python 使用h5py加载文件,看不到keys的问题)
- h5禁用返回键(可能这些是你想要的H5软键盘兼容方案小结)
- h5开发app缺点(H5唤醒APP实现方法及注意点总结)
- python中mat文件怎么读(Python第三方库h5py_读取mat文件并显示值的方法)
- h5怎么在微信公众号发布(H5微信公众号授权的简单实现步骤)
- php 支付系统(php 实现银联商务H5支付的示例代码)
- 淘宝算法推荐逻辑公式(详解淘宝H5 sign加密算法)
- h5 video支持格式(H5 video poster属性设置视频封面的方法)
- 三兄妹感情再遇波折,人设接连崩塌 《以家人之名》剧情猜不透(三兄妹感情再遇波折)
- 《小敏家》金波想要复婚 这只是他圈套的第1步,更可恶的在后面(小敏家金波想要复婚)
- 小敏家 剧情离谱一锅乱炖,但他们俩绝对是这部剧的一大 亮点(剧情离谱一锅乱炖)
- 《倚天屠龙记》再遭翻拍,关晓彤主演赵敏,蒋劲夫演张无忌,你怎么看(倚天屠龙记再遭翻拍)
- 吴启华与曾舜晞两代张无忌同框,戏里经典的他却没活出原著的潇洒(吴启华与曾舜晞两代张无忌同框)
- 经常发这三种 朋友圈 的人,要迅速屏蔽(经常发这三种朋友圈)
热门推荐
- 前端pc适配方案(前端兼容性问题总结PC端)
- 怎么运行xampp中的mysql(本地安装了mysql导致xampp的mysql服务启动失败)
- php 常见的三种缓存(PHP进阶学习之垃圾回收机制详解)
- 织梦cms怎么设置页面(织梦CMS调用问答栏目文章到首页实现方法分享)
- css3支持多重背景吗(真正了解CSS3背景下的@font face规则)
- sql server日期查询语句(SQL Server中查询结果超出了查询时间范围解决方法)
- php添加到数组的用法(详解PHP 7.4 中数组延展操作符语法知识点)
- python 聚类找出同一类别的数据(Python实现简单层次聚类算法以及可视化)
- sql server中使用xp_readerrorlog查看错误日志
- nginx优化安全设置(nginx优化的六点方法)
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9