一、需要判断客户端的平台以及是否在微信浏览器中访问
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; }2、是否在微信内置浏览器中
无论是在哪个平台的客户端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'; }
二、原理
首先无论是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。
三、android平台
首先编辑AndroidManifest.xml，主要是增加第二个<intent-filter>
public void onCreate(Bundle savedInstanceState) { Uri uridata = this.getIntent().getData(); String mydata = uridata.getQueryParameter("data"); }之后在进行字符串截取还是什么鬼的都随意啦。
接下来来谈谈前端代码，这里有两种情况
1、页面在刷新进入时，请求权限唤起APP
这个比较简单，就只用在页面的顶部head中加入meta标签即可
<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?1.1.11"></script><script src="../res/lib/public.js?1.1.11"></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系统，通过定时器的方式，判断是否安装有APPvar 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的方式）
四、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，然后进行字符串拆分以及校验，即可判断去哪个页，以及获取参数值。
以上就是H5启动APP原生页面的实例方法的详细内容，更多请关注微课江湖其它相关文章！