HTML5页面调起APP

PumpkinDylan 发布于2019-06-25 16:11 / 479人阅读

摘要：背景为了提升的曝光和的用户新增，添加分享页的应用场景是必不可少的，但是各种平台环境不一，要如何兼容和策略处理。

HTML5 call native app 背景

为了提升app的曝光和app的用户新增，添加H5分享页的应用场景是必不可少的，但是各种平台环境不一，要如何兼容和策略处理。下面会一一说明

1. 页面调起原生app

调起原生 app，然后下载APP

不同平台的兼容和策略处理，比如微信,微博，QQ，QQ空间，浏览器

2. HTML5页面调起原生APP android、ios调起的方式

Schame + Android Itent

Schema ＋　Universal links（IOS9+）

3.调用的方式

拉起手雷

window.location.href= "ftnn:login";

说明：由于无法确定是否安装了客户端，因此通过window.location = schema的方式可能导致浏览器跳转到错误页；所以通过iframe.src或a.href载入schema是目前比较常见的方法；

代码实现

export const locationCallAPP = (url, downloadUrl, ios9Type) => {
 location.href = url
 var timeout
 var t = Date.now()
 var interval = ios9Type ? 2500 : 1000
 timeout && clearTimeout(timeout)
 timeout = setTimeout(function() {
   if (Date.now() - t < interval + 1000) {
     location.href = downloadUrl
   }
 }, interval)
}

const iframeCallAPP = (url, downloadUrl, ios9Type) => {
console.log("[iframeCallAPP1]"+url)
var timeout
var t = Date.now()
var interval = ios9Type ? 2500 : 2000
timeout && clearTimeout(timeout)
timeout = setTimeout(function () {
if (Date.now() - t < interval+1000) {

  console.log("[iframeCallAPP2]"+downloadUrl)
 location.href = downloadUrl

}
}, interval)
if (ios9Type) {
location.href = url
}
var docNode = document
var iframe = docNode.createElement("iframe")
iframe.setAttribute("src", url)
// iframe.setAttribute("target", "_self");
iframe.setAttribute("style", "display:none")
docNode.body.appendChild(iframe)
setTimeout(function () {
docNode.body.removeChild(iframe)
}, 200)
}

4. 特殊场景说明

微信

应用宝deeplink

微博

中间提示页

类似于“请在浏览器打开”

5. 遇到的问题：不知道手机有没有安装app

尝试调起APP，如果不能，使用setTimeout进行下载，所以需要进行处理，如下图：
$(document).on("visibilitychange webkitvisibilitychange", function() {
            var tag = document.hidden || document.webkitHidden;
            if (tag) {
                clearTimeout(timer);
            }
        })

    $(window).on("pagehide", function() {
        clearTimeout(timer);
    })

当手机安装了App，能调起app后就不进行下载
没有安装App,过了一段时间，进行下载

6.H5 page call native app

H5 page call native app

服务器托管超融合服务器 webrtc调起摄像头 html5页面 html5 切换页面 html5 上下页面

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

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

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
HTML5页面调起APP

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

pubdreamcc 2019-08-05 11:16 评论0 收藏0
斗米客户端的架构思想

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

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

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

lpjustdoit 2019-08-20 18:21 评论0 收藏0