Weex 扩展组件

新建一个基类为 ​

​ 的类。如果这个类里什么代码也不写，它和默认的的 ​

​ 组件能力是一致的。

1. 覆盖 ​WXComponent​ 中的生命周期方法

• ​loadView​：一个组件默认对应于一个 view，如果未覆盖 ​loadView​ 提供自定义 view，会让 ​WXComponent​ 基类创建 ​WXView​。​WXView​ 继承自 ​UIView​。比如我们要实现一个组件支持地图功能，我们可以返回系统的 ​MKMapView​。

- (UIView *)loadView {
    return [MKMapView new];
}

• ​viewDidLoad​： 对组件 view 需要做一些配置，比如设置 delegate，可以在 ​viewDidLoad​ 生命周期做。如果当前 view 没有添加 subview 的话，不要设置 view 的 frame，WeexSDK 会根据 style 进行排版后设置。

- (void)viewDidLoad {
      ((MKMapView*)self.view).delegate = self;
}

3.注册组件

[WXSDKEngine registerComponent:@"map" withClass:[WXMapComponent class]];

4.在前端代码中使用新组件

<template>
    <div>
        <map style="width:200px;height:200px"></map>
    </div>
</template>

自定义事件

1.对于每个组件，WeexSDK 默认提供了一些事件能力，如点击等。假如想给我们的地图组件提供 ​mapLoaded​ 事件。

<template>
    <div>
        <map style="width:200px;height:200px" @mapLoaded="onMapLoaded"></map>
    </div>
</template>

<script>
export default {
    methods: {
        onMapLoaded:function(e) {
            console.log("map loaded"+JSON.stringify(e))
        }
    }
}
</script>

2.覆盖组件生命周期方法，记录事件是否需要处理

我们需要额外添加一个​ BOOL​ 成员 ​mapLoaded​ 用来记录该事件是否生效。

- (void)addEvent:(NSString *)eventName {
    if ([eventName isEqualToString:@"mapLoaded"]) {
        _mapLoaded = YES;
    }
}

- (void)removeEvent:(NSString *)eventName {
    if ([eventName isEqualToString:@"mapLoaded"]) {
        _mapLoaded = NO;
    }
}

3.给前端发送事件

- (void)mapViewDidFinishLoadingMap:(MKMapView *)mapView {
    if (_mapLoaded) {
        [self fireEvent:@"mapLoaded" params:@{@"customKey":@"customValue"} domChanges:nil];
    }
}

自定义属性

给我们的地图组件添加一个新的属性 ​showTraffic​。在前端代码里可以控制组件是否显示车流情况。

<template>
    <div>
        <map style="width:200px;height:200px" showTraffic="true"></map>
    </div>
</template>

1.覆盖组件初始化方法​ initWithRef... ​给组件添加一个成员变量记录 ​showTraffic​ 属性的值，并在 init 方法中初始化。

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

2.在生命期事件中记得将属性值同步给地图控件

- (void)viewDidLoad {
  ((MKMapView*)self.view).showsTraffic = _showsTraffic;
}

3.当属性更新时，同步给地图控件

- (void)updateAttributes:(NSDictionary *)attributes {
    if (attributes[@"showsTraffic"]) {
        _showsTraffic = [WXConvert BOOL: attributes[@"showsTraffic"]];
        ((MKMapView*)self.view).showsTraffic = _showsTraffic;
    }
}

更多的组件生命期方法

组件是由 Weex 管理的，比如创建、布局、渲染、销毁。Weex 组件的生命周期方法都是可以重写的，你可以在这些生命周期中去做自己的事情。

给组件添加方法

在组件代码中使用宏 ​WX_EXPORT_METHOD​ 声明组件方法供前端调用。

@implementation WXMyComponent

WX_EXPORT_METHOD(@selector(focus))

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

   return self;
}

- (void)focus {
    NSLog(@"you got it");
}
@end

在 JS 中调用 ​focus​ 方法。

<template>
  <mycomponent ref='mycomponent'></mycomponent>
</template>
<script>
  module.exports = {
    created: function() {
      this.$refs.mycomponent.focus();
    }
  }
</script>