新闻网页类开发html和iOS原生交互

原创 2017年07月27日 15:36:53

一:服务器返回网页需要展示的内容

//
//  ViewController.swift
//  WangYiDetailNews
//
//  Created by fe on 2017/7/24.
//  Copyright © 2017年 fe. All rights reserved.


import UIKit

class ViewController: UIViewController {
    //https://c.m.163.com/nc/article/CQ3TQBMR0529A78E/full.html
    @IBOutlet weak var webView: UIWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        let str : String = "https://c.m.163.com/nc/article/CQ3TQBMR0529A78E/full.html"
        self.webView.backgroundColor = UIColor.clear
        loadData(str: str)
    }
    
    func loadData(str:String) -> Void {
        let url : URL = URL.init(string: str)!
        
        let request : URLRequest = URLRequest.init(url: url)
        
        let con = URLSessionConfiguration.default;
        
        let urlSession : URLSession = URLSession.init(configuration: con, delegate: self, delegateQueue: OperationQueue.main)
        
        let dataTask = urlSession.dataTask(with: request) { (data:Data?, response:URLResponse?, error:Error?) in
            if error == nil{
                //let dataStr = String.init(data: data!, encoding: String.Encoding.utf8)
                //print(dataStr ?? "没有数据")
                
                let jsionData = try? JSONSerialization.jsonObject(with: data!, options: JSONSerialization.ReadingOptions.allowFragments) as! Dictionary<String, Any>
                
                self.dealNewsData(jsonData: jsionData!)
            }else{
                print(error?.localizedDescription ?? "没有错误")
            }
        }
        
        
        
        dataTask.resume()
        
    }

    //处理从网易新闻拿到的数据并显示
    func dealNewsData(jsonData:Dictionary<String, Any>) -> Void {
        //1.取出所有的数据
        let allData = jsonData["CQ3TQBMR0529A78E"] as! Dictionary<String, Any>
        

        
        //print(allData)
        
        //2.取出body中的内容
        var bodyHtml = allData["body"] as! String
        
        //3.取出标题
        let title = allData["title"] as! String
        
        //4.取出时间
        let time = allData["ptime"] as! String
        
        //5.取出来源
        let source = allData["source"] as! String
        
        //6.取出所有图片对象
        let img = allData["img"] as! [[String:Any]]
        
        //7.遍历数组中的每一个对象
        for i in 0..<img.count {
            //7.1取出单独的图片对象
            let imgItem = img[i]
            
            //7.2取出占位标签
            let ref = imgItem["ref"] as! String
            
            //7.3取出src
            let src = imgItem["src"] as! String
            
            //7.4取出图片标题
            let imgTitle = imgItem["alt"] as! String
            
            //7.5拼接图片html
            let imgHtml = "<div class=\"all-img\"><img src = \"\(src)\"><div>\(imgTitle)</div></div>"
            
            
            
            //7.6替换body中的ref
            bodyHtml = bodyHtml.replacingOccurrences(of: ref, with: imgHtml)
            
            
            
        }
        
        
        //8.编辑头部html
        let titleHtml = "<div id = \"mainTitle\">\(title)</div>"
        
        //9.创建子标题html
        let subTitle = "<div id = \"subTitle\"><span class = \"time\">\(time)</span>\(source)<span></span></div>"
        
        //10.加载css路径
        let css = Bundle.main.url(forResource: "index", withExtension: "css")
        
        //11.创建link标签
        let csshtml = "<link href = \"\(css!)\" rel = \"stylesheet\">"
        
        //12.加载js路径
        let js = Bundle.main.url(forResource: "index", withExtension: "js")
        
        
        //13.创建js标签
        let jshtml = "<script type=\"text/javascript\" src=\"\(js!)\"></script>"
        
    
        //14.拼接html
        let html = "<html><head>\(csshtml)</head><body>\(titleHtml)\(subTitle)\(bodyHtml)\(jshtml)</body></html>"
        
        //print(html)
        self.webView.loadHTMLString(html, baseURL: nil)
        
    }


}

extension ViewController : URLSessionDelegate{
    func urlSession(_ session: URLSession, didReceive challenge: URLAuthenticationChallenge, completionHandler: @escaping (URLSession.AuthChallengeDisposition, URLCredential?) -> Void) {
        
        //let host : String = challenge.protectionSpace.host
        
        //print(host)
        
        let credential : URLCredential = URLCredential.init(trust: challenge.protectionSpace.serverTrust!)
        completionHandler(URLSession.AuthChallengeDisposition.useCredential , credential)
        
        return
        
    }
    
    ///访问相册
    func visitPhotoLibrary() -> Void {
        let photoVC = UIImagePickerController()
        
        photoVC.sourceType = UIImagePickerControllerSourceType.photoLibrary
        
        self.present(photoVC, animated: true, completion: nil)
        
    }
}


