客戶端注冊(cè)自定義標(biāo)簽（自定義 View）。

1. 實(shí)現(xiàn)自定義標(biāo)簽（自定義 View）。

   繼承 CCardWidget 并實(shí)現(xiàn)其協(xié)議方法，其中 onCreateView 和 updateData 為必須實(shí)現(xiàn)的方法，其他方法為可選。

   #import "CustomCardView.h"
   
   @interface CustomCardView ()
   
   @property (nonatomic, strong) UILabel *titleLabel;
   
   @end
   
   @implementation CustomCardView
   
   //必須實(shí)現(xiàn)
   /**
    * UI 創(chuàng)建接口，表示當(dāng)前組件要上屏的視圖 UI
    *
    * @param data  map 類型，組件在卡片上聲明的數(shù)據(jù)，包括樣式、事件和屬性，對(duì)應(yīng)的 key 為DATA_KEY_STYLES、DATA_KEY_EVENTS、DATA_KEY_ATTRS；
    * @param size  View 的大小，寬高
    * @return 可用的 UIView
    */
   - (UIView *)onCreateView:(NSDictionary *)data size:(CGSize)size {
       NSLog(@"數(shù)據(jù)打印:%@", data);
       
       UIView *customView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, size.width, size.height)];
       customView.backgroundColor = [UIColor redColor];
       
       self.titleLabel = [[UILabel alloc] initWithFrame:CGRectMake(0, 0, size.width, 30)];
       //數(shù)據(jù)來源是 data 提供
       self.titleLabel.text = @"A";
       [customView addSubview:self.titleLabel];
       
       return customView;
   }
   
   //必須實(shí)現(xiàn)
   /**
    * 組件數(shù)據(jù)更新接口
    * @param data
    */
   - (void)onUpdateData:(NSDictionary *)data {
       NSLog(@"數(shù)據(jù)打印:%@", data);
   }
   
   /**
    *  從復(fù)用池中獲取的已存在控件，被使用前的數(shù)據(jù)準(zhǔn)備。
    *  @param data 初始化數(shù)據(jù)
    *  @param size 組件復(fù)用時(shí)的大小
    */
   - (void)onReuse:(NSDictionary *)data size:(CGSize)size {
       NSLog(@"數(shù)據(jù)打印:%@", data);
       NSLog(@"Size打印:%@", size);
       
       //數(shù)據(jù)來源是 data 提供
       self.titleLabel.text = @"B";
   
   }
   
   /**
    * 組件是否支持復(fù)用；
    * 為了提高效率，擴(kuò)展組件可以支持復(fù)用。例如當(dāng)某個(gè)自定義的標(biāo)簽組件由于數(shù)據(jù)更新被移除當(dāng)前視圖，此時(shí)該組件如果支持復(fù)用，那么會(huì)放入復(fù)用池內(nèi)，下次該組件顯示時(shí)，會(huì)直接從復(fù)用池內(nèi)獲取；
    * @return YES：復(fù)用；NO：不復(fù)用。
    */
   - (BOOL)canReuse {
       return YES;
   }
   
   /**
    * 組件復(fù)用清理接口。如果組件支持復(fù)用（canReuse 返回 true），則組件在進(jìn)入復(fù)用池后會(huì)調(diào)用
    * onRecycleAndCached 方法，表示當(dāng)前組件已經(jīng)離屏放入緩存內(nèi)，需要清理資源。
    */
   - (void)onRecycleAndCache {
       //清理自定義 View 上的 SubView 內(nèi)容
       self.titleLabel.text = @"";
   }

2. 注冊(cè)自定義標(biāo)簽。

   第一個(gè)參數(shù)是自定義的標(biāo)簽，需要與卡片側(cè)約定好，在卡片側(cè)會(huì)寫到 <> 內(nèi)。建議加上前綴，防止和動(dòng)態(tài)卡片本身的標(biāo)簽沖突。第二個(gè)是自定義標(biāo)簽實(shí)現(xiàn)類的類名。

   CubeWidgetInfo *widgetInfo = [CubeWidgetInfo new];
   widgetInfo.tag = @"custom-widget";
   widgetInfo.className = [CustomCardView class];
       
   NSMutableArray *widgetArray = [NSMutableArray array];
   [widgetArray addObject:widgetInfo];
   [[[CubeService sharedInstance] getEngine] registerWidgets:[NSArray arrayWithArray:widgetArray]];

卡片側(cè)調(diào)用。

在標(biāo)簽中，寫入自定義的標(biāo)簽。此處為 custom-widget，對(duì)應(yīng)客戶端注冊(cè)的標(biāo)簽。

<template>
    <div class="root">
        ···
        <custom-widget></custom-widget>
                                ···
    </div>
</template>

將卡片打包發(fā)布到后臺(tái)或者預(yù)覽，即可渲染客戶端自定義的 View。