Weex iOS扩展

<img src='http:https://img.haomeiwen.com/i63643/3320436c00741196.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240' / width = '100%'>

Weex扩展说明

weex可扩展性，赋予了它强大的能力，它可以开放回调将部分事情交给原生去执行，也可以原生注册实体到weex中，用js去调用原生的方法，还可以将复杂的组件原生封装好给Weex调用，这一切让Weex和原生交互更加顺畅，生命力更加顽强。

Weex持有原生实体(Module 扩展)

一、代码在weex的JS线程中执行

WX_EXPORT_METHOD_SYNC 该宏标志的方法，原生的代码在weex的js线程中执行
1.xcode中创建NRDataModule类

//h文件
#import <Foundation/Foundation.h>
#import <WeexSDK/WXModuleProtocol.h>
@interface NRDataModule : NSObject <WXModuleProtocol>
@end
//m文件
@implementation NRDataModule
WX_EXPORT_METHOD_SYNC(@selector(getArray)) //js线程中执行
- (NSArray *)getArray
{
    return @[@"aaaaa",@"bbbbb",@"ccccc"];
}
@end

2.注册实体给Weex(一般在appDelegate)

//weexSDK提供的注册方法
+ (void)registerModule:(NSString *)name withClass:(Class)clazz;
//实际调用
[WXSDKEngine registerModule:@"data" withClass:[NRDataModule class]];

3.js调用

const dataModule = weex.requireModule('data') //获取NRDataModule实体
const returnData = dataModule.getArray()   // 返回 ['aaaaa','bbbbb','ccccc']

二、代码在原生主线程中执行

WX_EXPORT_METHOD 该宏标志的方法，在原生主线程中执行代码
1.xcode中创建NRPrintDataModule类

//h文件
#import <Foundation/Foundation.h>
#import <WeexSDK/WXModuleProtocol.h>
@interface NRPrintDataModule : NSObject <WXModuleProtocol>
@end
//m文件
@implementation NRPrintDataModule
@synthesize weexInstance;//每个moudle对象被绑定到一个指定的实例上
WX_EXPORT_METHOD(@selector(printData:)) //原生主线程中执行
-(void)printData:(NSString *)data{
    NSLog(@"%@", data);
}
@end

2.注册实体给Weex

[WXSDKEngine registerModule:@"printData" withClass:[NRPrintDataModule class]];

3.js代码

const module = weex.requireModule('printData') //获取
const returnString = module.printData('test')   // 'test'

自定义module的步骤

1.自定义的module类 必须实现 WXModuleProtocol
2.必须添加宏WX_EXPORT_METHOD, 它可以被weex识别，它的参数是 JavaScript调用 module指定方法的参数
3.添加@synthesized weexInstance，每个moudle对象被绑定到一个指定的实例上
4.Module 方法会在UI线程中被调用，所以不要做太多耗时的任务在这里，如果要在其他线程执行整个module 方法，需要实现WXModuleProtocol中- (NSThread *)targetExecuteThread的方法，这样，分发到这个module的任务会在指定的线程中运行
4.Weex 的参数可以是 String 或者Map
5.Module 支持返回值给 JavaScript中的回调，回调的类型是WXModuleCallback,回调的参数可以是String或者Map

Weex回调(handler)

类似IOS中tableView的DataSource,weex中放出回调，原生这边实现该回调
例如weexSDK中没有图片下载功能,我们必须在原生代码中实现

WXImgLoaderProtocol

WXImageLoaderProtocol.h
@protocol WXImgLoaderProtocol <WXModuleProtocol>

-(id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)options completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock;
@end

1.实现上述协议

@implementation WXImgLoaderDefaultImpl
#pragma mark -
#pragma mark WXImgLoaderProtocol
//使用SDWebImage 第三方组件下载
- (id<WXImageOperationProtocol>)downloadImageWithURL:(NSString *)url imageFrame:(CGRect)imageFrame userInfo:(NSDictionary *)userInfo completed:(void(^)(UIImage *image,  NSError *error, BOOL finished))completedBlock
{
    if ([url hasPrefix:@"//"]) {
        url = [@"http:" stringByAppendingString:url];
    }
    return (id<WXImageOperationProtocol>)[[SDWebImageManager sharedManager] downloadImageWithURL:[NSURL URLWithString:url] options:0 progress:^(NSInteger receivedSize, NSInteger expectedSize) {     
    } completed:^(UIImage *image, NSError *error, SDImageCacheType cacheType, BOOL finished, NSURL *imageURL) {
    if (completedBlock) {
        completedBlock(image, error, finished);
    }
    }];
}
@end

2.通过WXSDKEngine 中的 registerHandler:withProtocol注册handler

+ (void)registerHandler:(id)handler withProtocol:(Protocol *)protocol;
[WXSDKEngine registerHandler:[WXImgLoaderDefaultImpl new] withProtocol:@protocol(WXImgLoaderProtocol)]

Components 扩展

weex中虽然已经存在很多原生的组件，但是components扩展可以实现iOS和Android中已封装好的、复杂的组件应用到weex里面，可以预见会有更多移动端的组件被封装一层适用到weex里面
1.xcode中创建WXPopView类

#import "WXPopView.h"

@interface  WXPopView()
@property (nonatomic, strong) UIView *backgroundView;

@end

@implementation WXPopView

- (instancetype)initWithRef:(NSString *)ref type:(NSString *)type styles:(NSDictionary *)styles attributes:(NSDictionary *)attributes events:(NSArray *)events weexInstance:(WXSDKInstance *)weexInstance
{
    self = [super initWithRef:ref type:type styles:styles attributes:attributes events:events weexInstance:weexInstance];
    if (self) {
        
    }
    return self;
}

- (void)viewDidLoad
{
    _backgroundView.backgroundColor = [UIColor redColor];
}

- (UIView *)loadView {
    _backgroundView = [[UIView alloc] init];
    return _backgroundView;
}
@end

2.注册组件给Weex

[WXSDKEngine registerComponent:@"myComponent" withClass:[WXPopView class]];

3.js代码

<template>
    <div>
        <myComponent style="width:750px; height:100px;" >

        </myComponent>
    </div>

</template>