Create custom H5 container plugins for iOS | mPaaS - Mobile Platform as a Service: Central de Documentação do Alibaba Cloud

Desenvolva um plugin personalizado para lidar com eventos específicos, como registrar a instrumentação quando um usuário acessa uma página. Após um plugin se inscrever em um evento, ele processa os dados do evento em seu manipulador.

Sobre esta tarefa

A criação de um plugin personalizado envolve as seguintes etapas:

Criar um plugin
Registrar o plugin
Usar o plugin

O exemplo a seguir usa a demonstração H5 container and offline package para criar um plugin que modifica a barra de navegação quando uma página H5 é carregada.

Procedimento

Create a plugin

Formato geral de uma classe de plugin:

#import <NebulaSDK/NBPluginBase.h>

@interface MPPlugin4TitleView : NBPluginBase

@end

@implementation MPPlugin4TitleView

- (void)pluginDidLoad
{
}

- (void)handleEvent:(PSDEvent *)event
{
   [super handleEvent:event];
}

- (int)priority
{
    return PSDPluginPriority_High +1;
}

Pontos-chave:

Nomenclatura: inicie o nome com XXPlugin4, onde XX é um prefixo personalizado, para corresponder à convenção de nomenclatura padrão de plugins do container.
Classe base: todos os plugins devem herdar de NBPluginBase.
Implemente os métodos básicos: no arquivo .m, você deve sobrescrever os seguintes métodos:
- - (void)pluginDidLoad: Obrigatório. Inscreve-se em eventos H5. Os eventos estão listados no arquivo de cabeçalho NBDefines.h.
- - (void)handleEvent: Obrigatório. Trata a lógica quando um evento inscrito é acionado.
- - (**int**) priority: Obrigatório. Define a prioridade do evento como PSDPluginPriority_High + 1.
- - (void)addJSApis: Opcional. Registra uma JSAPI para comunicação com a página H5.

Listen for events

Registre os listeners de eventos no método - (void)pluginDidLoad.

- (void)pluginDidLoad {
    self.scope = kPSDScope_Scene; // 1

    [self.target addEventListener:kNBEvent_Scene_NavigationItem_Left_Back_Create_After withListener:self useCapture:NO];
    // -- Modify the navigation bar style.
    [self.target addEventListener:kH5Event_Scene_NavigationBar_ChangeColor withListener:self useCapture:NO];

    [super pluginDidLoad];
}

Os parâmetros de addEventListener:

Name	Description
scope	Escopo do evento. Do menor ao maior: Scene, Session e Service.
event	Nome do evento. As constantes estão definidas em `NBDefines.h`.
listener	Objeto do manipulador de eventos que fornece `- handleEvent:`.
capture	Indica se o evento deve usar captura. Normalmente definido como `NO`.

Set the plugin priority

Defina uma prioridade alta para impedir que o plugin seja substituído.

- (int)priority
{
    return PSDPluginPriority_High +1;
}

Handle the listener

Implemente a lógica de tratamento de eventos no método -handleEvent:.

- (void)handleEvent:(NBNavigationTitleViewEvent *)event
{
    [super handleEvent:event];

    if ([kNBEvent_Scene_NavigationItem_Left_Back_Create_After isEqualToString:event.eventType]){
        // Modify the style based on the default back button.
        NSArray *leftBarButtonItems = event.context.currentViewController.navigationItem.leftBarButtonItems;
        if ([leftBarButtonItems count] == 1) {
            if (leftBarButtonItems[0] && [leftBarButtonItems[0] isKindOfClass:[AUBarButtonItem class]]) {
                // Modify the color of the back arrow and text based on the default back button.
                AUBarButtonItem *backItem = leftBarButtonItems[0];
                backItem.backButtonColor = [UIColor greenColor];
                backItem.titleColor = [UIColor colorFromHexString:@"#00ff00"];

                // Hide the back arrow.
                //                backItem.hideBackButtonImage = YES;

                // Hide the back text: Set the text to transparent but keep the clickable area of the back button.
                //                backItem.titleColor = [UIColor clearColor];
            }
        }
        [event preventDefault];
        [event stopPropagation];
    }else if([kH5Event_Scene_NavigationBar_ChangeColor isEqualToString:event.eventType]) {

        // Disable the default navigation bar style of the container.
        [event preventDefault];
        [event stopPropagation];
    }
}

Add a JSAPI

Registre uma JSAPI personalizada no método opcional - (void)addJSApis. Custom JSAPIs > Register using code.

- (void)addJSApis
{
    [super addJSApis];
    // You can add custom JSAPIs related to TitleView here.
}

Register the plugin

Registre a classe do plugin em seu arquivo Plist personalizado. Custom JSAPIs > Register a JSAPI.

Custom plugins

O dicionário do plugin registrado contém os seguintes itens:

Name	Description
name	Nome da classe do plugin.
scope	Escopo do plugin.
events	Eventos a serem monitorados.

Use the plugin

Adicione um ponto de interrupção no método pluginDidLoad para verificar a pilha de chamadas quando o evento é acionado.
Adicione um ponto de interrupção no método handleEvent para verificar se os eventos inscritos são acionados corretamente.
Verifique se o estilo personalizado da barra de navegação entra em vigor na página H5.