Hybrid 框架介绍

Hybrid 交互设计

Native调用前端页面的JS方法，或者前端页面通过JS调用Native提供的接口，两者交互的桥梁皆Webview：

① NativeUI组件，header组件、消息类组件

② 通讯录、系统、设备信息读取接口

③ H5与Native的互相跳转，比如H5如何跳到一个Native页面，H5如何新开Webview做动画跳到另一个H5页面

资源访问机制

Native首先需要考虑如何访问H5资源，做到既能以file的方式访问Native内部资源，又能使用url的方式访问线上资源；需要提供前端资源增量替换机制，以摆脱APP迭代发版问题，避免用户升级APP。这里就会涉及到静态资源在APP中的存放策略，更新策略的设计，复杂的话还会涉及到服务器端的支持。

账号信息设计

账号系统是重要并且无法避免的，Native需要设计良好安全的身份验证机制，保证这块对业务开发者足够透明，打通账户信息。

Hybrid开发调试

功能设计完并不是结束，Native与前端需要商量出一套可开发调试的模型，不然很多业务开发的工作将难以继续，这个很多文章已经接受过了，本文不赘述。

至于Native还会关注的一些通讯设计、并发设计、异常处理、日志监控以及 安全模块 因为不是我涉及的领域便不予关注了（事实上是想关注不得其门），而前端要做的事情就是封装Native提供的各种能力，整体架构是这样的：

遇到的几个问题

1. shouldStartLoadWithRequest（网页即将加载）拦截url变化 

          解析出需要的参数

       function      ---> 需要触发的事件名

　　args           ---> 上面方法需传入的参数

　　callBackId   ---> 执行方法后的回调ID，会作为回传参数的一部分

　　统一处理方法：

　　handleEvent ---> 根据function判断需要触发的事件

2. 方法注入对象

func webViewDidFinishLoad(webView: UIWebView) {

self.context = webView.valueForKeyPath("documentView.webView.mainFrame.javaScriptContext") as? JSContext

self.context.setObject(unsafeBitCast(##需注入的方法##, AnyObject.self), forKeyedSubscript: ##注入方法对应名称##)

self.myWebView.stringByEvaluatingJavaScriptFromString("Hybrid.ready();")

 }

一般都在webViewDidFinishLoad中获取context并注入对象，但在didCreateJavaScriptContext方法中，拿到JSContext注入对象，能解决加载过程中注入对象

//注入对象

@protocol JSObjcDelegate <JSExport>

- (void)callCamera;

- (void)share:(NSString *)shareString;

@end

js调用oc获取数据之后，oc调用js需要在当前线程操作

// 这里通过此方法 在当前线程操作才不会造成卡死的现象 [self performSelector:@selector(callQWSJSWithArgument:) onThread:webThread withObject:@[callback, @(result), newToken, property] waitUntilDone:NO];

3. 请求回调方式

　　在之前的项目中使用JSBridge，通过给web端注入session的方式来传递用户信息，web端拿着session自己去请求信息。现采用web端下达指令让Native去请求然后将数据回传的方式

4. 页面跳转

web页面跳转，pop和push动画，侧拉返回手势

5. 加载本地资源

加载本地资源，通过NSURLProtocol拦截请求，并处理加载逻辑

1.canInitWithRequest//判断请求是否为需要拦截的请求

2. startLoading//对需求拦截的请求进行处理

// 先在DocumentDirectory中查找，如果不存在再在NSBundle.mainBundle()中查找, 因为NSBundle.mainBundle()是应用打包时就打入app中的资源，而DocumentDirectory是后来下载的资源，所以优先使用Document路径下的资源

iOS7 之后苹果推出了 JavaScriptCore 这个框架， Android 那边和 iOS 相对统一