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 相关文章推荐
javascript 中String.match()与RegExp.exec()的区别说明
Jan 10 Javascript
JavaScript将Table导出到Excel实现思路及代码
Mar 13 Javascript
iframe窗口高度自适应的又一个巧妙实现思路
Apr 04 Javascript
JQuery each()嵌套使用小结
Apr 18 Javascript
使用 js+正则表达式为关键词添加链接
Nov 11 Javascript
使用JavaScript和CSS实现文本隔行换色的方法
Nov 04 Javascript
基于JS实现移动端访问PC端页面时跳转到对应的移动端网页
Dec 24 Javascript
在create-react-app中使用sass的方法示例
Oct 01 Javascript
微信小程序实现录制、试听、上传音频功能(带波形图)
Feb 27 Javascript
详解vue-flickity的fullScreen功能实现
Apr 07 Javascript
vue element-ul实现展开和收起功能的实例代码
Nov 25 Vue.js
react antd实现动态增减表单
Jun 03 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之第四天
2006/10/09 PHP
基于mysql的论坛(1)
2006/10/09 PHP
PHP管理依赖(dependency)关系工具 Composer的自动加载(autoload)
2014/08/18 PHP
jQuery UI-Draggable 参数集合
2010/01/10 Javascript
JS中eval函数的使用示例
2013/07/21 Javascript
node.js中的fs.fsync方法使用说明
2014/12/15 Javascript
jQuery实现摸拟alert提示框
2016/05/22 Javascript
jQuery获取attr()与prop()属性值的方法及区别介绍
2016/07/06 Javascript
用Vue.js实现监听属性的变化
2016/11/17 Javascript
微信小程序购物商城系统开发系列-目录结构介绍
2016/11/21 Javascript
jquery实现点击页面回到顶部
2016/11/23 Javascript
Angularjs 依赖压缩及自定义过滤器写法
2017/02/04 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
在小程序Canvas中使用measureText的方法示例
2018/10/19 Javascript
一个Java程序猿眼中的前后端分离以及Vue.js入门(推荐)
2019/04/19 Javascript
小程序:授权、登录、session_key、unionId的详解
2019/05/15 Javascript
对Layer UI 模块化的用法详解
2019/09/26 Javascript
编程语言Python的发展史
2014/09/26 Python
Python函数返回值实例分析
2015/06/08 Python
Python作用域用法实例详解
2016/03/15 Python
深入理解NumPy简明教程---数组1
2016/12/17 Python
利用python解决mysql视图导入导出依赖的问题
2017/12/17 Python
详解appium+python 启动一个app步骤
2017/12/20 Python
使用anaconda的pip安装第三方python包的操作步骤
2018/06/11 Python
Python3实现爬取简书首页文章标题和文章链接的方法【测试可用】
2018/12/11 Python
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
澳大利亚手表品牌:Time IV Change
2018/10/06 全球购物
留学推荐信怎么写
2014/01/25 职场文书
我的中国梦演讲稿小学篇
2014/08/19 职场文书
个人批评与自我批评发言稿
2014/09/28 职场文书
体育教师个人总结
2015/02/09 职场文书
保护环境建议书作文500字
2015/09/14 职场文书
Matlab求解数组中的最大值及它所在的具体位置
2021/04/16 Python
微信小程序实现聊天室功能
2021/06/14 Javascript
C3 线性化算法与 MRO之Python中的多继承
2021/10/05 Python
python三子棋游戏
2022/05/04 Python