iOS混合开发-Native&H5模式

Hybrid目前开发现状

  目前主要有以下几种方式的混合开发：

• Native&H5：
    这种模式就是在原生页面加入H5的页面，将项目中重复使用又比较耗时的部分用H5页面实现，在iOS、Android和H5以及微信公众号都可以使用。
    优点：方便快捷，入侵性小，几乎不改变原生APP的框架使用成本较低，容易上手。
    缺点：效果不如原生流畅，体验比较差；如果遇到多级的H5页面在Native加载，那么实现的效果往往不如预期。
    Native和H5职责划分：总的原则是H5提供内容，Native提供容器。
    使用Native的场景——转场动画、多线程操作（密集型任务）、IO的调用，当然一些安全性比较高的界面，比如：注册、登录界面、支付界面。当然，有些要考虑到终端性能的问题，有些动画H5虽然能够实现，但是在低端机器上效果很差，这个时候就要考虑用原生实现了。
    使用H5的场景——基本信息的展示，简单图表的展示。一句话总结：H5负责需要快速迭代又不使用系统IO交互内容的展示。
• React Native
    RN 是什么：就是使用 JS 和 React 来构建原生 APP。而 RN 并不能算作是 Hybrid，它是通过 JS 来直接调用原生组件达到高性能的一种解决方案。
    RN 的优点：组件化、虚拟DOM、开发效率高，性能无限接近原生APP，当然还包括死掉的 HotFix（手动捂脸）。
    RN 的缺点：三方 SDK 开放的 RN 比较少 ，需要自己桥接。如果想要开发高性能的应用，必须了解 Native 开发。
• Cordova
    Cordova 是一个开源的移动开发框架。允许你使用标准的 web 技术HTML5、CSS3 和 JavaScript 做跨平台开发。应用在每个平台的具体执行被封装了起来，并依靠复合标准的 API 绑定去访问每个设备的功能，比如说：传感器、数据、网络状态等。
    Cordova 优点：降低开发成本，一次开发多平台套用，版本更新可动态更新。
    Cordova 缺点：Cordova的原理就是在原生 APP 上加了一个 WebView，并提供一套 JS 与原生代码交互的类库。交互效果一般，并且访问原生控件时受限。
• Weex
    Weex 是一套简单易用的跨平台开发方案，能以 web 的开发体验构建高性能、可扩展的 Native 应用。Weex 使用 Vue 作为上层框架，并遵循 W3C 标准实现了统一的 JSEngine 和 DOM API。
    Weex 优点：轻量级，简单的 DSL 语言易于上手；扩展性好，可以对网络、图片、存储、UT、组件、接口等根据自身 APP 和业务需求进行扩展；组件化，Weex 本身编写的界面就天然的支持组件化，同事支持大部分组件；开发成本较低。
    Weex 的缺点：Bug 很多，作为新推出的解决方案，Weex 还有很多需要改进；社区的规模较小，知名度也相对较低。

Native&H5使用实例

• WKWebViewJavascriptBridge 关联 WKWebView
    我们使用了 WKWebViewJavascriptBridge 这个优秀的第三方库来桥接 WKWebView 和 H5。

lazy var webView: WKWebView = {
    let temp = WKWebView()
    temp.isOpaque = false
    temp.uiDelegate = self
    temp.navigationDelegate = self
    temp.addObserver(self, forKeyPath: "estimatedProgress", options: NSKeyValueObservingOptions.new, context: nil)
    return temp
}()

lazy var webViewBridge: WKWebViewJavascriptBridge = {
    let temp = WKWebViewJavascriptBridge.init(for: webView)
    
    temp?.setWebViewDelegate(self)
    return temp!
}()

• registerHandler
    我们通过 webViewBridge 注册 handle 绑定相应的事件，这样 H5 可以通过这个事件告诉 APP 进行相应的操作和传递数据。以此实现 H5 与 APP 的交互。

