解决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 = "obby://";
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应用那么多功能,如果感兴趣可以一起去研究如何更全面、更友好的去优化唤醒功能。这篇文章是在看了很多资料后,提取合并大佬们的经验来分享编写的,如有错误,请指教。最后附上参考的大佬文章地址:参考文章...

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

上一篇:Android开发中发送请求是报错:E/OkHttpTool: CLEARTEXT communication to 192.168.0.106 not permitted by network security policy


下一篇:python中字典重复赋值,append到list中引发的异常