HTML更新页面---app本地加载

2019年5月13日 135次阅读

开发一个html页面供手机客户端使用功能包含：

  1. 显示系统版本,app的Icon
  2. 点击更新可以跳转更新链接

效果图：

《HTML更新页面---app本地加载》 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;">  

        ![](logo.jpg)

        <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 网页结构

  1. HTML 网页结构, 由 <head> +<body>组成 可以在<head>加入 : <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>标签 ,具体使用可以参考

《HTML更新页面---app本地加载》 html网页结构

代码标签分析

viewport ：指定页面的宽度和设备一样
<span>：指定同一行文字单独样式
<meta charset="utf-8"> ：指定文本的字符集
<title>手机网站更新页面</title>：网页的标题
<style>：对body中元素样式的描述
p {margin:0;}：设置<p>的高度
<img>：图片的引用
<a>：a 标签 href 响应的url

css创建与使用

插入样式表的方法有三种

  1. 外部样式表：

    在<head>中引入<link rel="stylesheet" type="text/css" href="mystyle.css">

  2. 内部样式表

    像以上例子：使用 <style> 标签在文档头部定义内部样式表

  3. 内联样式

    <p style="color:yellow">hello</p>

使用

css的语法：选择器，以及一条或多条声明

《HTML更新页面---app本地加载》 引用runoob.png

选择器：id 和 class

id：#para1{ text-align:center;color:red; }
class：p.center {text-align:center;}

Part II ：iOS代码

  1. 工程引入html文件

  2. 加入html需要的图片logo.jpg html文件和图片要在同一个目录下面

  3. 加载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;
}

注意：

  1. baseURL要知指向图片的目录，不然加载不出图片
  2. /appInsertAppSize/、/appInsertVersion/、/appInsertUpdateInfo/ 要替换的文本
  3. margin-top 与 top 有区别 .前者是相对位置，后者是绝对位置。CSS位置参考
点赞