h5启动原生APP总结

许久没有写博客了，最近有个H5启动APP原生页面的需求，中间赶上一些坑，看了些网上的实现方案，特地来总结下

1、须要判断客户端的平台以及是否在微信浏览器中访问

一、客户端判断

在启动APP时，Android和IOS系统处理的方式是不同的，Android这边因为开放，能够在浏览器中经过<a>标签以及meta标签的方式，让浏览器app获取手机打开应用的权限进而启动APP。

而在IOS这边，IOS9之后的系统，则能够在APP开发过程当中加入配置和逻辑代码编写，系统在浏览器即将访问到某个域名前就把这个域名对应的APP打开，这个有点闪，封闭仍是有封闭的好处。

因此首先要在客户端判断，是Android系统仍是IOS系统，判断代码以下

function isInIos(){
    var userAgentInfo = navigator.userAgent ,
        Agents = ["iPhone" , "iPad", "iPod"];
    for(var v = 0; v < Agents.length; v++) {
        if (userAgentInfo.indexOf(Agents[v]) > 0) {
          return true;
        }
    }
    return false;
}        

二、是否在微信内置浏览器中

不管是在哪一个平台的客户端Android/IOS，在微信的平台上访问都有一个问题，那就是没法启动客户端，这是微信为了安全性考虑的限制，android这边屏蔽schema协议，除非公司是微信的伙伴加入了白名单才能

使用，IOS系统能够去访问app对应appstore的下载页，可是微信常常屏蔽appstore的这个网址，进而访问不到。比较方便的作法就是在微信浏览器中，不管是IOS仍是android都去应用宝的下载(IOS 这边最后会到

appstore中)页面打开。我这边的需求是提示用户点击“...”用默认浏览器打开。

判断是不是在微信中，代码以下：

function isInWx(){
    var agent = window.navigator.userAgent.toLowerCase();
    return agent.match(/MicroMessenger/i) == 'micromessenger';
}

 

 

2、原理

首先不管是andorid仍是IOS端，在浏览器中经过JS都是没法判断该手机是否装有某APP的，即便这个浏览器有权限读取手机应用列表，也没有一个固定的对外API让我们进行查询。而H5启动APP本质上是经过

URL scheme打开APP，一个APP能够设置一个或多个打开本身的URL scheme，浏览器去访问某一个APP的URL scheme，而后若系统安装有这个APP，则会请求权限去打开这个APP。其实也算是浏览器app

打开另外一个app，iOS就可使用 UIApplication 的 canOpenUrl 方法来检测URL scheme 是否能打开对应的APP，而android也是相似的方式。固然若是JS跳转URL scheme没有反应，也意味着这个手机没有

装这个app。

 

3、android平台

首先编辑AndroidManifest.xml，主要是增长第二个<intent-filter>

<activity android:name=".activity.LoadingActivity"
      android:label="${APP_NAME}"
      android:screenOrientation="portrait"
      android:theme="@style/FirstActivityTheme">
      <intent-filter>
          <action android:name="android.intent.action.MAIN" />
　　　　　　<category android:name="android.intent.category.LAUNCHER" />
      </intent-filter>
      <intent-filter>
          <action android:name="android.intent.action.VIEW" />
　　　　　　<category android:name="android.intent.category.DEFAULT" />
　　　　　　<category android:name="android.intent.category.BROWSABLE" />
　　　　　　<data android:host="android"
                android:scheme="wushang" />
      </intent-filter>
</activity>

好比此处wushang就是scheme，这个最好是app的惟一标识符，要否则在H5唤醒时，会出现一个选择框，选择启动哪个APP。而host表示启动该页面，其实这个更应该用com.android.sky这样的包名来替代更好。

这样的状况完整的URL就是wushang://android?data=sky，后面是参数传递。在Activity中能够用以下代码获取参数

public void onCreate(Bundle savedInstanceState) {             
     Uri uridata = this.getIntent().getData();             
     String mydata = uridata.getQueryParameter("data");            
}

以后在进行字符串截取仍是什么鬼的都随意啦。

 

接下来来谈谈前端代码，这里有两种状况

一、页面在刷新进入时，请求权限唤起APP

这个比较简单，就只用在页面的顶部head中加入meta标签便可

