不自重者,取辱。不自长者,取祸。不自满者,受益。不自足者,博闻。
在webapp中判断native app是否安装并直接打开 进入全屏
line

常常有这样的场景,咱们开发出来的Native-APP需要在Web-APP中进行推广,比如在页面顶部来一张大Banner图片,亦或一张二维码。但往往我们都是直接给推广图片加了一个下载链接(App Store中的)。所以咱们来模拟一下用户的操作步骤:

1、用户第一次访问Web-APP

   a、点击Banner,进入到APP Store中对应的APP下载页

   b、APP下载页中提示:安装;用户点击安装

   c、安装完成后,APP下载页中提示:打开;用户继续点击打开

   d、用户正常使用APP

2、用户第二次访问Web-APP

   a、点击Banner,进入到APP Store中对应的APP下载页

   b、APP下载页中提示:打开;用户直接点击打开

   c、用户正常使用APP

3、用户第三次、第四次、...、第N次访问Web-APP,操作步骤同2

能看出来,不管是点击Banner还是扫描二维码的方式,对于已经安装过Native APP的用户来说,这个体验都是非常糟糕的。

更优的体验是:点击Banner(或扫描二维码)后,程序判断当前系统是否已安装Native App,如果未安装,则自动跳转到App Store下载页;否则直接打开Native App


在iOS上,要增加一个APP的大Banner,其实只需要在<head>标签内增加一个<meta>标签即可,格式如:

<meta name='apple-itunes-app' content='app-id=你的APP-ID'>

比如加一个百度贴吧的Native APP大Banner,用下面这串儿代码:

<meta name='apple-itunes-app' content='app-id=477927812'>

而对于点击链接后,能否直接打开,可以通过下面的代码来实现。前提条件:你得知道你的APP对应的打开协议,如贴吧APP,协议为:com.baidu.tieba:// ,微信的:weixin:// ,and so on。。。

<!-- a标签的链接,设置为对应的下载链接;点击打开的动作,在click事件中注册 -->
<a href="https://itunes.apple.com/cn/app/id477927812" id="openApp">贴吧客户端</a>
<script type="text/javascript">
    document.getElementById('openApp').onclick = function(e){
        // 通过iframe的方式试图打开APP,如果能正常打开,会直接切换到APP,并自动阻止a标签的默认行为
        // 否则打开a标签的href链接
        var ifr = document.createElement('iframe');
        ifr.src = 'com.baidu.tieba://';
        ifr.style.display = 'none';
        document.body.appendChild(ifr);
        window.setTimeout(function(){
            document.body.removeChild(ifr);
        },3000)
    };
</script>

当然,如果你是设计成一张二维码,可以用下面这段代码:

<!-- a标签的链接,设置为对应的下载链接;点击打开的动作,在click事件中注册 -->
<a href="https://itunes.apple.com/cn/app/id477927812" id="openApp" style="display: none">贴吧客户端</a>
<script type="text/javascript">
    document.getElementById('openApp').onclick = function(e){
        // 通过iframe的方式试图打开APP,如果能正常打开,会直接切换到APP,并自动阻止a标签的默认行为
        // 否则打开a标签的href链接
        var ifr = document.createElement('iframe');
        ifr.src = 'com.baidu.tieba://';
        ifr.style.display = 'none';
        document.body.appendChild(ifr);
        window.setTimeout(function(){
            document.body.removeChild(ifr);
        },3000)
    };
    document.getElementById('openApp').click();

要使用哪一种,就取决与你的实际场景了!

趣店(原趣分期)技术学院
重点关注技术架构、服务化、优秀工具、自动化平台、开发全流程一体化解决方案、新人培养、工程师进阶之道等方面
这里环境优雅、氛围年轻、主要是福利还多,还等什么?我们敞开技术的大门,欢迎各种工程师加入!

评论区域

line
  • 1 2018-05-07 18:04:06 回复
    浏览器有提示你要不要打开应用如果用户没去操作,超过时间还是会跳到下载地址。你们没遇到这个问题?
  • 天蓝远方 2016-11-21 10:40:57 回复
    回复 han : 请问您解决了吗?
    han said:
    打开APP之后,链接还是跳转了 怎么回事?
  • openlog 2015-07-10 19:18:58 回复
    应用链提供sdk可以很简单完成从web跳转到app,兼容各种app,详见www.yingyonglian.cn
  • han 2015-02-11 16:01:25 回复
    打开APP之后,链接还是跳转了 怎么回事?
  • javaccg 2015-01-21 14:29:49 回复
    在吗?我打开app之后下载连接并没有阻止还是下载了, 这是怎么回事呢?要怎么处理呢???
  • android小马 2015-01-09 12:35:39 回复
    回复 菠菜 : 请问你“打开app之后下载连接并没有阻止还是下载了”这个问题解决了吗?
    菠菜 said:
    我打开app之后下载连接并没有阻止还是下载了, 这是怎么回事呢?
  • xiaotian_s 2014-12-19 12:09:02 回复
    请问从app分享到微信的链接,好友打开链接,如果好友安装了这个app,可以从微信自动跳转到app里,这个如何实现呢?我看过一个叫nice的app在安卓上已经实现了这个效果,ios下不可以。查看他的代码是用了$.ajax({url: nice.TUNEUP_URL,dataType: "jsonp" });不知道他的后台,或者安卓后端是否做了相应的接口,求教!!
  • 菠菜 2014-08-27 11:11:52 回复
    我打开app之后下载连接并没有阻止还是下载了, 这是怎么回事呢?
  • Alien 2014-01-12 18:57:11 回复
    回复 merson : 不好意思,前一段时间由于域名的问题,导致网站被强迫关站,没有收到你的反馈。请问,你的问题解决了吗?
    merson said:
    你好,现在碰到一个棘手问题:
    我是新浪微博分享后,点击短链接,进入推广页面,之前是可以自动跳转到App,但最近都都不行,不知道为什么。如果用浏览器打开短链接,可以跳...
  • merson 2014-01-02 16:30:32 回复
    你好,现在碰到一个棘手问题:
    我是新浪微博分享后,点击短链接,进入推广页面,之前是可以自动跳转到App,但最近都都不行,不知道为什么。如果用浏览器打开短链接,可以跳转到App
  • Alien 2013-12-29 16:14:49 回复
    回复 keke : Android上,还是iOS上呢?我还写过两篇文章,是关于“如何从WebApp中调起Native App”的,如果有需要的话,可以搜索了看看。希望能帮到你。
    keke said:
    这个方法在没有安装 App 的情况下会先弹出一个 “Cannot Open Page" 的 alert 框,不知道该如何破
  • keke 2013-12-26 18:39:12 回复
    这个方法在没有安装 App 的情况下会先弹出一个 “Cannot Open Page" 的 alert 框,不知道该如何破