（本篇幅主要讲解Weex 中iOS native与js交互实现）
大纲：
- weex 总框架预览
- iOS NativeBridge总设计原理
一、weex 总框架预览
在写NativeBridge 总设计之前必须先了解下Weex总体部署图，这张图来自于网上，如下：
图1.0 weex 总设计图
从上图可以看出weex总体流程如下：
Service：
- 开发人员，开发weex 文件（如：helloweex.we）。
- 通过transformer引擎将weex文件大包成相应的js文件。
Client：
- 在应用启动时，初始化JS-Native Bridge，包含：组件的加载、模块的加载、已经main.js的加载； 那么本地js就有了js-native通讯的能力了。
- 请求指定的js URL文件：如：http://xxxx/helloWeex.js;
- js-Native 引擎运行解析 js文件。
- iOS RenderEngine 将js代码，通过转换成原生组件来渲染。
这里就先简单的提下总体布局。下面的话题才是主题： iOS 是怎样实现 js 与 native交互的。 最后还是不忘weex本身的设计口号：Write once,run every wherer!
二、iOS NativeBridge总设计原理
2.0、要讲原理之前我们需要提出几个问题：
- 如何初始化bridge 引擎？
- 客户端是如何调用weex文件的？
- 什么是组件，什么又是模块插件，为何要区分？
- 如何实现自定义模块插件？
- js和native通讯原理是什么，js和native是如何传参，又是如何实现回调功能呢？
接下来我们一一回答上面问题：
2.1、iOS 初始化weex 工程
在我们工程已经集成weex的情况下，只要在应用启动时，初始以下代码即可：（当然前提是我们工程已经pod 'WeexSDK', '~> 0.11.0'）
- (void)initWeex {
static dispatch_once_t onceToken;
dispatch_once(&onceToken, ^{
[WXAppConfiguration setAppGroup:@"xxxApp"];
[WXAppConfiguration setAppName:@"WeexDemo"];
[WXAppConfiguration setAppVersion:@"1.0.0"];
[WXLog setLogLevel:<<];
[WXSDKEngine initSDKEnvironment];
});
}
对，iOS集成就是那么方便、简单、粗暴！
2.2、客户端是如何调用weex文件的？
其实从上面图1.0中可以很容易发现，其实客户端调用的是weex 转换为js后的js文件（这个文件其实可以是远程，当然也可以是本地的）；
利用WXSDKInstance类，进行对象管理，如下：
@interface KBWeexShowcaseViewController ()
@property (nonatomic, strong) WXSDKInstance *weexSDK; @end @implementation KBWeexShowcaseViewController - (void)viewDidLoad {
[super viewDidLoad];
// Do any additional setup after loading the view.
self.view.backgroundColor = [UIColor whiteColor];
self.title = @"我是第一个URL"; self.weexSDK.viewController = self;
self.weexSDK.frame = self.view.frame; [self.weexSDK renderWithURL:self.weexUri]; __weak typeof(self) weakSelf = self;
self.weexSDK.onCreate = ^(UIView *view) {
[weakSelf.view addSubview:view];
}; self.weexSDK.renderFinish = ^(UIView *view) {
view.backgroundColor = [UIColor yellowColor];
NSLog(@"view:%@",view);
}; self.weexSDK.onFailed = ^(NSError *error) {
NSLog(@"weexSDK onFailed : %@\n", error);
}; }
......
2.3、什么是组件，什么又是模块插件，为何要区分？
作为iOS开发，估计对组件是很熟悉的吧：如UIButton、UILabel、UITableView等；所以理解weex的组件是同一个意思：组件主要是用来渲染UI层用的；
而模块一般指具有独立功能的代码块，如：动画、存储、导航、分享，图片下载等；
它之所以这么设计其实是为了解决实现 iOS 原生渲染的问题：即js代码渲染转化为原生组件来布局；
当然在这里我提出一些疑问 ：是全部原生化了吗？若全是原生化的话，那么事件是如何处理的？需要在运行时为类添加事件吗？又是如何添加的？等等。
很多问题还要我现在无法回答，接下来几天当中我会慢慢去看下 iOS RenderEngine；
2.4、如何实现自定义模块插件？
实现自定义模块其实很简单：
2.4.1、任意类实现WXModuleProtocol 接口即刻，如下：
#import <WeexSDK/WeexSDK.h>
@interface WXEventModule : NSObject<WXModuleProtocol> @end
2.4.2、暴露需要开放给JS的接口，通过WX_EXPORT_METHOD 宏暴露给js ，如下：
WX_EXPORT_METHOD(@selector(openURL:callback:))
WX_EXPORT_METHOD(@selector(getString)) - (void)openURL:(NSString *)url callback:(WXModuleCallback)callback
{
NSString *newURL = url;
if ([url hasPrefix:@"//"]) {
newURL = [NSString stringWithFormat:@"http:%@", url];
} else if (![url hasPrefix:@"http"]) {
newURL = [NSURL URLWithString:url relativeToURL:weexInstance.scriptURL].absoluteString;
}
UIViewController *controller = [[ViewController alloc] init];
((ViewController *)controller).url = [NSURL URLWithString:newURL];
[[weexInstance.viewController navigationController] pushViewController:controller animated:YES];
callback(@{@"result":@"success"});
} - (NSString *)getString
{
return @"Kingbo Test String";
}
宏WX_EXPORT_METHOD：其实定义了一个函数，如上：其实定义了类似-(void) openURL##148 的函数，其返回值为"openURL:callback:";
其中第一个冒号前的名字作为js调用的方法名，原因很简单：安卓和js函数没有冒号；
2.4.3、注册模块
我们一般会将它和weex 初始化放在一起，如下：
-(void)initWeex {
--- xxxx ----
[WXSDKEngine initSDKEnvironment];
[WXLog setLogLevel:ULONG_MAX];
//注册自己模块
[self registMyModule];
}
-(void)registMyModule {
[WXSDKEngine registerModule:@"event" withClass:NSClassFromString(@"WXEventModule")];
}
好了，到这里自定义就那么完成了，至于js怎么调用，嘻嘻，以后再说。。。。
2.5、 js 和 native通讯原理
其实最后一个问题就是以上的综合链接问题：如何将初始化、js实例化以及本地组件建立连接；
下面UML 类关系图我自己整理了好久：（原图）
图2.1 Weex UML类图
从图2.1 不难发现 js 与 native 交互最终本质还是逃不过：JSValue 、JSContext 以及NSInvocation 类的调用；上图调用步骤已经大体还算清楚，暂时先不写了，以后有时间慢慢补全。