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.挪用的体式格局

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