h5启动原生APP总结 - 骨月枫_H5之家 - 中国HTML5教程资源分享第一站

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

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

1、客户端判断

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

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

所以首先要在客户端判断，是Android系统还是IOS系统，判断代码如下

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>

android:label="${APP_NAME}" android:screenOrientation="portrait" android:theme　　　　　　　　　　　　　　　　　　　　　　　　 android:scheme

比如此处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"); }

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

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

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

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

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

总类在加上去。

2、通过点击事件唤起APP

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

open Android app

但是在实际使用时，是需要对客户端的平台类型还有是否在微信内置浏览器中进行判断的，所以这样的做法肯定是不行的。

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

$((){ window.location.href ; });

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

open Android app open $( () { if(publicFun.isIos()){ alert() }else{ window.location.href ; } }); function startApp(){ if(publicFun.isIos()){ alert() }else{ window.location.href ; } }

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

window.startApp = (publicFun.isInWx()){ //微信中 alert("请在浏览器中打开"); }(publicFun.isIos()){　　　　//IOS系统，直接去itunes中，既可以下载也可以打开 window.location.href = "https://itunes.apple.com/cn/app/[name]/id[id]"; }hasApp = true , t = 1000; setTimeout((!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(t2 = Date.now(); hasApp = !(!t1 || t2 - t1 < t + 150); } , t); } } }

其实有个非常简单的办法，就是直接跳转应用宝。无论是在android还是IOS，以及微信非微信。应用宝的下载页面都有下载和打开两个功能（如果是在IOS平台，它是通过连接app store的方式）

四、IOS平台

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