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

你可能感兴趣的:(iOS混合开发-Native&H5模式)