Mobile Platform as a Service:JSAPIs personalizadas

Uma JavaScript API (JSAPI) é uma interface que fornece capacidades nativas para aplicativos HTML5. Use JSAPIs para acessar recursos e controles nativos, ampliando as funcionalidades das suas páginas HTML5 dentro do contêiner HTML5 do mPaaS.

O contêiner HTML5 oferece duas camadas de suporte a JSAPI:

• JSAPIs integradas para tarefas comuns, como push de página, pop de página e configuração de título. Para mais detalhes, consulte JSAPIs integradas.

• JSAPIs e plugins personalizados para atender a requisitos de negócios não cobertos pelo conjunto integrado.

Este tópico explica como implementar JSAPIs e plugins personalizados no mPaaS.

Design de plugins de JSAPI personalizada

Os plugins de JSAPI personalizada apresentam as seguintes características de design:

• O contêiner HTML5 expõe um mecanismo de registro de plugins, permitindo que serviços externos se integrem sem modificar o próprio contêiner.

• O código do plugin reside em seu próprio bundle, separado do contêiner HTML5. O contêiner inicializa o objeto do plugin apenas quando uma página o chama pela primeira vez, e não na inicialização.

• A implementação e o registro do plugin podem residir em bundles diferentes, desacoplando dependências. Injete plugins no contêiner em tempo de execução usando H5Service.

Chamar código nativo a partir de uma página frontend

Siga os passos abaixo para registrar uma JSAPI personalizada no lado nativo e invocá-la a partir de uma página HTML5 frontend.

1. Registre a JSAPI na interface de registro de plugins do MPNebula.

   Nota

   Para visualizar o código source completo do MyJSApiPlugin, consulte Exemplos de código.

   • A assinatura do método de registro é:

     /**
     * Registers a custom HTML5 plugin (JSAPI).
     *
     * @param className  The class name of the plugin. The full path (package + class) is required.
     * @param bundleName The bundle name. You can view the bundle name in the main module/build/intermediates/bundle/META-INF/BUNDLE.MF file. If the plugin is written in the portal project, set bundleName to an empty string ("").
     * @param scope      The scope. Default value: page.
     * @param events     The events to register.
     */
     public static void registerH5Plugin(String className, String bundleName, String scope, String[] events)

   • Registre o plugin durante a inicialização do aplicativo:

     MPNebula.registerH5Plugin(
       MyJSApiPlugin.class.getName(),
       BuildConfig.BUNDLE_NAME,
       "page",
       new String[]{"myapi1","myapi2",H5Plugin.CommonEvents.H5_PAGE_SHOULD_LOAD_URL}
     );

2. Chame a JSAPI a partir da página frontend.

   Passe o nome do evento correspondente a um dos eventos registrados. O plugin recupera o valor via event.getParam() e analisa os dados.

   O método AlipayJSBridge.call() aceita três argumentos:

   • event — o nome do evento registrado no plugin (por exemplo, myapi2)

   • param — um objeto contendo os parâmetros a serem passados para o lado nativo

   • callback — uma função invocada com o resultado retornado pelo plugin

     AlipayJSBridge.call('myapi2', {
      param2: 'World'
     },
     function(result) {
      console.log(result);
     });

Chamar uma página frontend a partir do código nativo

O código nativo pode enviar eventos para uma página HTML5 frontend por meio da bridge do contêiner HTML5. O exemplo abaixo mostra uma notificação de alteração de rede: o frontend escuta o evento e o lado nativo o envia quando a conectividade muda.

Todas as chamadas usam sendDataWarpToWeb(eventName, params, callbackContext):

• eventName — o nome do evento no qual o listener do frontend está registrado (por exemplo, h5NetworkChange)

• params — um JSONObject contendo os dados a serem enviados para a página

• callbackContext — passe null para notificações do tipo fire-and-forget

  1. Registre um listener no frontend.

     document.addEventListener('h5NetworkChange',
     function(e) {
      alert("The network environment has changed. You can call the getNetworkType API to obtain details.");
     },
     false);

  2. Quando o cliente detectar uma alteração de rede, envie o evento para a página.

     JSONObject param = new JSONObject();
     // Set custom parameters for param.
     param.put("data", param);
     H5Page h5Page = h5Service.getTopH5Page();
     if (h5Page != null) {
      h5Page.getBridge().sendDataWarpToWeb("h5NetworkChange", param, null);
     }

Depurar com o Chrome Inspect

Use a ferramenta de inspeção integrada do Chrome para verifique se suas chamadas de JSAPI personalizada funcionam corretamente.

Pré-requisitos: conecte seu dispositivo móvel ao computador. Certifique-se de estar executando a versão mais recente do Chrome — versões antigas exibem uma tela em branco na página de inspeção.

1. Abra o Chrome no seu computador e acesse chrome://inspect.

2. No aplicativo de demonstração do mPaaS, abra a página inicial da Ant Financial. A página de inspeção do Chrome exibe o dispositivo e a página conectados, conforme mostrado abaixo:

   Nota

   Se chrome://inspect mostrar uma tela em branco, atualize o Chrome para a versão mais recente.

   

3. Clique em inspect. O painel DevTools será aberto:

   

4. Clique em Console na barra de ferramentas para entrar no modo de depuração da página e, em seguida, chame seus métodos de JSAPI personalizada para verifique se funcionam conforme o esperado.

Tópicos relacionados

• Exemplos de código

• FAQ