Mobile Platform as a Service:Custom View

Procedure

1. Inherit the NBComponent interface.

    @interface CustomTestView : NBComponent

2. Rewrite the following method to return the View created in init.

    - (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;
    }

    //Return the View created in `init`.
    - (UIView *)contentView {
        return self.contentSpaceView;
    }

3. Receive messages from the Mini Program.

    - (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. Send a message to the Mini Progrm.

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

   The parameters descriptions are as follows:

   Parameter	Description
   element	ID in the tag.
   eventName	The corresponding event, starts with on.
   data	Custom event parameter.

5. Register a custom View.

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

6. The Mini Program calls the custom View.

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

   The label mpaas-component is a fixed value, please do not modify it. Other parameters are described as follows:

   Parameter	Description
   id	The ID of the instance of custom View, duplicate ID should not occur in one mini program.
   type	The type of the custom View must be consistent with the custom View parameter componentName registered by the client. Adding a prefix is recommended.
   style	Set the width and height.

7. The description for custom parameters of Mini Program is as follows:

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

   Note

   • Color is a custom rendering parameter, and it can also be named arbitrarily.

   • Id, type, and style are the default fields, these fields should not be used as the names of custom rendering parameters for custom View.

   • Custom rendering parameters cannot start with on, and the type cannot be func.

8. The client receives custom parameters.

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

Other component internal methods

// self.nbComponentMessageDelegate method
@protocol NBComponentMessageDelegate <NSObject>
@required
/**
 * The component actively sends a message to the page (Native->Page)
 *
 * @param message Message name.
 * @param component The component to send the message.
 * @param data Content of the message.
 * @param callback The callback after the page has processed the message.
 *
 * @return void
 */
- (void)sendMessage:(NSString *)message
          component:(id<NBComponentProtocol>)component
               data:(NSDictionary *)data
           callback:(NBComponentCallback)callback;
@optional
/**
 * Components can directly execute JS in the execution environment.
 *
 * @param javaScriptString JS to be executed.
 * @param completionHandler Executes the callback function.
 *
 * @return void
 */
- (void)evaluateJavaScript:(NSString *)javaScriptString completionHandler:(void (^ _Nullable)(_Nullable id, NSError * _Nullable error))completionHandler;
/**
 * The component actively sends a message to the page (Native->Page).
 *
 * @param message Message name (message is not processed internally).
 * @param component The component to send the message.
 * @param data Content of message.
 * @param callback The callback after the page has processed the message.
 *
 * @return void
 */
- (void)sendCustomEventMessage:(NSString *)message
                     component:(id<NBComponentProtocol>)component
                          data:(NSDictionary *)data
                      callback:(NBComponentCallback)callback;
@end
@protocol NBComponentLifeCycleProtocol <NSObject>
- (void)componentWillAppear;
- (void)componentDidAppear;
/**
 * The component will be destroyed.
 *
 * @return void
 */
- (void)componentWillDestory;
/**
 * After the component is destroyed.
 *
 * @return void
 */
- (void)componentDidDestory;
- (void)componentWillResume;
- (void)componentDidResume;
- (void)componentWillPause;
- (void)componentDidPause;
//fullscreen
/**
 The component is about to enter the fullscreen callback.
 */
- (void)componentWillEnterFullScreen;
/**
 Callback when component enters fullscreen.
 */
- (void)componentWillExitFullScreen;
/**
 The component is about to exit the fullscreen callback.
 */
- (void)componentDidEnterFullScreen;
/**
 Component exits the callback of fullscreen.
 */
- (void)componentDidExitFullScreen;

//visiblity
/**
 The component is about to exit the fullscreen callback.
 */
- (void)componentDidHidden;
/**
 Component exits the callback of fullscreen.
 */
- (void)componentDidVisiblity;
@end
@protocol NBComponentDataProtocol <NSObject>
/**
 * Component data will be updated.
 *
 * @param data Data content.
 *
 * @return void
 */
- (void)componentDataWillChangeWithData:(NSDictionary *)data;
/**
 * The data of the component has been updated, it is generally necessary to update the interface or perform other operations of the component.
 *
 * @param data Data content.
 *
 * @return void
 */
- (void)componentDataDidChangeWithData:(NSDictionary *)data;
@end
@protocol NBComponentFullScreenProtocol <NSObject>
/**
 Whether it is in fullscreen mode.

 @return Whether it is in fullscreen mode.
 */
- (BOOL)isFullScreen;
/**
 @return If enter fullscreen mode is needed.
 */
- (BOOL)shouldEnterFullScreen;
/**
 Set whether the ContentView needs to be fullscreen, the business can switch to fullscreen mode by changing it.
 @param fullScreen Whether fullscreen is required.
 @param shouldRotate Whether you need to rotate the screen.
 */
- (void)setContentViewFullScreen:(BOOL)fullScreen shouldRotate:(BOOL)shouldRotate;
@end
@protocol NBComponentVisibilityProtocol <NSObject>
/**
 State of visibilityState.
 @return State of visibilityState.
 */
- (NBComponentVisibilityState)visibilityState;
/**
 Set the state of VisibilityState
 @param state VisibilityState
 @return set successfully or not
 */
- (BOOL)setVisibilityState:(NBComponentVisibilityState)state;
/**
 Business rewrites this method to return the result of monitoring visibility changes or not, the default is NO.
 @return if monitor the changing of visibility is needed.
 */
- (BOOL)shouldObServerVisibilityStateChange;
@end