上篇文章中我们只有一个网页，在这篇文章中，我们会写两个网页，一个是用来过渡和解析数据的网页，另外一个是正式的网页，这个网页的所有的内容会使用到data url。
优化有两种方式，一种是将数据解析集成在APP中，一种是将数据解析放在服务器上的网页中进行，本文只介绍第一种，因为两种方式的实现过程也差不多，而且我是APP的开发者，对APP的开发语言更熟悉，所以就选择了第一种进行介绍，实际开发中可就不一定使用第一种哦。
- 创建过渡网页，放在服务器上的那个html文件
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
</body>
<script type="text/javascript">
const dataurl = '';
var url = location.search;
if (url && url.length > 1 && url.indexOf('?dataurl=') !== -1) {
url = url.replace("?dataurl=", "");
window.location.replace(url);
} else {
window.location.replace(dataurl);
}
</script>
</html>
- 创建快捷方式的展示网页
这个网页文件中的内容将被读取并进行解析，如果不想在数据解析中多写很多代码，那就不要在这个文件中写不需要的东西，例如：注释等。如果写了，那在数据解析的时候就得把不需要的东西过滤掉，否则可能会出问题
<!DOCTYPE html>
<html>
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="default">
<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" />
<!--
TransitCodeIconImageData：快捷方式在桌面的图标
TransitCodeAppTitle：快捷方式的名称
TransitCodeAppScheme：跳转页面对应的 scheme，比如 hellobike://hellobike.com/transitcode/home
TransitCodeLaunchImageData：引导页背景图
-->
<link rel="apple-touch-icon" href="TransitCodeIconImageData">
<title>TransitCodeAppTitle</title>
</head>
<body>
<a href="TransitCodeAppScheme" id="qbt" style="display:none"></a>
<span id="msg"></span>
</body>
<script>
//通过 window.navigator.standalone 可以知道引导页是否是全屏展示，如果是全屏那么跳转到 app 对应页面，非全屏则插入具体 HTML 内容，展示引导内容。
if (window.navigator.standalone == true) {
var lnk = document.getElementById("qbt").click();
} else {
document.getElementById("msg").innerHTML='<center style="position:absolute;left:0;top:0;width: 100%;height: 100%;"> <img style="z-index:1;width:100%" src="TransitCodeLaunchImageData" /> </center>';
}
</script>
</html>
- 数据解析，在需要创建快捷方式的地方进行调用
- (void)viewDidLoad {
[super viewDidLoad];
self.view.backgroundColor = [UIColor whiteColor];
UIButton *btn = [UIButton buttonWithType:UIButtonTypeSystem];
btn.frame = CGRectMake((self.view.frame.size.width-200)/2, (self.view.frame.size.height-100)/2, 200, 100);
[btn setTitle:@"创建快捷方式" forState:UIControlStateNormal];
[btn setTitleColor:[UIColor orangeColor] forState:UIControlStateNormal];
btn.titleLabel.font = [UIFont boldSystemFontOfSize:28];
[btn addTarget:self action:@selector(action:) forControlEvents:UIControlEventTouchUpInside];
btn.backgroundColor = [UIColor purpleColor];
[self.view addSubview:btn];
}
- (void)action:(UIButton*)sender {
[self addShortcutToDesk];
}
#pragma mark - 打开服务器 HTML 页，用本地引导页替换
- (void)addShortcutToDesk {
NSString *preUrl = @"http://192.168.0.101/shortcut/index.html";
preUrl = [NSString stringWithFormat:@"%@?dataurl=", preUrl];
NSString *title = @"哈啰乘车码";
NSString *scheme = @"jyyun://HEHE";
NSString *iconUrl = @"https://m.hellobike.com/resource/app/transitcode/OZtmwCABaAMfiaE2IAC6E.png";
NSString *launchImageUrl = @"https://m.hellobike.com/resource/app/transitcode/SRJ3IqkkcZIn2MPAzVmS4.png";
NSString *urlString;
if (@available(iOS 14.0, *)) {
urlString = @"https://m.hellobike.com/resource/app/transitcode/-IaHIzGBXTYMi9crK8H4K.html";
} else {
urlString = [self oppcreateDesktopWithPreUrl:preUrl iconUrl:iconUrl launchImageUrl:launchImageUrl appTitle:title scheme:scheme];
}
UIApplication *application = [UIApplication sharedApplication];
NSURL *URL = [NSURL URLWithString:urlString];
if (@available(iOS 10.0, *)) {
[application openURL:URL options:@{}
completionHandler:^(BOOL success) {
if (success) {
NSLog(@"成功打开Safari");
}
}];
} else {
[application openURL:URL];
}
}
#pragma mark - 使用 Data URI Scheme 技术将引导页转为一个字符串
- (NSString *)oppcreateDesktopWithPreUrl:(NSString *)preUrl iconUrl:(NSString *)iconUrl launchImageUrl:(NSString *)launchImageUrl appTitle:(NSString *)title scheme:(NSString *)scheme {
if ([preUrl length] == 0) {
return nil;
}
NSString *contentHtmlString = [self contentHtmlWithIconImageString:iconUrl launchImageString:launchImageUrl title:title appScheme:scheme];
contentHtmlString = [Base64 base64StringFromText:contentHtmlString];
NSString *DataURIString = [NSString stringWithFormat:@"data:text/html;charset=utf-8;base64,%@",contentHtmlString];
NSString *urlString = [NSString stringWithFormat:@"%@%@", preUrl, DataURIString];
return urlString;
}
-(NSString *)contentHtmlWithIconImageString:(NSString *)iconImageString launchImageString:(NSString *)launchImageString title:(NSString *)title appScheme:(NSString *)scheme{
NSString *contentHtmlPath = [self getcontentHTMLTempletPath];
NSString *contentHtmlString = [NSString stringWithContentsOfFile:contentHtmlPath encoding:NSUTF8StringEncoding error:nil];
///替换字符串
contentHtmlString = [contentHtmlString stringByReplacingOccurrencesOfString:@"TransitCodeIconImageData" withString:iconImageString];
contentHtmlString = [contentHtmlString stringByReplacingOccurrencesOfString:@"TransitCodeLaunchImageData" withString:launchImageString];
contentHtmlString = [contentHtmlString stringByReplacingOccurrencesOfString:@"TransitCodeAppTitle" withString:title];
contentHtmlString = [contentHtmlString stringByReplacingOccurrencesOfString:@"TransitCodeAppScheme" withString:scheme];
return contentHtmlString;
}
- (NSString *)getcontentHTMLTempletPath{
NSString *path = [[[NSBundle mainBundle]resourcePath] stringByAppendingPathComponent:@"/content.html"];
return path;
}
- 操作原理
这种方式是在用户点击“放到桌面”按钮时打开一个过渡网页，url后面跟一个参数dataurl，参数的值就是快捷方式的data url字符串，在过渡网页中会截取到这个字符串，并替换当前页面，当然如果使用文章开头说的第二种方式，那么就不需要这个参数了，因为这个参数会在过渡页面使用JavaScript生成。
在开始优化的时候，我就认为这个页面有两个图片，一个是桌面图标，一个是页面图片。所以我在数据解析的时候，将两个图片全部进行base64编码，放到url中传到过渡页面，结果，页面提示url太长。