//注册一个如果Token过期，H5通过注册的事件告诉Native
func registTokenHandle() {
    webViewBridge.registerHandler("tokenDisabled") { (data, responseCallBack) in

    //这里是登录失效的代码
        
    }
}

• WKWebView-UserAgent设置
    要区分打开的 H5 是本地 APP 还是在手机的浏览器，就要修改默认的 UserAgent

func setupUserAgent() {
    let webView = UIWebView()
    if var newUserAgent = webView.stringByEvaluatingJavaScript(from: "navigator.userAgent"){
        newUserAgent.append(" XXX-iOS")
        let dic = ["UserAgent": newUserAgent]
        UserDefaults.standard.register(defaults: dic)
    }
}

• 进度条和title
    通过 WKWebView可以很方便的使用 addObserver 来 设置进度条和 捕获 H5 的title给 Native 的页面。
    进度条：

//1 设置 observer
temp.addObserver(self, forKeyPath: "estimatedProgress", options: NSKeyValueObservingOptions.new, context: nil)
//2 设置代理
class YourWebViewController: WKUIDelegate,WKNavigationDelegate{}
//3 实现代理方法
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
    if keyPath == "estimatedProgress",
        (object as? WKWebView) == webView{
        let progress = Float(self.webView.estimatedProgress)
        progressView.setProgress(progress, animated: true)
        if progress >= 1.0 {
            UIView.animate(withDuration: 0.3, delay: 0.1, options: .curveEaseOut, animations: {
                self.progressView.alpha = 0
            }, completion: { (finish) in
                self.progressView.setProgress(0.0, animated: false)
            })
        }else{
            self.progressView.alpha = 1
        }
    }
}
//4 记得 removeObserver
deinit {
    self.webView.removeObserver(self, forKeyPath: "estimatedProgress")
}

  捕获H5 的 Title：

//1 设置 observer
wkWebView.addObserver(self, forKeyPath: "title", options: NSKeyValueObservingOptions.new, context: nil)
//2 设置代理
class YourWebViewController: WKUIDelegate,WKNavigationDelegate{}
//3 实现代理方法
override func observeValue(forKeyPath keyPath: String?, of object: Any?, change: [NSKeyValueChangeKey : Any]?, context: UnsafeMutableRawPointer?) {
    if keyPath == "title",(object as? WKWebView) == webView{
        webViewTitle = self.webView.title
    }else{
        super.observeValue(forKeyPath: keyPath, of: object, change: change, context: context)
    }
}
//4 记得 removeObserver
deinit {
    self.webView.removeObserver(self, forKeyPath: "estimatedProgress")
}

• 代码重构
    一两个 WebView 的页面可以随意些，但是如果项目中很多页面都通过 H5 实现，那么我们就要统一规范配置需要跳转的 URL。

class YourJSBridge: NSObject {
    
    static let baseUrl = YourAppManager.baseH5URL
    
    var baseUrl: String{
        return YourJSBridge.baseUrl
    }
    
    struct Event {
        static let successButtonClick = "successButtonClick"
    }
    
    struct Path {
        static let yourUrlPath = "yourUrlPath"
    }
    
    struct Url {
        static func successMethod(parame successStr: String) -> String{
            return baseUrl.your_appendingPathComponent(Path.yourUrlPath).token.parameter(key: "successStr", value: successStr)
        }
    }
}

fileprivate extension String{
    var token: String{
        let token = YourManager.shared.token?.token ?? "---"
        return self+"?token=\(token)"
    }
    
    func parameter(key: String,value: Any) -> String{
        return self+"&\(key)=\(value)"
    }
    
    func your_appendingPathComponent(_ path: String) -> String{
        return self+"/"+path
    }
}

参考链接：

Hybrid APP架构设计思路
iOS原生混合RN开发最佳实践
weex&ReactNative对比
RN 系列之--什么是 ReactNative
Weex在达人店的一年实践
浅谈一款移动端开发框架Weex