Mobile Platform as a Service:Custom View

Procedure

1. Inherit the NBComponent interface.

    @interface CustomTestView : NBComponent

2. Override 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 program.

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

   Parameter descriptions:

   Parameter	Description
   element	Element ID in the tag.
   eventName	Event name. Must start with on.
   data	Custom event parameter.

5. Register the custom view.

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

6. Call the custom view from the mini program.

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

   The mpaas-component tag is a fixed value. Do not modify it. Other parameters:

   Parameter	Description
   id	Instance ID of the custom view. Must be unique within a mini program.
   type	Must match the componentName registered on the client. Adding a prefix is recommended.
   style	Width and height of the view.

7. Add custom parameters to the mini program component:

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

   Important

   • color is a custom rendering parameter. You can name custom parameters freely.

   • id, type, and style are reserved fields. Do not use them as custom rendering parameter names.

   • Custom parameter names must not start with on, and the type must not be func.

8. Receive custom parameters on the client.

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