iOS Mini Programs support custom views

Procedure

1. Inherit the NBComponent interface.

    @interface CustomTestView : NBComponent

2. Override the following methods to return the view created in the `init` method.

    - (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 the init method.
    - (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 messages to the Mini Program.

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

   The parameters are described below:

   Parameter	Description
   element	The ID in the tag.
   eventName	The corresponding event. It must start with "on".
   data	Custom event parameters.

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 static field and must not be modified. The other parameters are described below:

   Parameter	Description
   id	The ID of the custom view instance. The ID must be unique within a Mini Program.
   type	The type of the custom view. It must be the same as the componentName parameter of the custom view registered on the client. Add a prefix.
   style	Sets the width and height.

7. Set custom parameters for the Mini Program.

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

   Important

   • The `color` parameter is an example of a custom rendering parameter. You can name this parameter as required.

   • The `id`, `type`, and `style` parameters are default fields. Do not use these names for custom rendering parameters.

   • The names of custom rendering parameters cannot start with "on", and their type cannot be `func`.

8. Receive custom parameters on the client.

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

Other component methods

// self.nbComponentMessageDelegate methods
@protocol NBComponentMessageDelegate <NSObject>
@required
/**
 * The component actively sends a message to the page (Native->Page).
 *
 * @param message The message name.
 * @param component The component that sends the message.
 * @param data The message content.
 * @param callback The callback that is executed after the page processes the message.
 *
 * @return void
 */
- (void)sendMessage:(NSString *)message
          component:(id<NBComponentProtocol>)component
               data:(NSDictionary *)data
           callback:(NBComponentCallback)callback;
@optional
/**
 * The component can directly execute JavaScript in the execution environment.
 *
 * @param javaScriptString The JavaScript to execute.
 * @param completionHandler The execution 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 The message name. The message is not processed internally.
 * @param component The component that sends the message.
 * @param data The message content.
 * @param callback The callback that is executed after the page processes 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 is about to be destroyed.
 *
 * @return void
 */
- (void)componentWillDestory;
/**
 * The component is destroyed.
 *
 * @return void
 */
- (void)componentDidDestory;
- (void)componentWillResume;
- (void)componentDidResume;
- (void)componentWillPause;
- (void)componentDidPause;
// Full screen
/**
 The callback that is executed before the component enters full screen mode.
 */
- (void)componentWillEnterFullScreen;
/**
 The callback that is executed before the component exits full screen mode.
 */
- (void)componentWillExitFullScreen;
/**
 The callback that is executed after the component enters full screen mode.
 */
- (void)componentDidEnterFullScreen;
/**
 The callback that is executed after the component exits full screen mode.
 */
- (void)componentDidExitFullScreen;

// Visibility
/**
 The callback that is executed after the component is hidden.
 */
- (void)componentDidHidden;
/**
 The callback that is executed after the component becomes visible.
 */
- (void)componentDidVisiblity;
@end
@protocol NBComponentDataProtocol <NSObject>
/**
 * The component data is about to be updated.
 *
 * @param data The data content.
 *
 * @return void
 */
- (void)componentDataWillChangeWithData:(NSDictionary *)data;
/**
 * The component data has been updated. At this point, you typically update the interface or perform other component operations.
 *
 * @param data The data content.
 *
 * @return void
 */
- (void)componentDataDidChangeWithData:(NSDictionary *)data;
@end
@protocol NBComponentFullScreenProtocol <NSObject>
/**
 Checks whether the component is in full screen mode.

 @return YES if the component is in full screen mode. Otherwise, NO.
 */
- (BOOL)isFullScreen;
/**
 @return Specifies whether the component needs to enter full screen mode.
 */
- (BOOL)shouldEnterFullScreen;
/**
 Sets whether the ContentView needs to be in full screen mode. The service switches to full screen mode using this method.
 @param fullScreen Specifies whether to use full screen mode.
 @param shouldRotate Specifies whether to rotate the screen.
 */
- (void)setContentViewFullScreen:(BOOL)fullScreen shouldRotate:(BOOL)shouldRotate;
@end
@protocol NBComponentVisibilityProtocol <NSObject>
/**
 The visibilityState status.
 @return The VisibilityState status.
 */
- (NBComponentVisibilityState)visibilityState;
/**
 Sets the VisibilityState status.
 @param state The VisibilityState.
 @return YES if the status is set successfully. Otherwise, NO.
 */
- (BOOL)setVisibilityState:(NBComponentVisibilityState)state;
/**
 The service overrides this method to specify whether to listen for visibility changes. The default value is NO.
 @return Specifies whether to listen for visibility changes.
 */
- (BOOL)shouldObServerVisibilityStateChange;
@end