Mobile Platform as a Service:Visualização personalizada

Os mini programas suportam visualizações personalizadas a partir da versão 10.1.68.36 do mPaaS.

Procedimento

1. Herde a interface NBComponent.

    @interface CustomTestView : NBComponent

2. Sobrescreva o método a seguir para retornar a visualização criada em 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. Receba mensagens do mini programa.

    - (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. Envie uma mensagem ao mini programa.

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

   Descrição dos parâmetros:

   Parâmetro	Descrição
   element	ID do elemento na tag.
   eventName	Nome do evento. Deve começar com on.
   data	Parâmetro de evento personalizado.

5. Registre a visualização personalizada.

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

6. Chame a visualização personalizada no mini programa.

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

   A tag mpaas-component tem valor fixo. Não a modifique. Outros parâmetros:

   Parâmetro	Descrição
   id	ID da instância da visualização personalizada. Deve ser único no mini programa.
   type	Deve corresponder ao componentName registrado no cliente. Recomendamos adicionar um prefixo.
   style	Largura e altura da visualização.

7. Adicione parâmetros personalizados ao componente do mini programa:

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

   Importante

   • color é um parâmetro de renderização personalizado. Nomeie os parâmetros personalizados livremente.

   • id, type e style são campos reservados. Não os use como nomes de parâmetros de renderização personalizados.

   • Nomes de parâmetros personalizados não devem começar com on, e o tipo não deve ser func.

8. Receba os parâmetros personalizados no cliente.

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

Outros métodos internos do componente

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