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内容请搜索开心学习网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持开心学习网!
您可能感兴趣
- h5移动端开发app(移动端H5唤起APP的写法实例IOS、android)
- html5canvas案例(h5使用canvas画布实现手势解锁)
- python中mat文件怎么读(Python第三方库h5py_读取mat文件并显示值的方法)
- h5获取ios系统版本(详解h5页面在不同ios设备上的问题总结)
- html5的canvas代码(H5最强接口之canvas实现动态图形功能)
- css3动画效果图(css3实现波纹特效、H5实现动态波浪效果)
- h5实现唤起本地app(h5页面唤起app如果没安装就跳转下载iOS和Android)
- h5页面快速制作方法(h5网页水印SDK的实现代码示例)
- h5微信手机端debug模式(iOS微信H5页面橡皮回弹效果的踩坑记录)
- h5前端入门(前端H5 Video常见使用场景简介)
- h5抽奖的弹框制作(html5实现九宫格抽奖可固定抽中某项奖品)
- h5支付接口第四方支付(h5移动端调用支付宝、微信支付的实现)
- php 支付系统(php 实现银联商务H5支付的示例代码)
- h5页面强制关注微信公众号(Html5页面获取微信公众号的openid的方法)
- 钉钉嵌入web端应用程序(钉钉企业内部H5微应用开发详解)
- 淘宝算法推荐逻辑公式(详解淘宝H5 sign加密算法)
- 小浴室,大民生 缙云3200多户困难群众洗上免费热水澡(小浴室大民生缙云3200多户困难群众洗上免费热水澡)
- 元旦闲谭(元旦闲谭)
- 息烽 这个村 治垃圾 有招 人人争当卫生模范(息烽这个村治垃圾)
- 今天要吃什么(今天要吃什么菜)
- 三杨之一 南杨 杨溥 安贞履节,酿醴调羹,宰相之气(三杨之一南杨杨溥)
- 今天会下雨吗(今天会下雨吗小说)
热门推荐
- html怎么引入sass(利用CSS的Sass预处理器框架来制作居中效果)
- sql的select语句用法(SQL update select结合语句详解及应用)
- php7.4编译安装(PHP7.3.10编译安装教程)
- python爬百度api有次数限制吗(对python借助百度云API对评论进行观点抽取的方法详解)
- css居中代码(CSS之居中布局的实现方法)
- html怎么设置地图(HTML5获取当前地理位置并在百度地图上展示的实例)
- 简述css3动画与过渡效果(CSS3制作翻转效果_动力节点Java学院整理)
- 宝塔面板安装ssl证书(宝塔面板如何配置https?BT宝塔设置SSL证书图文教程)
- 所有聚合函数mysql教程(Mysql 聚合函数嵌套使用操作)
- harborjob设置(harbor修改配置文件后重启操作)