開(kāi)發(fā)一個(gè)html頁(yè)面供手機(jī)客戶端使用功能包含：
- 顯示系統(tǒng)版本,app的Icon
- 點(diǎn)擊更新可以跳轉(zhuǎn)更新鏈接
效果圖：
update.png
Part I ：HTML代碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>手機(jī)網(wǎng)站更新頁(yè)面</title>
<!-- 寬度等于屏幕，初始化縮放比例，手動(dòng)縮放 -->
<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約定的協(xié)議#>"">立即更新</a>
<hr class="line"/>
</div>
<dl>
<dt>更新說(shuō)明</dt>
<!-- <dd>1、優(yōu)化推流設(shè)置</dd>-->
<!-- <dd>2、優(yōu)化推流設(shè)置</dd>-->
/*appInsertUpdateInfo*/
</dl>
</body>
</html>
HTML 網(wǎng)頁(yè)結(jié)構(gòu)
- HTML 網(wǎng)頁(yè)結(jié)構(gòu), 由
<head>+<body>組成 可以在<head>加入 :<title>, <style>, <meta>, <link>, <script>, <noscript>, <base>標(biāo)簽 ,具體使用可以參考
html網(wǎng)頁(yè)結(jié)構(gòu)
代碼標(biāo)簽分析
viewport ：指定頁(yè)面的寬度和設(shè)備一樣
<span>：指定同一行文字單獨(dú)樣式
<meta charset="utf-8"> ：指定文本的字符集
<title>手機(jī)網(wǎng)站更新頁(yè)面</title>：網(wǎng)頁(yè)的標(biāo)題
<style>：對(duì)body中元素樣式的描述
p {margin:0;}：設(shè)置<p>的高度
<img>：圖片的引用
<a>：a 標(biāo)簽 href 響應(yīng)的url
css創(chuàng)建與使用
插入樣式表的方法有三種
-
外部樣式表：
在
<head>中引入<link rel="stylesheet" type="text/css" href="mystyle.css"> -
內(nèi)部樣式表
像以上例子：使用
<style>標(biāo)簽在文檔頭部定義內(nèi)部樣式表 -
內(nèi)聯(lián)樣式
<p style="color:yellow">hello</p>
使用
css的語(yǔ)法：選擇器，以及一條或多條聲明
引用runoob.png
選擇器：id 和 class
id：#para1{ text-align:center;color:red; }
class：p.center {text-align:center;}
Part II ：iOS代碼
工程引入html文件
加入html需要的圖片
logo.jpghtml文件和圖片要在同一個(gè)目錄下面加載html頁(yè)面：
-(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標(biāo)簽
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
NSString *url = [[request URL] absoluteString];
NSLog(@" 準(zhǔn)備跳轉(zhuǎn)至 = %@", url);
if ([url rangeOfString:<#app約定的協(xié)議#>].location != NSNotFound) {
//響應(yīng) A 標(biāo)簽的事件
return NO;
}
return YES;
}
注意：
- baseURL要知指向圖片的目錄，不然加載不出圖片
- /appInsertAppSize/、/appInsertVersion/、/appInsertUpdateInfo/ 要替換的文本
-
margin-top與top有區(qū)別 .前者是相對(duì)位置，后者是絕對(duì)位置。CSS位置參考
