Hybrid App （一）

Hybrid App （一）

今天开始学习Hybrid App，知识有限，有不对的地方欢迎指正，主要是对自己学习的一个总结吧。App按开发模式主要分为三种:

• Native App:使用Apple为我们提供的XCode及Cocoa框架
• Web App:主要用html组成的app，采用html，css和js组成。

• Hybrid App:结合了Native App及Web App的优点，即一部分是Cocoa框架的东西，一部分是html的东西

  Native App当然牛X，各种炫酷的东西它都能做出来，硬件性能也能发挥到最好。 但开发周期长，更新换代慢也是个硬伤
  Web App：开发很快，也能调用手机硬件的东西，比如摄相头，打电话什么的。但性能上稍微次一点（很多公司找的IOS做原生App开发，同样把页面做得很卡啊，有的还不如用Web App呢）。
  Hybrid App:结合了上面两者的长处，规避了两者的短处。它把基本不变的东西（调用硬件的东西）用原生的，把需要修改的部分（展示的部分）做成Html的。这样开发速度上来了，还不用去App Store更新。还能把硬件性能发挥出来。
  

上面是我对这三种模式的拙见。
下面我就汇报下我学习的成果，在今天学习之前，我更了一个题纲，主要完成下面这几项：
- 使用本地html显示在webView里
- 在app里调用服务端的html文件
- 在app里调用html中js函数
- 在app里响应html事件

项目搭建

创建一个Single View Applicaition类型的项目，在storyboard里将一个UIWebView全屏拖放到ViewController上。

使用本地html显示在webView里

创建一个empty的文件,命名为index.html,向该index.html里放几个网页元素（能看到效果就行），在ViewController的viewDidLoad里写：
``` swift
let sResurce = Bundle.main.path(forResource: "index.html", ofType: nil)!
webView.loadRequest(URLRequest(url: URL(fileURLWithPath: sResurce)))

运行起来，OK，目标达成(虽然这项很简单，但复习一下也算不错)

### 在app里调用服务端的html文件
    在这之前，我自己搭建了一个tomcat的服务器，获取到html的路径后，在ViewController的viewDidLoad里写:
    ``` swift
    let url = URL(string: "http://localhost:8085/HybirdServerDemo/index.html")!
    webView.loadRequest(URLRequest(url: url))

运行起来，OK，目标达成（同样很简单，和上面的两种方式一起试试，下面的功能基于此实例）

在app里调用html中js函数

上面的实例，实现UIWebView的代理，并在webViewDidFinishLoad代理方法里，运行如下代码：
``` swift
let x = webView.stringByEvaluatingJavaScript(from: "backToNative(25)")
print(x ?? "abc")

上面的方法会去html中调用js函数backToNative，并向该函数传递值为25。相应的JS函数如下：
    ``` swift
    function backToNative(argv){
        var text = document.getElementById('123')
        text.setAttribute("value",argv)  
        return "xxxx"
    }

上面的text是个文本输入框，项目启动以后，当html加载完成以后，js函数会被调用，从app里传出的值25会显示在输入框中

在app里响应html事件

如上图所示，当我点击html上的按钮”点击我有福利”时，我希望本地app能进行处理。
1.在按钮”点击我有福利”调用了如下的js函数
“` swift
function onClickMe(){
window.location.href = ‘xx://clickMe’
}

在UIWebView的shouldStartLoadWith代理方法里，运行如下代码：
    ``` swift
        let url = request.url!.absoluteString
        let mm = url.components(separatedBy: "xx://")
        for ss in mm.dropFirst() {
            let sel = NSSelectorFromString(ss)
            self.perform(sel)
        }
        return true

如上，当然需要在ViewController里实现方法clickMe:

    func clickMe() -> Void {
       print("Click me btn clicked")
    }

项目运行后，点击按钮，控制台正确输出。

很简单的例子，希望对初学者有些帮助!