JS拉起或下载app的实现代码


Posted in Javascript onFebruary 22, 2017

产品提了个需求,通过手机网页判断是否安装了自己公司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://www.baidu.com"
        }
      }, t);
    })

以上所述是小编给大家介绍的JS拉起或下载app的实现代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
纯CSS打造的导航菜单(附jquery版)
Aug 07 Javascript
jquery 学习之二 属性 文本与值(text,val)
Nov 25 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
js的Boolean对象初始值示例
Mar 04 Javascript
js时间比较示例分享(日期比较)
Mar 05 Javascript
JavaScript之class继承_动力节点Java学院整理
Jul 03 Javascript
结合mint-ui移动端下拉加载实践方法总结
Nov 08 Javascript
基于vue中解决v-for使用报红并出现警告的问题
Mar 03 Javascript
JS添加或删除HTML dom元素的方法实例分析
Mar 05 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
vue集成chart.js的实现方法
Aug 20 Javascript
vue各种事件监听实例(小结)
Jun 24 Javascript
js实现带简单弹性运动的导航条
Feb 22 #Javascript
bootstrap fileinput 插件使用项目总结(经验)
Feb 22 #Javascript
javascript 网页进度条简单实例
Feb 22 #Javascript
详解闭包解决jQuery中AJAX的外部变量问题
Feb 22 #Javascript
js实现PC端根据IP定位当前城市地理位置
Feb 22 #Javascript
纯JS实现轮播图
Feb 22 #Javascript
javascript 操作cookies详解及实例
Feb 22 #Javascript
You might like
PHP用GD库生成高质量的缩略图片
2011/03/09 PHP
PHP.ini中配置屏蔽错误信息显示和保存错误日志的例子
2014/05/12 PHP
PHP彩蛋信息介绍和阻止泄漏的方法(隐藏功能)
2014/08/06 PHP
twig模板获取全局变量的方法
2016/02/05 PHP
php等比例缩放图片及剪切图片代码分享
2016/02/13 PHP
实例分析基于PHP微信网页获取用户信息
2017/11/24 PHP
JavaScript实现拼音排序的方法
2012/11/20 Javascript
基于NodeJS的前后端分离的思考与实践(二)模版探索
2014/09/26 NodeJs
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
js获取鼠标点击的对象,点击另一个按钮删除该对象的实现代码
2016/05/13 Javascript
jquery组件WebUploader文件上传用法详解
2020/10/23 Javascript
详解Vuejs2.0之异步跨域请求
2017/04/20 Javascript
Angularjs 与 bower安装和使用详解
2017/05/11 Javascript
微信小程序实现瀑布流布局与无限加载的方法详解
2017/05/12 Javascript
jquery基于layui实现二级联动下拉选择(省份城市选择)
2017/06/20 jQuery
Angular 2父子组件之间共享服务通信的实现
2017/07/04 Javascript
Angular如何引入第三方库的方法详解
2017/07/13 Javascript
webstorm中配置nodejs环境及npm的实例
2018/05/15 NodeJs
JavaScript遍历数组的三种方法map、forEach与filter实例详解
2019/02/27 Javascript
详解vue-cli3开发Chrome插件实践
2019/05/29 Javascript
微信小程序使用Vant Weapp组件库的方法步骤
2019/08/01 Javascript
vue中对象数组去重的实现
2020/02/06 Javascript
vue elementui tree 任意级别拖拽功能代码
2020/08/31 Javascript
Python中用startswith()函数判断字符串开头的教程
2015/04/07 Python
详解Python中open()函数指定文件打开方式的用法
2016/06/04 Python
分析python切片原理和方法
2017/12/19 Python
Python多进程multiprocessing.Pool类详解
2018/04/27 Python
浅析Django 接收所有文件,前端展示文件(包括视频,文件,图片)ajax请求
2020/03/09 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
Scrapy+Selenium自动获取cookie爬取网易云音乐个人喜爱歌单
2021/02/01 Python
日本著名的服饰鞋帽综合类购物网站:MAGASEEK
2019/01/09 全球购物
一套VC试题
2015/01/23 面试题
关爱残疾人标语
2014/06/25 职场文书
教师节简报
2015/07/20 职场文书
员工旷工检讨书
2015/08/15 职场文书
施工安全协议书
2016/03/22 职场文书