在H5中唤起APP,唤起失败进入APP下载页

2019-10-10 admin

在H5中唤起APP原理:通过Scheme协议打开APP

Scheme的组成:scheme:path[#fragment]

一、直接使用协议打开APP,打开失败进入下载页

<div class="btn" onClick="openApp">打开App</div>

function openApp() {
    // 通过iframe的方式试图打开APP,如果能正常打开,会直接切换到APP
    // 每个APP有自己scheme协议名称,例如微信是weixin:// 
    // 否则跳转APP下载页
    var ifr = document.createElement('iframe');
    ifr.src = 'APP协议://打开页面路径';
    ifr.style.display = 'none';
    document.body.appendChild(ifr);
    window.setTimeout(function(){
        downloadAPP()
        document.body.removeChild(ifr);
    },2000)
}

function downloadAPP() {
    // 判断是Android还是iOS
    const u = navigator.userAgent;
    let system = '';
    if (u.indexOf('Android') > -1 || u.indexOf('Adr') > -1) {
        system = 'Android';
    } else if (!!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/)) {
        system = 'iOS';
    } else {
        system = 'unknown';
    }
    // 根据系统不同,跳转不同的下载APP地址
    if(system === 'Android') {
        // TODO:这里还可以根据手机厂商的不同跳转各自厂商的应用商店
        window.location = "安卓下载地址"
    } else if(system === 'iOS') {
        window.location = "iOS商店地址"
    }
}

二、使用第三方插件,原理还是一样的

https://github.com/suanmei/ca…,具体使用见github

import CallApp from 'callapp-lib';

function openApp(){     

    const option = {

      scheme: {

        protocol: 'matchu',

      },

      appstore: 'appstore的应用地址',

      yingyongbao: '应用宝地址',

      fallback: '打开失败后的页面',

      timeout: 3000,

    };

    const lib = new CallApp(option);

    lib.open({

        path: '打开APP的指定页面',

    });  

}

[转载]原文链接:https://segmentfault.com/a/1190000020643353

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-77057.html

文章标题:在H5中唤起APP,唤起失败进入APP下载页

相关文章
请前往任务中心完善资料即可激活会员
登录后,点击右上角的用户名,在下拉菜单中可以进去“我的任务” 注册自动激活,本站没有VIP!没有充值!没有推广任务等等 回复即可下载 ...
2015-11-18
2015年JavaScript或“亲库而远框架”
2014年过去了,作为一个JavaScript开发者很难满怀信心的去“挽回”一个特定的库或技术,即便是强大的Angular,似乎也因为最近的一些事情而动摇。 2014年10月的ng-europe会议上,Angular开发者团队透露了一个关于...
2015-11-12
Android中Okhttp3实现上传多张图片同时传递参数
之前上传图片都是直接将图片转化为io流传给服务器,没有用框架传图片。 最近做项目,打算换个方法上传图片。 Android发展到现在,Okhttp显得越来越重要,所以,这次我选择用Okhttp上传图片。 Okhttp目前已经更新到Okhttp...
2017-03-17
v-charts | 饿了么团队开源的基于 Vue 和 ECharts 的图表工具
在使用echarts生成图表时,经常需要做繁琐的数据类型转化、修改复杂的配置项,v-charts的出现正是为了解决这个 痛点。基于Vue2.0和echarts封装的v-charts图表组件,只需要统一提供一种对前后端都友好的数据格式 设置简...
2018-05-24
国内外html5游戏引擎排行
一个好的HTML5游戏引擎,能够大大简化游戏的开发实现。 排名列表: Construct 2 ImpactJS EaselJS pixi.js Phaser GameMaker Three.js PlayCanvas Turbulenz ...
2015-11-12
详解HTML5游戏玩家流失原因
对任何类型的电子游戏来说,玩家流失都是一个无法回避的问题。玩家为什么离开游戏?近日,HTML5游戏设定师纳森·洛维托(Nathan Lovato)在游戏开发者网站Gamasutra撰写文章,解读了玩家离开游戏的16个理由。 HTML5游戏 ...
2015-11-12
jsdom 中文文档(纯翻译)
jsdom是一个纯粹由 javascript 实现的一系列 web标准,特别是 WHATWG 组织制定的DOM和 HTML 标准,用于在 nodejs 中使用。大体上来说,该项目的目标是模拟足够的Web浏览器子集,以便用于测试和挖掘真实世界...
2018-05-14
YouTube正式默认使用HTML5视频播放器
YouTube视频网站现在默认使用HTML5播放器,这意味着更好的性能、 稳定性、 电池寿命和甚至是更好的安全性。现在用户通过Chrome、IE 11、Safari 8和Beta版本的Firefox进行浏览的时候都默认使用HTML5视频播放...
2015-11-12
JavaScript常用特效chm下载
下载地址:JavaScript常用特效chm下载 对了,如果打开空白,在手册上右键属性解除锁定即可。 ...
2015-11-12
three.js实现围绕某物体旋转
话不多说,请看代码: 可以拖动右上角观察变化 &lt;!DOCTYPE html&gt; &lt;html lang=&quot;en&quot; style=&quot;width: 100%; height:100%;&quot;&gt...
2017-02-17
回到顶部