自定义 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