Mobile Platform as a Service：自訂 View

操作步驟

1. 繼承 NBComponent 介面。

    @interface CustomTestView : NBComponent

2. 重寫以下方法，返回 init 中建立的 View。

    - (id)initWithConfig:(NSDictionary *)config messageDelegate:(id<NBComponentMessageDelegate>)messageDelegate {
        self = [super initWithConfig:config messageDelegate:messageDelegate];
        if (self) {
            self.contentSpaceView = [[UIView alloc] init];
            self.contentSpaceView.backgroundColor = [UIColor orangeColor];
            self.contentSpaceView.frame = CGRectMake(0, 0, 100, 100);
            UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc] initWithTarget:self action:@selector(postMessage)];
            [self.contentSpaceView addGestureRecognizer:tap];
        }
        return self;
    }

    //返回 init 中建立的 View
    - (UIView *)contentView {
        return self.contentSpaceView;
    }

3. 接收小程式傳來的訊息。

    - (void)componentReceiveMessage:(NSString *)message data:(NSDictionary *)data callback:(NBComponentCallback)callback {
        if ([message isEqualToString:@"setColor"]) {
            callback(@{@"success":@"1"});
        }else if ([message isEqualToString:@"startAnimation"]) {
            [self.nbComponentMessageDelegate sendCustomEventMessage:@"nbcomponent.mpaasComponent.customEvent" component:self data:@{@"sth":@"start"} callback:^(NSDictionary * _Nonnull data) {
   
            }];
        }
    }

4. 發送訊息給小程式。

    [self.nbComponentMessageDelegate sendCustomEventMessage:@"nbcomponent.mpaasComponent.customEvent" component:self data:@{
                @"element":@"elementId",
                @"eventName":@"onXxx",
                @"data":{}
            } callback:^(NSDictionary * _Nonnull data) {
   
            }];

   參數說明如下：

   參數	說明
   element	標籤裡的 ID。
   eventName	對應的 event，以 on 開頭。
   data	自訂事件參數。

5. 註冊自訂 View。

    - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
   
        [[PSDService sharedInstance] registerComponentWithName:@"componentName" clsName:@"className"];
   
    }

6. 小程式調用自訂 View。

    <mpaas-component
      id="mpaas-map"
      type="custom_map"
      style="{{ width: 200, height: 200 }}"
    />

   標籤 mpaas-component 為固定值，請勿修改。其他參數說明如下：

   參數	說明
   id	自訂 View 執行個體的 ID，單個小程式內請勿重複。
   type	自訂 View 的 type，與用戶端註冊的自訂 View 參數 componentName 要保持一致，建議加上首碼。
   style	設定寬度和高度。

7. 小程式自訂參數。

    <mpaas-component
      id="mpaas-map"
      type="custom_map"
      style="{{ width: 200, height: 200 }}"
      color="#FFFF00FF"
      ···
    />

   重要

   • color 為自訂渲染參數，也可以對其任意命名。

   • id、type、style 為預設欄位，請勿使用這些欄位作為自訂 View 的自訂渲染參數。

   • 自訂渲染參數不可以 on 開頭，類型不可以是 func。

8. 用戶端接收自訂參數。

    - (void)componentDataWillChangeWithData:(NSDictionary *)data {
   
    }
   
    - (void)componentDataDidChangeWithData:(NSDictionary *)data {
   
    }

其他組件內方法

// self.nbComponentMessageDelegate 方法
@protocol NBComponentMessageDelegate <NSObject>
@required
/**
 * 組件主動發送訊息給頁面(Native->Page)
 *
 * @param message 訊息名稱
 * @param component 要發送訊息的組件
 * @param data 訊息內容
 * @param callback 頁面處理完訊息後的回調
 *
 * @return void
 */
- (void)sendMessage:(NSString *)message
          component:(id<NBComponentProtocol>)component
               data:(NSDictionary *)data
           callback:(NBComponentCallback)callback;
@optional
/**
 * 組件可以在執行環境中直接執行JS
 *
 * @param javaScriptString 需要執行的JS
 * @param completionHandler 執行回呼函數
 *
 * @return void
 */
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;
/**
 * 組件主動發送訊息給頁面(Native->Page)
 *
 * @param message 訊息名稱（內部不處理message）
 * @param component 要發送訊息的組件
 * @param data 訊息內容
 * @param callback 頁面處理完訊息後的回調
 *
 * @return void
 */
- (void)sendCustomEventMessage:(NSString *)message
                     component:(id<NBComponentProtocol>)component
                          data:(NSDictionary *)data
                      callback:(NBComponentCallback)callback;
@end
@protocol NBComponentLifeCycleProtocol <NSObject>
- (void)componentWillAppear;
- (void)componentDidAppear;
/**
 * 組件將要銷毀
 *
 * @return void
 */
- (void)componentWillDestory;
/**
 * 組件銷毀之後
 *
 * @return void
 */
- (void)componentDidDestory;
- (void)componentWillResume;
- (void)componentDidResume;
- (void)componentWillPause;
- (void)componentDidPause;
//fullscreen
/**
 component即將進入全屏的回調
 */
- (void)componentWillEnterFullScreen;
/**
 component進入全屏的回調
 */
- (void)componentWillExitFullScreen;
/**
 component即將退出全屏的回調
 */
- (void)componentDidEnterFullScreen;
/**
 component退出全屏的回調
 */
- (void)componentDidExitFullScreen;

//visiblity
/**
 component即將退出全屏的回調
 */
- (void)componentDidHidden;
/**
 component退出全屏的回調
 */
- (void)componentDidVisiblity;
@end
@protocol NBComponentDataProtocol <NSObject>
/**
 * 組件資料將要更新
 *
 * @param data 資料內容
 *
 * @return void
 */
- (void)componentDataWillChangeWithData:(NSDictionary *)data;
/**
 * 組件資料已經更新，這時候一般是要作介面更新，或者組件的其他動作
 *
 * @param data 資料內容
 *
 * @return void
 */
- (void)componentDataDidChangeWithData:(NSDictionary *)data;
@end
@protocol NBComponentFullScreenProtocol <NSObject>
/**
 是否處於全螢幕模式

 @return 是否處於全螢幕模式
 */
- (BOOL)isFullScreen;
/**
 @return 是否需要進入全屏模
 */
- (BOOL)shouldEnterFullScreen;
/**
 設定ContentView是否需要全螢幕，業務通過換個來切換全螢幕模式
 @param fullScreen 是否需要全螢幕
 @param shouldRotate 是否需要旋轉螢幕
 */
- (void)setContentViewFullScreen:(BOOL)fullScreen shouldRotate:(BOOL)shouldRotate;
@end
@protocol NBComponentVisibilityProtocol <NSObject>
/**
 visibilityState狀態
 @return VisibilityState狀態
 */
- (NBComponentVisibilityState)visibilityState;
/**
 設定VisibilityState狀態
 @param state VisibilityState
 @return 是否設定成功
 */
- (BOOL)setVisibilityState:(NBComponentVisibilityState)state;
/**
 業務重寫此方法給出是否需要監聽visibility變化，預設是NO
 @return 是否需要監聽visibility變化
 */
- (BOOL)shouldObServerVisibilityStateChange;
@end