<meta http-equiv="refresh" content="0;url=wushang://android?data=sky">

这个标注当页面刷新即去访问这个连接，进而启动APP。可是存在一个问题，若是是苹果系统的Safari浏览器的话，访问有这个meta的头，会给出错误提示，因此这个头部能够在后端进行页面渲染时经过客户端的

总类在加上去。

二、经过点击事件唤起APP

最简单的办法固然是直接使用a标签，以下

<a href="wushang://android">open Android app</a>

可是在实际使用时，是须要对客户端的平台类型还有是否在微信内置浏览器中进行判断的，因此这样的作法确定是不行的。

接下来谈谈在开发过程当中，遇到的一个问题，记录下。由于这边移动端使用的工具库库是zepto，采用的点击事件是tap，可是在用tap进行处理是常常要点不少下，才能唤起APP

<script type="text/javascript">
  $('#go').tap(function(){
      window.location.href = "wushang://android";
  });
</script>

具体缘由不知，多是tap事件采用的是轻点触碰。而后摸索了下，才用click事件，或者直接在a标签上标注处理函数就没有这问题

<a id="go" >
    open Android app
</a>
<a href="javascript:startApp()">
   open
</a>
<script src="../res/lib/zepto.min.js"></script>
<script src="../res/lib/public.js"></script>
<script>
    $('#go').click(function () {
       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    });

    function startApp(){
       if(publicFun.isIos()){
          alert('it is IOS')
       }else{
          window.location.href = "wushang://android";
       }
    }
</script>

因此决定之后遇到这类问题，就用这两种方式了。下面是实际的处理函数

 window.startApp = function(){     //启动APP
     if(publicFun.isInWx()){     //微信中
        alert("请在浏览器中打开");
     }else{      //非微信中
        if(publicFun.isIos()){　　　　//IOS系统，直接去itunes中，既能够下载也能够打开
            window.location.href = "https://itunes.apple.com/cn/app/[name]/id[id]";
        }else{      //android系统，经过定时器的方式，判断是否安装有APP
            var hasApp = true , t = 1000;
            setTimeout(function () {  //没有安装APP则跳转至应用宝下载，延时时间设置为2秒
              if(!hasApp) window.location.href = "http://a.app.qq.com/o/simple.jsp?pkgname=[name]";
            } , 2000);
            var t1 = Date.now();
            window.location.href = "wushang://android";
            setTimeout(function () {    //t的时间就是出发APP启动的时间，若APP启动了，再次返回页面时t2这行代码执行，hasApp即为true。反之若APP没有启动即为false
              var t2 = Date.now();
              hasApp = !(!t1 || t2 - t1 < t + 150);
            } , t);
        }
     }
  } 

其实有个很是简单的办法，就是直接跳转应用宝。不管是在android仍是IOS，以及微信非微信。应用宝的下载页面都有下载和打开两个功能（若是是在IOS平台，它是经过链接app store的方式）

 

4、IOS平台

针对ios9及以上的打不开问题，实际上ios9提供了更好的解决方案————通用连接。

这是iOS9推出的一项功能，若是你的应用支持Universal Links(通用连接)，那么就可以方便的经过传统的HTTP连接来启动APP(若是iOS设备上已经安装了你的app，不须要额外作任何判断等)，或者打开网页(iOS设备上没有安装你的app)。或许能够更简单点来讲明，在iOS9以前，对于从各类从浏览器，Safari、UIWebView或者 WKWebView中唤醒APP的需求，咱们一般只能使用scheme。

以上来自网上关于通用连接的介绍，对于前端简单点讲就是你访问一个http的url，若是这个url带有你提交给开发平台的配置文件中匹配规则的内容，ios系统会去尝试打开你的app，若是打不开，系统就会在浏览器中转向你要访问的连接。很好的一个属性，由于经过这个属性在ios9上咱们可以绕过微信的拦截从而打开app。

因此上面的点击事件，仅仅是去访问app store，由于若app已安装，在浏览器访问时，就已经去到APP中了。

这些都是IOS配置上的东西，就很少写了。至于传参，以及页面定向，其实也就是至关于在UIWebView中获取当前链接的URL，而后进行字符串拆分以及校验，便可判断去哪一个页，以及获取参数值。