开发一个html页面供手机客户端使用功能包含：
- 显示系统版本,app的Icon
- 点击更新可以跳转更新链接
效果图：
update.png
Part I ：HTML代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手机网站更新页面</title>
<!-- 宽度等于屏幕，初始化缩放比例，手动缩放 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<style>
p {
margin:0;
color:rgb(170,170,170);font-size:12px;
}
span {
color:rgb(51,51,51);
}
img.iconImage {
position: relative;
margin-top: 40px;
width: 160px;
height: 80px;
}
p.info1 {
position: relative;
margin-top: 12px;
}
p.info2 {
position: relative;
margin-top: 8px;
}
a.upadteBtn {
position:relative;
margin-top: 10px;
width: 180px;
text-align: center;
line-height: 40px;
background: white;
color:rgb(255,170,0);
border: 1px rgb(255,170,0) solid;
border-radius: 4px;
display: inline-block;
text-decoration: none;
font-size: 17px;
outline: none;
}
hr.line {
height:1px;
border:none;border-top:1px solid rgb(238,238,238);
position: relative;
margin-top:20px;
margin-right: 12px
margin-left: 12px;
}
dt {
color:rgb(51,51,51);font-size:20px;
position: relative;
margin-bottom: 16px;
margin-left: 12px;
}
dd {
color:rgb(119,119,119);font-size:14px;
position: relative;
margin-bottom: 16px;
margin-left: 12px;
}
</style>
</head>
<body>
<!-- 分别替换 appInsertAppSize、appInsertVersion appInsertUpdateInfo(注意<dd></dd>格式)-->
<div id="head" style="text-align:center;">
<p class="info1">安装包大小：<span>/*appInsertAppSize*/</span></p>
<p class="info2">最 新 版本：<span>/*appInsertVersion*/</span></p>
<a class="upadteBtn" href="<#app约定的协议#>"">立即更新</a>
<hr class="line"/>
</div>
<dl>
<dt>更新说明</dt>
<!-- <dd>1、优化推流设置</dd>-->
<!-- <dd>2、优化推流设置</dd>-->
/*appInsertUpdateInfo*/
</dl>
</body>
</html>
HTML 网页结构
- HTML 网页结构, 由
<head>+<body>组成 可以在<head>加入 :<title>, <style>, <meta>, <link>, <script>, <noscript>, <base>标签 ,具体使用可以参考
html网页结构
代码标签分析
viewport ：指定页面的宽度和设备一样
<span>：指定同一行文字单独样式
<meta charset="utf-8"> ：指定文本的字符集
<title>手机网站更新页面</title>：网页的标题
<style>：对body中元素样式的描述
p {margin:0;}：设置<p>的高度
<img>：图片的引用
<a>：a 标签 href 响应的url
css创建与使用
插入样式表的方法有三种
-
外部样式表：
在
<head>中引入<link rel="stylesheet" type="text/css" href="mystyle.css"> -
内部样式表
像以上例子：使用
<style>标签在文档头部定义内部样式表 -
内联样式
<p style="color:yellow">hello</p>
使用
css的语法：选择器，以及一条或多条声明
引用runoob.png
选择器：id 和 class
id：#para1{ text-align:center;color:red; }
class：p.center {text-align:center;}
Part II ：iOS代码
-
工程引入html文件
-
加入html需要的图片
logo.jpghtml文件和图片要在同一个目录下面 -
加载html页面：
-(void)loadHTMLFile{
NSURL *baseURL = [NSURL fileURLWithPath:[[NSBundle mainBundle] bundlePath]];
NSString * htmlPath = [[NSBundle mainBundle] pathForResource:<#your HTML #>
ofType:@"html"];
NSString * htmlContent = [NSString stringWithContentsOfFile:htmlPath
encoding:NSUTF8StringEncoding
error:nil];
htmlContent = [htmlContent stringByReplacingOccurrencesOfString:@"/*appInsertAppSize*/" withString:self.appSize];
htmlContent = [htmlContent stringByReplacingOccurrencesOfString:@"/*appInsertVersion*/" withString:self.appVersion];
htmlContent = [htmlContent stringByReplacingOccurrencesOfString:@"/*appInsertUpdateInfo*/" withString:self.appUpdateInfo];
[self.updateWebview stringByEvaluatingJavaScriptFromString: @"document.documentElement.style.webkitUserSelect='none';"];
[self.updateWebview loadHTMLString:htmlContent baseURL:baseURL];
}
.4. 截获html的A标签
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSString *url = [[request URL] absoluteString];
NSLog(@" 准备跳转至 = %@", url);
if ([url rangeOfString:<#app约定的协议#>].location != NSNotFound) {
//响应 A 标签的事件
return NO;
}
return YES;
}
注意：
- baseURL要知指向图片的目录，不然加载不出图片
- /appInsertAppSize/、/appInsertVersion/、/appInsertUpdateInfo/ 要替换的文本
-
margin-top与top有区别 .前者是相对位置，后者是绝对位置。CSS位置参考
网友评论