美文网首页对JScript一点不懂iOS Developer程序员
iOS-HTML交互学习笔记(三)-拼接标题和图片放入webVi

iOS-HTML交互学习笔记(三)-拼接标题和图片放入webVi

作者: PlusNie | 来源:发表于2016-07-19 16:38 被阅读1040次

在添加完body信息后,现在我们把标题和图片放入webView,

override func viewDidLoad() {
    super.viewDidLoad()
    
    // http://c.m.163.com/nc/article/BSB33M1000234KO7/full.html
    // 1.设置url
    let url = NSURL(string: "http://c.m.163.com/nc/article/BSB33M1000234KO7/full.html");
    // 2.设置请求
    let request = NSURLRequest(URL: url!);
    
    // 3.开启异步请求操作
    let dataTask = NSURLSession.sharedSession().dataTaskWithRequest(request) { (data, response, error) in
        if (error == nil){
            // 转为json数据,try? 解决throws异常, as!强制转换
            let jsonData = try? NSJSONSerialization.JSONObjectWithData(data!, options: NSJSONReadingOptions.AllowFragments) as! NSDictionary;
            self.dealNewsDetail(jsonData!);
        }
    }
    // 4.开启请求
    dataTask.resume();
   
}

 // 处理拿到的数据并显示
func dealNewsDetail(jsonData: NSDictionary) -> Void {
    // 1.取出所有内容
    let allData = jsonData["BSB33M1000234KO7"];
    
    // 2.取出body中的内容
    var bodyHtml = allData!["body"] as! String;
    
    // 3.取出标题
    let title = allData!["title"] as! String;
    
    // 4.取出发布时间
    let ptime = allData!["ptime"] as! String;
    
    // 5.取出来源
    let source = allData!["source"] as! String;
    
    // 6.取出所有图片对象
    let img = allData!["img"] as! [[String: AnyObject]];
    
    // 7.遍历
    for i in 0..<img.count {
        // 7.1取出单独的图片对象
        let imgItem = img[i];
        
        // 7.2取出站位标签
        let ref = imgItem["ref"] as! String;
        
        // 7.3取出图片标题
        let imgTitle = imgItem["alt"] as! String;
        
        // 7.4取出src
        let src = imgItem["src"] as! String;
        let imgHtml = "<div><img src=\"\(src)\"><div>\(imgTitle)</div></div>"
        
        // 7.5替换body中的图片占位符
        bodyHtml = bodyHtml.stringByReplacingOccurrencesOfString(ref, withString: imgHtml)
    }
    
    // 创建标题HTML标签
    let titleHtml = "<div>\(title)</div>";
    
    // 创建子标题html标签
    let subTitleHtml = "<div><span>\(ptime)</span><span>\(source)</span></div>"
    
    
    // 拼接HTML
    let html = "<html><head></head><body>\(titleHtml)\(subTitleHtml)\(bodyHtml)</body></html>"
    
    // 把对应的内容显示daowebView中
    webview.loadHTMLString(html, baseURL: nil);
    
}

运行模拟器,观察效果,图片和标题都已经加入,但是图片适配有些问题,请看下一章:iOS-HTML交互学习笔记(四)-添加全局的CSS样式

运行效果.png

相关文章

网友评论

    本文标题:iOS-HTML交互学习笔记(三)-拼接标题和图片放入webVi

    本文链接:https://www.haomeiwen.com/subject/fbapjttx.html