解决React中打开App或者下载App问题

摘要

　　最近在写H5页面，项目中有个唤醒App的功能，由于没有接触过这类功能，就去学习了一波大佬们的经验。在此分享出来和大家一起学习学习。

内容

一、唤醒方式

　　经过查找资料，找到了三类较为客观的唤醒方式：

1.URL Schemes

2.Chrome

3.ios UniversalLink / android appLink

二、常用的唤醒媒介

　　除了需要确定的唤醒方式，还需要搭配唤醒媒介来一起作用，具体的常用的唤醒媒介如下：

1.ifame

2.a 标签(元素)

3.widnow.location

三、常规打开方式：URL Scheme

　　唤醒打开一个App，最常规的方式就是通过URL Scheme。那scheme是什么呢，它就像是路标一样，它可以让操作者通过scheme这个路标来打开App，对于App的开发处理就不做过多的描述，感兴趣的朋友可以去百度、谷歌搜索。对于前端而言，抛出scheme路标的媒介有三个，其中个人认为比较友好的方式是通过iframe媒介来抛出，对于其他媒介抛出方式感兴趣的朋友可以去探寻一番，接下来直接用代码分享，清晰明了的去使用常规scheme唤醒App方式。

四、代码

　　1、首先我们需要一个iframe媒介。

　　2、其次是我们需要一个URL Scheme唤醒方式。

　　3、最后就是通过设备判断，并打开我们需要的App应用。

　　为了方便引用这个唤醒APP的方式，我把它封装成了一个通用的downloadApp.js函数组件，重点代码如下：

（1）创建iframe媒介：

// 创建iframe
  const createIframe = (function() {
    let iframe;
    return function() {
      if (iframe) {
        return iframe;
      } else {
        iframe = document.createElement('iframe')
        iframe.style.display = 'none';
        document.body.appendChild(iframe);
        return iframe;
      }
    }
  })()

（2）定义url Scheme唤醒方式：

// 定义App的scheme 测试使用淘宝的scheme


const baseScheme = "taobao://";


const createScheme = function(options, isLink) {
    let urlScheme = baseScheme;
    for(let item in options) {
      urlScheme = urlScheme + item + '=' + encodeURIComponent(options[item]) + '&';
    }
    urlScheme = urlScheme.substring(0, urlScheme.length - 1);
    return encodeURIComponent(urlScheme);
  }

（3）定义唤醒App函数：（函数中的判断客户端设备类型的函数可以去百度，或者看我上一篇文章：Javascript判断客户端是Android还是IOS,判断浏览器类型）

  const openApp = function() {
    let localUrl = createScheme();
    let openIframe = createIframe();

    if (isIos) {
      // 判断是否是ios
      window.location.href = localUrl;
      const loadDateTime = Date.now();
      setTimeout(function() {
        const timeOutDateTime = Date.now();
        if (timeOutDateTime - loadDateTime < 1000) {
          window.location.href = "下载URL";
        }
      }, 25);
    } else if (isAndroid) {
      // 判断是否是安卓
      if (isChrome) {
        // Chrome浏览器用iframe打不开
        window.location.href = localUrl;
      } else {
        // 抛出scheme
        openIframe.src = localUrl;
      }
      setTimeout(function() {
        window.location.href = "下载URL";
      }, 500);
    } else {
      // 给winphone用户准备
      openIframe.src = localUrl;
      setTimeout(function() {
        window.location.href = "下载URL";
      }, 500);
    }
  }

总结

　　这就实现了唤醒打开App的功能，当然的，唤醒打开需要你有App，如果你没有App，就需要跳过下载链接去下载App了。在代码中不但实现了唤醒打开功能，还加入了下载功能，这样应用起来就更全面，用户体验也更加友好。但是这样的常规方式还是不够完美，就比如ios9.0以上版本唤醒或者下载App时就不会直接的跳转，有时甚至还会有允许的弹窗。存在的问题还需要进一步的去优化，本次就先分享唤醒App应用那么多功能，如果感兴趣可以一起去研究如何更全面、更友好的去优化唤醒功能。这篇文章是在看了很多资料后，提取合并大佬们的经验来分享编写的，如有错误，请指教。最后附上参考的大佬文章地址：参考文章...