extension ViewController:UIWebViewDelegate{
    func webView(_ webView: UIWebView, shouldStartLoadWith request: URLRequest, navigationType: UIWebViewNavigationType) -> Bool {
        
        //1.取出请求的字符串
        let requestString = request.url!.absoluteString as NSString
        
        //2.判断处理
        let URLHeader = "zyf:///"
        
        let range = requestString.range(of: URLHeader)
        
        let location = range.location
        
        if location != NSNotFound {
            let method = requestString.substring(from: range.length)
            
            print(method)
            
            let sel = NSSelectorFromString(method)
            
            self.perform(sel)
            
            
        }
        
        
        
    
        return true
    }
}













二:创建本地css文件,控制网页样式

body{

}

img{
    width:100%;
}

#mainTitle{
    text-align:center;
    font-size:20px;
    margin-bottom:5px;
}

#subTitle{
    color : gray;
    text-align:center;
}

.time{
    margin-right:20px;
    margin-bottom:5px;
}

.all-img{
    color:gray;
    text-align:center;
    margin:8px 0;
}

三:创建本地js文件,处理网页交互,调用移动端原生API

window.onload = function(){
    var allImg = document.getElementsByTagName("img");
    //alert(allImg.length);
    //遍历数组
    for(var i=0;i<allImg.length;i++){
        
        //取出图片对象
        var img = allImg[i];
        img.id = i;
        //监听点击
        img.onclick = function(){
            window.location.href = 'zyf:///visitPhotoLibrary';
        }
    }
    
    var img = document.createElement('img');
    img.src = 'http://pic.qiantucdn.com/58pic/16/00/52/11J58PICD3S_1024.jpg!/fw/780/watermark/url/L3dhdGVybWFyay12MS4zLnBuZw==/align/center';
    document.body.appendChild(img);
}



版权声明:本文为博主原创文章,未经博主允许不得转载。

IOS 原生与HTML交互

跟原生开发相比,H5的开发相对来一个成熟的框架和团队来讲在开发速度和开发效率上有着比原生很大的优势,至少不用等待审核。那么问题来了,H5与本地原生代码势必要有交互的,比如本地上传一些信息,H5打开本地...
  • ioschenlu
  • ioschenlu
  • 2016年07月18日 15:23
  • 6652

安卓混合开发中原生页面与web页面的交互

web页面的开发:            function updateHtml(){ document.getElementById("content").innerHTML =        ...
  • LUFANZHENG
  • LUFANZHENG
  • 2015年11月24日 10:07
  • 5217

Html5嵌入app后通过JS和ios以及android客户端交互

HTML5和交互
  • oJACKhao
  • oJACKhao
  • 2016年03月25日 18:07
  • 4866

iOS开发UIWebView与原生网页的交互

原理用UIWebView的代理方法截获原生网页的按钮点击链接,对链接判断做处理。代码1.遵循UIWebViewDelegate代理 2.设置代理self.webView.delegate = sel...
  • SurpassBlack
  • SurpassBlack
  • 2017年01月06日 17:26
  • 172

iOS原生H5交互开发

  • 2016年03月05日 19:33
  • 99KB
  • 下载

iOS 原生控件和HTML5的交互

iOS 开发中用到的网页和原生应用之间的交互
  • YunFei_iOS
  • YunFei_iOS
  • 2016年08月02日 14:13
  • 753

iOS 基于JavaScriptCore 不等webView加载完毕就交互,网页获取原生内容。 webView的高级用法之JS交互,js与oc的相互调用

一:本文解决的问题:    1.不等webView加载完毕,就能获取原生的内容,    2.举个例子: 加载一个城市生活网页,不等加载完成,h5端获取原生定位所在城市,然后根据城市名不同加载不同的城...
  • horisea
  • horisea
  • 2017年03月09日 10:58
  • 1619

iOS8中JS与原生代码交互(SWIFT实现js调用本地代码的2种方法)

  • 2014年08月18日 00:41
  • 38KB
  • 下载

(XCode6.1正式版)iOS8中JS与原生代码交互(SWIFT实现js调用本地代码的2种方法)

  • 2014年11月12日 08:12
  • 42KB
  • 下载

iOS开发-------基于WKWebView的原生与JavaScript数据交互

WKWebView是iOS8.0之后用以替代UIWebView的网页浏览器,包含在WebKit中,可以通过 @import WebKit 导入。 如果工程需要适配iOS7,那么请在iOS7中使用UI...
  • RunIntoLove
  • RunIntoLove
  • 2016年07月30日 19:01
  • 10010
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:新闻网页类开发html和iOS原生交互
举报原因:
原因补充:

(最多只允许输入30个字)