H5页面调起第三方App

sunny5541 发布于2019-08-22 17:20 / 3267人阅读

摘要：调起的注意事项年初，微信下全面封禁了，所以在微信下是调不起的，暂时是没有什么办法。所以安卓下调不起是一件十分正常的事情。表示的包名，比如，表示调起的安卓下判断是否调起成功其实有一种方法可以判断安卓下是否调起成功。

背景

在H5页面或者app的webview中调起第三方app

核心

调起app是操作系统(iOS、Android)的机制，在h5页面，我们可以做的不多。

在调起之前，h5页面无法判断当前手机是否安装了对应的app，我们只能去尝试调起，并且用一些方法来处理没有调起的情况。

调起的原理就不介绍了，网上一搜一大堆。直接上核心代码。

if(iOS9) {
    window.location.href = ${universalLink};
}
else {
    var ifr = document.createElement("iframe");
    ifr.src = ${scheme};
    ifr.style.display = "none";
    document.body.appendChild(ifr);
    window.setTimeout(function () {
       document.body.removeChild(ifr);
    }, 300);
}

举个栗子：
${universalLink} = "http://myapp.com"
${scheme} = "myapp://index"

解释一下上面的代码，如果是iOS9及以上的iOS系统，直接跳转到调起app的universal link。如果是安卓或者iOS9一下的iOS系统，就新建一个iframe，把这个iframe的src弄成调起app的scheme，然后把这个iframe直接塞到页面的DOM树上，然后『听天由命』就行。

iOS的调起

iOS是使用universalLink(下面简称ulink)的方式来进行调起。具体系统内部的机制就不说了，网上一堆文章，随便搜一下就行。

universalLink其实就是一个正常的http请求的url。我们在h5页面使用 location.href=XX进行调起的时候，如果说调起成功了，那么其实这个url是不会被访问的，抓包也抓不到。换句话说，如果我们访问到这个url了，说明我们的调起失败了。

iOS如何实现【安装了调起，没有安装跳下载页】

上面说了，iOS下调起失败后，会访问到一个url。要实现没有安转跳下载页，那么就直接把ulink对应的链接做成下载页就好了。根据需求，我们还可以将ulink对应的url做成任何页面。但是，如果我们不想要跳转到这个页面，还是想停留在之前的页面呢？很简单，叫RD哥哥在通链那个url的服务端加一个302重定向服务就行。

举个栗子，我们使用下面的ulink来调起App。

http://myapp.com/index?target=encodeURIComponent("http://www.baidu.com");

调起失败后，上面那个ulink会被浏览器访问到，我们在服务端加了重定向服务，我们最终会访问到target对应的地址，即 http://www.baidu.com 。这样，我们就实现了【调起失败时，跳转到自己想要的页面】。

iOS如何实现【安装了调起，没有安装时，在当前页面继续进行其他操作】

两种方法：

一、需要后端重定向服务，我们只需要把上面重定向的链接换成一个scheme就行了。这种方法适用于页面必须要用户点击才能触发的交互，比如视频、音频的播放等。（另：微信下可以通过监听jsbridge ready的事件，自动播放视频、音频）

这个scheme需要满足以下的要求：

可以被当前浏览器识别

浏览器识别了这个scheme，但是不会进行任何其他操作。

如果这个scheme同时满足了上述两个条件，那么体验就是最好的。否则，可能就会出现浏览器弹框等问题。

举几个scheme的例子

...
facetime:// （iOS11以下体验完美，之后的版本会直接拉起facetime--）
ucbrowser:// 
...

二、需要后端重定向服务，我们需要把重定向链接换成【当前链接后加一个特殊参数】的链接。这样在前端代码里就可以判断url里面的特殊参数，从而得知当前页面是拉起app失败时进入的。

iOS调起的注意事项

2018年初，iOS微信下全面封禁了universalLink，所以在微信下是调不起app的，暂时是没有什么办法。这种时候，一般可以提示用户，从浏览器打开。当然，也可以找微信开白名单，直接用微信的能力去拉起。

其实iOS下用scheme也是可以调起的，比如
window.location.href = scheme
但是这样有个问题，如果说没有安装对应的app，在safari下会弹窗：无法识别该链接，并且就算安装了该app，也会弹一个窗让你确认是否调起。

虽说iOS的通链是一个url，但是也不是直接粘贴到safari等浏览器下访问就能直接调起app。因为iOS的通链调起必须要求有用户操作，比如点击等行为。可以将链接粘贴到iOS的备忘录上，点击这个链接就可以直接调起了。

Android的调起

安卓的调起是用iframe的方式(其实现在的高版本安卓也可以直接window.location.href=scheme)。

安卓调起的最大的特点就是，安卓无法知道是否成功调起了app。安卓下的调起一般都会有自带的兜底策略，比如下载。代码也很简单

    var ifr = document.createElement("iframe");
    ifr.src = ${scheme};
    ifr.style.display = "none";
    document.body.appendChild(ifr);
    window.setTimeout(function () {
       document.body.removeChild(ifr);
       // 这里写兜底策略的逻辑，比如下载。
       // 当然，也可以不加任何的兜底策略，调不起就算了。
       window.location.href = ${下载地址}
    }, 300);

