美文网首页
js实现点击页面唤起App

js实现点击页面唤起App

作者: 前端小学生爱吃火锅 | 来源:发表于2018-11-29 17:27 被阅读0次

当时对这个需求一脸懵逼,我一个菜鸟怎么可能做得出听起来这么高大上的东西,在网上找了很久的教程最后还是勉强写出来了,写好以后还是觉得挺简单的,分享出来供大家参考一下,如果有用也是我的荣幸。
需求是点击页面无论哪个位置三次以后就唤起指定app,所以我就直接把事件绑定在了body身上:

(function() {
      //这个对象在唤起app的需求中是通用的,作用是判断当前为哪个客户端
        var browser={
            versions:function(){
                var u = navigator.userAgent, app = navigator.appVersion;
                return {
                    trident: u.indexOf('Trident') > -1, //IE内核
                    presto: u.indexOf('Presto') > -1, //opera内核
                    webKit: u.indexOf('AppleWebKit') > -1, //苹果、谷歌内核
                    gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1,//火狐内核
                    mobile: !!u.match(/AppleWebKit.*Mobile.*/), //是否为移动终端
                    ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), //ios终端
                    android: u.indexOf('Android') > -1 || u.indexOf('Adr') > -1, //android终端
                    iPhone: u.indexOf('iPhone') > -1 , //是否为iPhone或者QQHD浏览器
                    iPad: u.indexOf('iPad') > -1, //是否iPad
                    webApp: u.indexOf('Safari') == -1, //是否web应该程序,没有头部与底部
                    weixin: u.indexOf('MicroMessenger') > -1, //是否微信 (2015-01-22新增)
                    qq: u.match(/\sQQ/i) == " qq" //是否QQ
                };
            }(),
            language:(navigator.browserLanguage || navigator.language).toLowerCase()
        };

        var appInfo = {
            iosUrl: ["https://h5.m.taobao.com/?sprefer=sypc00","https://m.toutiao.com/?"],  //当前为网页版应用链接,需更换成app的跳转链接
            androidUrl: ["https://h5.m.taobao.com/?sprefer=sypc00","https://m.toutiao.com/?"] //当前为网页版应用链接,需更换成app的跳转链接
        };

        var count = 0;
        var i = appInfo.androidUrl;
        var n = appInfo.iosUrl;
        var ele = document.getElementsByTagName('body')[0];
        ele.addEventListener('touchstart',function () {
            count++;
            if (count>=3) {
                 if (browser.versions.ios) {
                     console.log("ios");
                     window.location.href  = n[0];
                    //设置定时器的目的是如果第一个app没有安装,则自动跳转第二个
                     setTimeout(function(){
                        window.location.href  = n[1];
                     },3000);
                 }else if(browser.versions.android){
                     console.log("android");
                     window.location.href  = i[0];
                     setTimeout(function(){
                         window.location.href  = i[1];
                     },3000);
                 }
            }
        });
    })();

以上内容参考:https://www.jianshu.com/p/0180e3ee8108 多谢分享

相关文章

  • js实现点击页面唤起App

    当时对这个需求一脸懵逼,我一个菜鸟怎么可能做得出听起来这么高大上的东西,在网上找了很久的教程最后还是勉强写出来了,...

  • vuex实现热重载

    目录结构如下: app.js CounterControls.vue store.js 现在就实现了点击页面上的加...

  • 通用跳转

    https://damai.cn/test.html 点击跳转(可以直接唤起app) 点击跳转(不可以直接唤起app)

  • 小程序点击支付按钮生成二维码

    先引入相关js文件 数据定义 js页面触发的事件方法 wxml页面 以上即可实现点击支付展示二维码啦~~

  • 微信小程序 页面跳转

    App.json中配置页面信息 按钮的点击事件 bindtap 实现页面跳转 表格 日期控件

  • [react]7.1练习

    1、实现顶部tab点击效果 App.js style.css TabControl.js 2、React-slot...

  • js创建点击事件 和 js原生复制

    复制 html代码 js代码 自动点击事件实现页面自动跳转 html代码 PS:自动事件可以实现自动跳转,不能实现...

  • React 实现Vue的插槽功能

    怎么实现Vue的插槽功能呢? 1.第一种实现方式 父组件 App.js NavBar.js页面 style.css...

  • 实现图片的切换

    pc端,实现简单图片切换在App中这种效果比较常见,两种效果的切换。html页面 js页面

  • iOS中APP间的唤起

    概念 所谓APP间的唤起就是这个软件通过某个事件唤起了另外一个APP。 实现方式 APP间唤起通过scheme来实...

网友评论

      本文标题:js实现点击页面唤起App

      本文链接:https://www.haomeiwen.com/subject/nsifcqtx.html