Weex 解析（二）—— NativeBridge

  （本篇幅主要讲解Weex 中iOS native与js交互实现）

大纲：

• weex 总框架预览
• iOS NativeBridge总设计原理

 一、weex 总框架预览

   在写NativeBridge 总设计之前必须先了解下Weex总体部署图，这张图来自于网上，如下：

　　　　　　　　　　　　　　　　　　　　　　图1.0  weex 总设计图 

 　   从上图可以看出weex总体流程如下：

   Service：

1. 开发人员，开发weex 文件（如：helloweex.we）。
2. 通过transformer引擎将weex文件大包成相应的js文件。

　Client：

1. 在应用启动时，初始化JS-Native Bridge，包含：组件的加载、模块的加载、已经main.js的加载；  那么本地js就有了js-native通讯的能力了。
2. 请求指定的js URL文件：如：http://xxxx/helloWeex.js;
3. js-Native 引擎运行解析 js文件。
4. 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:1<<0];
        [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 : %@
", 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 类的调用；上图调用步骤已经大体还算清楚，暂时先不写了，以后有时间慢慢补全。