HTML5页面调起APP

原文链接:https://segmentfault.com/a/1190000009496897

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.调用的方式

  • 拉起手雷
  • <iframe src="ftnn:login"></iframe>
  • 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)
}
  1. 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

展开阅读全文

没有更多推荐了,返回首页