H5唤起App

最近公司有个新需求，在公众号内打开app，有app就直接打开，没有就去应用市场下载，这就是一个引流的作用，我直接在网上找了一个大佬的轮子，callapp-lib（文档），使用起来特别方便。

想详细了解的推荐这篇文章，非常不错（地址）

1. 先引入工具

import CallApp from 'callapp-lib';

2. 需要创建一个对象作为参数

这些参数的具体意思文档都有，这里只讲如何操作

    const IOSoptions = {
        scheme: {
            protocol: 'ulife'
        },
        intent: {
            package: 'com.ulife.app',
            scheme: 'myulifeapp',
        },
        appstore: 'https://itunes.apple.com/cn/app/wan-zhuan-quan-cheng/id1146376047?mt=8',
        yingyongbao: '//a.app.qq.com/o/simple.jsp?pkgname=com.ulife.app',
        fallback: 'http://njtc.myulife.com.cn/down',
        timeout: 2000,
    };

3. 使用构造函数创建对象

const IOScallLib = new CallApp(IOSoptions);

4. 由于微信限制，如果不在腾讯白名单内是不能直接通过微信网页唤起app的，所以让用户在浏览器中打开

 // 立即使用 有app打开app 没有去下载
  userNow () {
    let UA = window.navigator.userAgent
    // 微信浏览器
    if(UA.toLowerCase().indexOf("micromessenger") !== -1) {
      this.setState({
        tipShow: true
      })
      return
    } 
    // 机型 iphone
    else if(UA.toLowerCase().indexOf("iphone") !== -1) {
      if(UA.match(/(iPhone|iPod|iPad);?/i)){
        IOScallLib.open({
          path: ''
        })
        // location.href="ulife://"
      }
    }
    // 机型 android
    else if(UA.toLowerCase().indexOf("android") !== -1) {
      /* android 唤起失败，原因不详，预估参数不准确
      ANDRIODcallLib.open({
        path: ''
      })
      */
      // 采用其他办法
      location.href="myulifeapp://ulife.app/openwith"
      document.querySelectorAll('.inviteDraw')[0].addEventListener('click', function() {
        window.location.href = 'http://down.myulife.com.cn/ULife.apk'
      }, false)
    }
  }

5. 由于安卓一直唤端失败，可能是因为参数的原因，然后是个兼职安卓，无语。。。所以采用另一种方法实现，URL Scheme

为(应用的某个功能)    
            |
scheme://[path][?query]
   |               |
应用标识       功能需要的参数