IOS 开发之应用唤起实现原理详解

154 阅读 0 评论 102 点赞

我是靠谱客的博主忧郁香氛，这篇文章主要介绍IOS 开发之应用唤起实现原理详解，现在分享给大家，希望可以做个参考。

一、什么是iOS应用唤起

IOS中的应用唤起用来实现以下功能：在浏览器中可以通过某些方式打开IOS手机本地的app，如果该app没有安装可以跳转到该应用对应的App Store的下载页。

二、App store下载页连接

App store中某个应用的下载页连接形如：https://itunes.apple.com/us/app/id399608199。在PC端浏览器打开该连接会跳转到应用详情页的PC端界面。在Safari中打开该连接，浏览器会询问是否在App Store中打开该连接，选择打开即会自动打开App Store并跳转到对应应用的下载界面。

三、URL Schemes

URL Schemes和URL很类似，一个URL可以指向某个网站（如https://www.apple.com指向苹果官网），也可以指向该网站内部具体的某个页面（如https://www.apple.com/mac/指向苹果官网的Mac页面）。一个URL Schemes也可以指向某个APP（weixin://指向微信这个APP）或者APP内部的某个功能（weixin://dl/moments/指向微信朋友圈功能）。

基本URL Schemes指的是如weixin://的这部分。通过这个基本URL Schemes，可以打开某个IOS APP应用。比如在Safari的地址栏中输入weixin://，浏览器就会提示是否打开微信，选择打开，手机就会自动打开本地的微信应用。

四、IOS应用唤起方法

1.直接跳转法（支持各个版本IOS系统）

最简单的方法，在页面中使用a标签制作一个按钮，让其href指向打开APP的基本URL Schemes即可。考虑到可能本地没有安装，这时需要通过js代码让浏览器跳转到对应的App Store下载页。可以设定一个合理的反映时间时间，如果超时还没有打开应用的话，就跳转到下载页面，可以使用setTimeout方法，代码如下：

复制代码

1
2
3
4
5
6
$('a').click(function() { 
  location.href = 'weixin://'; 
  setTimeout(function() { 
    location.href = 'https://itunes.apple.com/us/app/id399608199'; 
  }, 500); 
}

2.使用iframe（仅支持IOS8及其以下版本）

通过为body中添加一个隐藏的iframe，其内部的src设置成对应的连接，即可实现该功能，代码如下：

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
var url = { 
 open: 'weixin://', //对应的Scheme 
 down: 'https://itunes.apple.com/us/app/id399608199'  //对应的下载地址 
}; 
var iframe = document.createElement('iframe'); //创建一个iframe 
var body = document.body; 
iframe.style.cssText='display:none;width=0;height=0'; //设置该iframe为不可见的 
var timer = null; 
var openapp = document.getElementById('openapp'); 
openapp.addEventListener('click', function() { 
 body.appendChild(iframe);  //点击打开app按钮后，将这个iframe添加到body中 
 iframe.src = url.open; //设置iframe的src为weixin://，通过这个iframe进行跳转 
 timer = setTimeout(function() { 
  wondow.location.href = url.down; //500ms后跳转到下载界面 
 }, 500); 
}, false)