原理说明
首先需要说明,不管iOS还是Android,浏览器都不可能预知本地是否安装了某个APP的。或者更严谨地说,我们不能通过浏览器来预知本地是否安装。因为就算浏览器可以读取本地应用的安装列表,但是目前也没任何一家浏览器提供查询的API,所以这条路是走不通的。
本质上浏览器是通过URL scheme打开APP,一个APP可以设置一个或多个打开自己的URL scheme。
通过JS唤醒APP页面操作说明
首先明确一下目的,是要在分享出去的html页面,通过js操作唤醒app或者打开商店,那么第一步就应该先判断当前的环境,这里我附上详细的判断方法,通用的
var browser = {
versions: function() {
var u = navigator.userAgent,
app = navigator.appVersion;
return {
trident: u.indexOf('Trident') > -1, /*IE内核*/
presto: u.indexOf('Presto') > -1, /*opera内核*/
webKit: u.indexOf('AppleWebKit') > -1, /*苹果、谷歌内核*/
gecko: u.indexOf('Gecko') > -1 && u.indexOf('KHTML') == -1, /*火狐内核*/
mobile: !!u.match(/AppleWebKit.*Mobile.*/), /*是否为移动终端*/
ios: !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), /*ios终端*/
android: u.indexOf('Android') > -1 || u.indexOf('Linux') > -1, /*android终端或者uc浏览器*/
iPhone: u.indexOf('iPhone') > -1, /*是否为iPhone或者QQHD浏览器*/
iPad: u.indexOf('iPad') > -1, /*是否iPad*/
webApp: u.indexOf('Safari') == -1, /*是否web应该程序,没有头部与底部*/
souyue: u.indexOf('souyue') > -1,
superapp: u.indexOf('superapp') > -1,
weixin:u.toLowerCase().indexOf('micromessenger') > -1,
Safari:u.indexOf('Safari') > -1
};
}(),
language: (navigator.browserLanguage || navigator.language).toLowerCase()
};
这里用到两个判断,一个ios一个安卓
if (browser.versions.ios) {
//你的代码
}else if (browser.versions.android){
//你的代码
}
那么接下来就应该判断当前手机上是否有安装某款应用,但是要知道js是无法判断手机上是否安装了哪款app的,所以有app打开app,没有app跳转到商店就可以这么做,js打开ios系统app的方法是这样的。
以shareinstall为例:
Shareinstall其实是一个APP的推广辅助工具。APP开发者可以通过Shareinstall更精准的进行产品的推广。
shareinstall通过在url中附带具体的参数,唤醒app并跳转到具体页。
唤醒页面以获取信息的过程如下: