思路：
iOS APP开发时，如果想在桌面生成快捷方式，目前来说，唯一的方式就是利用Safari浏览器的“添加到主屏幕”这个功能，这个功能会把当前打开的站点生成快捷图标放到桌面上，我们可以对这个网页进行设置，当在浏览器中打开时，展示宣传图等，在快捷方式打开时，直接跳转到APP的指定界面中
目前来说，使用Safari打开的网页可以放在服务器上，也可以在APP中，这就导致生成快捷方式有两种不同的方法，一种简单，一种复杂，简单的方式是将网页放在服务器上，复杂的方式是将网页内嵌在APP中。本文只使用简单的方式进行最基础的快捷方式的实现，并在文章的最后有两种方式的优缺点比较表。
我会在下一篇文章中介绍如何对这种方式进行优化，以减少对网络的依赖并提升用户的体验。而复杂的实现方式我会放在以后的文章中慢慢进行介绍。由于复杂的方式还涉及到在APP内嵌HTTPServer，所以，我会在正式讲解复杂的方式之前，会先讲解如何在APP中内嵌HTTPServer。
先对所有步骤进行总结，然后再分别对所有步骤进行细化
- 第一步：编写一个用来展示的网页
- 第二步：将网页放在服务器上
- 第三步：在APP中编写执行生成快捷方式的事件
- 第四步：设置外部打开APP的scheme
- 第五步：处理快捷方式打开APP的事件
- 编写一个用来展示的网页
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="apple-mobile-web-app-capable" content="yes"><!--定义应用全屏展示的-->
<meta name="apple-mobile-web-app-status-bar-style" content="black"> <!--设置状态栏的属性值，只有在定义了 apple-mobile-web-app-capable的前提下才有效。-->
<meta content="text/html charset=UTF-8" http-equiv="Content-Type" />
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" /> <!--width用于指定宽度，initial-scale指定初始化的缩略比例，minimum-scale指定缩小的比例，而maximum-scale则是放大的比例，当然这些缩放都取决于user-scalable——决定用户是否能缩放页面。-->
<link rel="apple-touch-startup-image" sizes="2048x1496" href=""> <!--设置快捷方式的启动页，也就是快捷方式点击后，在启动APP之前展示的那个页面，不建议设置-->
<link rel="apple-touch-icon" href="./images/image_0.png"> <!-- 快捷方式的图标，有两种属性值apple-touch-icon和apple-touch-icon-precomposed，区别就在于是否会应用iOS中自动给图标添加的那层高光。-->
<title>快捷方式</title> <!-- 这个title将会是桌面快捷方式的默认标题，在生成时可以手动修改 -->
</head>
<body>
<!-- href后的链接是APP对外开放的scheme，只有scheme与APP中设置的一致，才能打开APP，
而scheme后面的值可以作为打开APP后的特殊操作，如果仅仅是打开，后面随便写就行，APP中不进行处理即可 -->
<a href="shortcut://abc" id="qbt" style="display:none"></a>
<span id="msg"></span>
</body>
<script>
<!-- 这段js代码是用来判断是展示网页图片还是打开APP,
window.navigator.standalone 是用来判断网页是否是全屏展示，
如果是全屏展示，那么就是点击快捷方式打开的，直接执行打开APP的操作即可，
如果不是全屏展示，那么就是通过URL在浏览器中打开的，直接展示网页即可-->
if (window.navigator.standalone == true) {
var lnk = document.getElementById("qbt").click();
} else {
document.getElementById("msg").innerHTML='<center><img width = 400.000000 src="./images/image_1.jpg"></center>';
}
</script>
</html>
- 将网页放到服务器上
这一步其实没必要介绍了，将刚刚编写的网页放在服务器上指定的位置，然后将记录下地址，在APP中需要使用
- 在APP中编写执行生成快捷方式的事件
其实就是使用Safari打开刚刚放到服务器上的那个网页，就是我不写，你们也知道怎么做
let urlStr = "http://192.168.9.224/shortcut.html"
let app = UIApplication.shared
guard let url = URL.init(string: urlStr),
app.canOpenURL(url) else {
return
}
app.open(url, options: [:]) { (_) in
print("Safari浏览器打开了快捷方式地址")
}
- 设置外部打开APP的scheme
不会的可以参考下图的步骤
iOS设置scheme.png
- 处理快捷方式打开APP的事件
在AppDelegate中实现代理方法，外界通过URL Scheme打开APP都会走这个代理
func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool
只要在这个代理方法中通过url判断就可以知道是不是通过快捷方式进来的，如果是，那么是通过哪个快捷方式进来的，接下来需要进行哪些指定的操作，这些就得看业务需求了，我接下来只是做一个简单的示例：
func application(_ app: UIApplication, open url: URL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
if url.scheme == "shortcut" { /// 是通过快捷方式点进来的
if let components = URLComponents.init(string: url.absoluteString) {
let items = components.queryItems ?? []
for item in items {
if item.name == "operation" && item.value == "test1" {
/// 执行test1相关的操作
}
}
}
}
return true
}
我的这个简单的判断只是为了更直观的介绍这个回调，在实际项目中，这个地方需要根据网页端URL的结构进行解析，然后才能进行下一步
优劣比较
网页存放在不同的位置都有其优势和劣势，详情可以参考以下表格，都是经过自己摸索的，如果有疑问或不同的看法，欢迎指出来
| 线上 | 线上优化版 | 本地 | |
|---|---|---|---|
| 1. 难度 | 低，没有太多技术含量 | 中，需要使用data url | 高，需要在APP内部搭建本地服务器，网页代码也需要进行编码等操作，不过这不正好是体现我们技术的时候么 |
| 2. 迭代 | 方便，可以直接在网页端修改网页展示效果、桌面图标、默认标题 | 方便，可以在线修改部分属性 | 麻烦，网页效果、桌面图标、默认图标的修改需要更新APP |
| 3. 体验 | 不好，当没有网络时，无法打开进行快捷方式的设置，已经设置过的快捷方式无法打开 | 一般，没有网络时不能设置快捷方式，但已经设置好的可以打开 | 好，不依赖网络，即使没有网络也可以设置快捷图标，已经设置过的也可以正常打开 |
| 4. 依赖类库 | 不需要 | 不需要 | 需要（如果自己可以写一个httpServer，那就不需要） |
| 4. 安装包大小 | 小，对APP的安装包几乎没有影响，只是多几行代码而已 | 小，对APP安装包的大小没什么太大的影响 | 稍大，主要是图标和网页效果中的图片是集成在本地的，而且还需要添加其他依赖（如果自己写一个简单的貌似也不错） |
网友评论