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