新建一個(gè)基類為 ?

? 的類。如果這個(gè)類里什么代碼也不寫，它和默認(rèn)的的 ?

? 組件能力是一致的。

1. 覆蓋 ?WXComponent? 中的生命周期方法

• ?loadView?：一個(gè)組件默認(rèn)對(duì)應(yīng)于一個(gè) view，如果未覆蓋 ?loadView? 提供自定義 view，會(huì)讓 ?WXComponent? 基類創(chuàng)建 ?WXView?。?WXView? 繼承自 ?UIView?。比如我們要實(shí)現(xiàn)一個(gè)組件支持地圖功能，我們可以返回系統(tǒng)的 ?MKMapView?。

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

• ?viewDidLoad?： 對(duì)組件 view 需要做一些配置，比如設(shè)置 delegate，可以在 ?viewDidLoad? 生命周期做。如果當(dāng)前 view 沒有添加 subview 的話，不要設(shè)置 view 的 frame，WeexSDK 會(huì)根據(jù) style 進(jìn)行排版后設(shè)置。

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

3.注冊(cè)組件

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

4.在前端代碼中使用新組件

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

自定義事件

1.對(duì)于每個(gè)組件，WeexSDK 默認(rèn)提供了一些事件能力，如點(diǎn)擊等。假如想給我們的地圖組件提供 ?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.覆蓋組件生命周期方法，記錄事件是否需要處理

我們需要額外添加一個(gè)? BOOL? 成員 ?mapLoaded? 用來記錄該事件是否生效。

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

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

3.給前端發(fā)送事件

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

自定義屬性

給我們的地圖組件添加一個(gè)新的屬性 ?showTraffic?。在前端代碼里可以控制組件是否顯示車流情況。

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

1.覆蓋組件初始化方法? initWithRef... ?給組件添加一個(gè)成員變量記錄 ?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.當(dāng)屬性更新時(shí)，同步給地圖控件

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

更多的組件生命期方法

組件是由 Weex 管理的，比如創(chuàng)建、布局、渲染、銷毀。Weex 組件的生命周期方法都是可以重寫的，你可以在這些生命周期中去做自己的事情。

給組件添加方法

在組件代碼中使用宏 ?WX_EXPORT_METHOD? 聲明組件方法供前端調(diào)用。

@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 中調(diào)用 ?focus? 方法。

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