时间:2021-05-26
产品提了个需求,通过手机网页判断是否安装了自己公司app,如果安装了则拉起app,没有安装则跳转到下载页。
经过各种查阅资料尝试总结了一个还算可以的办法。
拉起app的原理就是js和原生统一好一个地址,例如(qiyimobile://self/qiyi.madeindexpage)。然后浏览器发起请求,如果app安装了则会拦截这个请求并且打开。
下面是安卓代码配置。其实scheme和host要和js这边统一
<span style="font-size:18px;"><intent-filter> <action android:name="android.intent.action.VIEW" /> <category android:name="android.intent.category.DEFAULT" /> <category android:name="android.intent.category.BROWSABLE" /> <data android:scheme="qiyimobile" android:host="self/qiyi.madeindexpage" android:pathPrefix="/**"> </data> </intent-filter></span>js这边稍微麻烦一些。如果只拉起app比较简单,直接通过a连接或者window.location.href=“**”即可。不过这里有个问题,就是有些手机在未安装app的时候会识别我们之前定的那个协议尝试打开这个网页,当然会报找不到网页。这里用iframe的方式兼容性稍好。
var ifr = document.createElement('iframe'); ifr.src = 'qiyimobile://self/qiyi.madeindexpage'; document.body.appendChild(ifr);当手机未安装app时应该跳转到下载页,很多人说延时一下直接跳转就行,如下
window.location.href=“打开地址” setTimeout(function() { window.location.href=“下载地址” }, 500);当然这样也是有问题的,因为有的手机拉起app也不会自动清除定时器,即无论是否安装app,页面都会在500ms后跳转到下载页。所以判断是否需要跳转到下载页是最麻烦的事。最终尝试如下是比较好的解决方法。
设置一个初始时间,打开拉起app地址后有个结束时间,计算两者之差,当差大于一定时间是说明安装了app,当差很小时说明没有打开app,需要跳转到下载页。
最终代码如下
downloadapp.addEventListener('click', function() { var start = new Date();//记录初始时间 var t = 500; var ifr = document.createElement('iframe'); ifr.src = 'qiyimobile://self/qiyi.madeindexpage';//打开app document.body.appendChild(ifr); ifr.onload = function() { }; ifr.style.display='none'; setTimeout(function() { document.body.removeChild(ifr); var end = new Date();//记录结束时间 console.log(end - start) if (end - start <= (t + 30)) {//两者之差小于30ms时跳转到下载页 window.location.href = "https://" } }, t); })以上所述是小编给大家介绍的JS拉起或下载app的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了js流动式时间的实现代码,供大家参考,具体内容如下效果图:实现代码:js流动时间#divH,#divM,#divS{font-family:
一、Node.js实现代码复制代码代码如下:varhttp=require('http');varutil=require('util');/***根据ip获取
本文实例讲述了C#实现HTTP下载文件的方法。分享给大家供大家参考。主要实现代码如下:复制代码代码如下://////Http下载文件///publicstati
本文实例为大家分享了JS面向对象之多选框实现代码,供大家参考,具体内容如下描述:JS面向对象——多选框的实现效果:实现:Utile.js(function(){
本文实例为大家分享了js水波背景效果的实现代码,供大家参考,具体内容如下效果图:实现代码:水波背景html,body{width:100%;height:100