使用js启动移动端app

发表于

最近有一个需求，需要在页面中启动本地的app，这里的app指的是移动端的app，如果已经安装，则直接启动，如果没有安装，则跳转到下载页面。

判断本地是否已安装应用

我们需要判断本地是否已经安装了app，然后根据安装情况，我们做不同的处理。判断是否安装过的思路是我们直接用js去启动应用，看是否会有响应。

启动本地应用

启动本地的应用往往有一个启动协议，app的启动不同于网页，但是又比较类似。

我们先看看app的启动协议（例如微信）

1
2
协议://(后面是需要的参数)
weixin://

知道了启动入口以后，启动本地app就方便多了，我们直接使用js跳转到对应路径即可。

1
2
3
4
// 第一种形式：窗口跳转到对应地址
window.location = 'your app url';
// 或者
document.location.href = 'your app url';

第二种形式，窗口打开对应路径

1
window.open('your app url', '_self');

第三种形式，使用iframe操作打开。（这种方式网上很普遍，但是我没试验成功）

1
2
3
4
5
6
7
var ifr = document.createElement('iframe');
ifr.src = config.app_url + window.location.search;
ifr.style.display = 'none';
document.body.appendChild(ifr);
window.setTimeout(function(){
  document.body.removeChild(ifr);
},2000)

使用上面三种方式，在本地已经安装app的情况下，都可以正常运行，但是如果没有安装的话，前两种方式会弹窗提示路径无效，对于用户体验不太友好，所以可以考虑使用iframe形式。

跳转到下载地址

当本地没有安装应用时，我们可以考虑跳转到下载地址，让用户下载，android和ios的下载路径一般不同。下载应用相对来说比较容易。

android端下载

1
window.location = 'xxx.apk';

ios端下载通常是跳转到app store对应的目录下

1
window.location = 'https://itunes.apple.com/cn/app/idxxx';

实际场景结合

实际场景中，我们需要先判断是否安装，安装则启动，没有安装则跳转到下载页面。

1
2
3
4
5
6
7
window.location.href = 'your app url';
window.setTimeout(function() {
 var timeOutDateTime = new Date();
 if (timeOutDateTime - loadDateTime < 2000) {
  window.location = 'app download url';
 }
}, 25);

这里会有2s的判断，未启动，那么再2s内会跳转到下载页面。