如果想要实现【安装了app调起，没有安装app下载】的功能，那么肯定会调起和下载的逻辑同时执行，因为安卓无法知道是否成功调起app。

安卓的调起是很灵活的，你可以任意控制兜底策略的逻辑，想干嘛干嘛。只是说，兜底策略是几乎一定会执行的，不管你调起成功还是失败。

Android调起注意事项 各种浏览器的屏蔽

很多浏览器都对scheme做了屏蔽。所以安卓下调不起app是一件十分正常的事情。

微信下调起

微信太封闭了，自然屏蔽了非自家app的调起。只新建一个iframe的方式在微信下是不能调起的。微信针对webview调起app的策略也一直在修改。最新(2018年3月19日)的想要在微信的webview下调起app的方式是：

手机上必须安装应用宝

使用下面的方式，跳转到应用宝页面进行调起。

    window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=${pkgname}&android_scheme= encodeURIComponent(${scheme})"
    
    ${pkgname}表示app的包名，比如 "com.myapp"，${scheme}表示调起的scheme

安卓下判断是否调起成功

其实有一种方法可以判断安卓下是否调起成功。执行调起逻辑后，设一定的延时判断当前页面是否可见，若不可见了，几乎就可以确定是调起成功了。但是只对小部分浏览器有效(比如安卓下的chrome)。对大多数浏览器而言，调起成功后，会有一个弹框，需要用户点击确定后，才能唤起app。由于这个弹框的存在，就无法通过页面是否可见的方法来判断调起成功与否了。而chrome下，调起成功直接唤起app，是不会弹窗的，所以chrome下可以用延时+页面是否可见的方式来判断调起成功与否。

欢迎关注我的公众号，这里只有干活，符合预期

云服务器服务器托管 h5页面 h5页面设计稿 h5页面视频自动播放微信内h5页面打开小程序

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95086.html

斗米客户端的架构思想

摘要：经过这些年在端浏览器内核端研发经验的积累，年我在斗米的客户端产品上首次提出了以驱动的客户端平台化架构思想，并经过两年时间多个产品的探索实践，我认为该端的架构思想可正式对外分享。在斗米的各客户端中，在不需要发版的前提下，可以使用发版。背景随着移动互联网产业的兴起，各式App层出不穷，技术方案多种多样。同样，我们也面临了各式各样的问题，比如产品如何开发能够更快速迭代上线，如何使运营推广...

Cympros 2019-08-15 11:01 评论0 收藏0
斗米客户端的架构思想

摘要：经过这些年在端浏览器内核端研发经验的积累，年我在斗米的客户端产品上首次提出了以驱动的客户端平台化架构思想，并经过两年时间多个产品的探索实践，我认为该端的架构思想可正式对外分享。在斗米的各客户端中，在不需要发版的前提下，可以使用发版。背景随着移动互联网产业的兴起，各式App层出不穷，技术方案多种多样。同样，我们也面临了各式各样的问题，比如产品如何开发能够更快速迭代上线，如何使运营推广...

lpjustdoit 2019-08-20 18:21 评论0 收藏0
斗米客户端的架构思想

摘要：经过这些年在端浏览器内核端研发经验的积累，年我在斗米的客户端产品上首次提出了以驱动的客户端平台化架构思想，并经过两年时间多个产品的探索实践，我认为该端的架构思想可正式对外分享。在斗米的各客户端中，在不需要发版的前提下，可以使用发版。背景随着移动互联网产业的兴起，各式App层出不穷，技术方案多种多样。同样，我们也面临了各式各样的问题，比如产品如何开发能够更快速迭代上线，如何使运营推广...

SmallBoyO 2019-08-05 11:44 评论0 收藏0
HTML5页面调起APP

摘要：背景为了提升的曝光和的用户新增，添加分享页的应用场景是必不可少的，但是各种平台环境不一，要如何兼容和策略处理。 HTML5 call native app 背景为了提升app的曝光和app的用户新增，添加H5分享页的应用场景是必不可少的，但是各种平台环境不一，要如何兼容和策略处理。下面会一一说明 1. 页面调起原生app 调起原生 app，然后下载APP 不同平台的兼容和策略处理，...

codecook 2019-06-25 11:15 评论0 收藏0
HTML5页面调起APP

摘要：背景为了提升的曝光和的用户新增，添加分享页的应用场景是必不可少的，但是各种平台环境不一，要如何兼容和策略处理。 HTML5 call native app 背景为了提升app的曝光和app的用户新增，添加H5分享页的应用场景是必不可少的，但是各种平台环境不一，要如何兼容和策略处理。下面会一一说明 1. 页面调起原生app 调起原生 app，然后下载APP 不同平台的兼容和策略处理，...

import. 2019-08-21 15:49 评论0 收藏0