Exemplos de recursos de extensão de contêiner HTML5 - Mobile Platform as a Service: Central de Documentação do Alibaba Cloud

O componente de contêiner HTML5 oferece recursos de extensão, como obtenção de resultados de Activity, personalização de páginas de erro, ativação da barra de status imersiva e adição de objetos JavaScriptInterface de terceiros.

Obter o resultado retornado por uma Activity em um H5Plugin
Personalizar páginas de erro HTML5
Ativar a barra de status imersiva
Adicionar um JavaScriptInterface de terceiros
Adicionar animações de transição aos contêineres HTML5
Configure uma lista de bloqueios para JSAPIs de contêiner HTML5

Obter o resultado retornado por uma Activity em um H5Plugin

Cenários como digitalização e reconhecimento facial exigem iniciar uma nova Activity para obter seu resultado. Nesses casos, uma JSAPI não consegue obter o resultado sobrescrevendo H5Activity. Para obter o resultado de uma Activity em um contêiner HTML5, siga estas etapas:

No H5Plugin personalizado, registre o callback OnH5ActivityResult. Exemplo de código:
```
H5ActivityResultManager.getInstance().put(onH5ActivityResult);
```
Nota
- O método put não verifica registros duplicados. Evite registros duplicados.
- Após o uso, chame o método remove para remover o callback. Remova o callback no método onRelease do H5Plugin. Exemplo de código:
```
H5ActivityResultManager.getInstance().remove(onH5ActivityResult);
```

Inicie a Activity de destino com startActivityForResult. Inicie-a no método handleEvent de um H5Plugin personalizado. Exemplo de código:

public boolean handleEvent(H5Event event, H5BridgeContext context) {
 if ("CustomJSAPI".equals(event.getAction())) {
     if (event.getActivity()!=null){
         Intent intent = new Intent(event.getActivity(), yourDestinationActivity.class);
         event.getActivity().startActivityForResult(intent,requestCode,bundle);
     }
     return true;
 }
 return false;
}

Nota

O callback é executado apenas para o resultado de H5Activity.

No método de callback OnH5ActivityResult, passe o resultado ao frontend pelo objeto H5BridgeContext.

public interface OnH5ActivityResult {
     void onGetResult(int requestCode, int resultCode, Intent intent);
}

Personalizar páginas de erro HTML5

Para personalizar páginas de erro HTML5, siga estas etapas:

Crie uma página de erro personalizada em formato HTML.

 <!doctype html>
 <html lang="en">

 <head>
   <meta charset="utf-8" />
   <meta name="viewport" content="width=device-width,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no" />
   <meta name="format-detection" content="telephone=no" />
   <title>Custom Error</title>
 </head>

 <body>
     <p>This is a custom error page</p>
 </body>

 </html>

Implemente H5ErrorPageView. Em APWebView, defina a página de erro criada.

 public class H5ErrorPageViewImpl implements H5ErrorPageView {
     @Override
     public boolean enableShowErrorPage() {
         // true indicates that the custom error page is enabled.
         return true;
     }
     @Override
     public void errorPageCallback(H5Page h5Page, APWebView view, String errorUrl, int statusCode, String errorMsg, String subErrorMsg) {
         // Get the HTML of the error page. In this demo, it is placed in the raw directory, but you can place it elsewhere.
         String html = H5ResourceManager.readRawFromResource(R.raw.custom_error, LauncherApplicationAgent.getInstance().getApplicationContext().getResources());
         // Set the error page for the webview.
         view.loadDataWithBaseURL(errorUrl, html, "text/html", "utf-8", errorUrl);
     }
 }

Registre H5ErrorPageView. Antes de abrir o contêiner HTML5, registre o H5ErrorPageView personalizado no contêiner.
```
H5Utils.setProvider(H5ErrorPageView.class.getName(),new H5ErrorPageViewImpl());
```

Nota

As baselines 10.1.68.7 e posteriores suportam o novo MPH5ErrorPageView. O nome e o uso do método são iguais aos de H5ErrorPageView, mas os parâmetros foram estendidos.

/**
 * Interface for custom network error pages
 */
public interface MPH5ErrorPageView {
    /**
     * @param h5Page      The page object
     * @param view        The webview object
     * @param errorUrl    The error URL
     * @param statusCode  The error code
     * @param errorMsg    The error description
     * @param subErrorMsg The sub error description
     * @param extInfo     Extended information. Check if it is empty.
     * @param extObj      The extension class. Check if it is empty.
     * @return true indicates that the custom page needs to be displayed, and the errorPageCallback method below will be called.
     */
    boolean enableShowErrorPage(H5Page h5Page, APWebView view, String errorUrl, int statusCode, String errorMsg, String subErrorMsg, Bundle extInfo, Object extObj);
    /**
     * @param h5Page      The page object
     * @param view        The webview object
     * @param errorUrl    The error URL
     * @param statusCode  The error code
     * @param errorMsg    The error description
     * @param subErrorMsg The sub error description
     * @param extInfo     Extended information. Check if it is empty.
     * @param extObj      The extension class. Check if it is empty.
     */
    void errorPageCallback(H5Page h5Page, APWebView view, String errorUrl, int statusCode, String errorMsg, String subErrorMsg, Bundle extInfo, Object extObj);
}

Ativar a barra de status imersiva

Para ativar a barra de status imersiva, siga estas etapas:

Nota

Este recurso é suportado apenas nas versões de baseline 10.1.60 e posteriores.
Este método define a cor da barra de status para todas as páginas HTML5 abertas pelo contêiner. Para requisitos mais complexos de cor da barra de status, implemente uma barra de título personalizada para o contêiner HTML5.
Defina a cor da barra de status no método openTranslucentStatusBarSupport da interface da barra de título do contêiner ou em outro local.

Ative TSBS na configuração do contêiner HTML5.

Se usar a barra de título integrada, implemente a interface H5TransStatusBarColorProvider. Em seguida, use o método H5Utils.setProvider para definir a instância do contêiner HTML5. Exemplo de código:

 package com.mpaas.demo.nebula;

 import android.graphics.Color;

 import com.alipay.mobile.nebula.provider.H5TransStatusBarColorProvider;

 public class H5TransStatusBarColorProviderImpl implements H5TransStatusBarColorProvider {
     @Override
     public int getColor() {
         return Color.argb(70, 255, 255, 255);
     }
 }

Adicionar um JavaScriptInterface de terceiros

Ao integrar páginas de terceiros, talvez seja necessário usar JavaScriptInterface. Para adicionar um JavaScriptInterface de terceiros, siga estas etapas:

Implemente um plugin para interceptar eventos de carregamento de páginas de terceiros.
Obtenha o WebView e injete o objeto JavaScript.

Exemplo de código:

package com.mpaas.demo.nebula;

import android.text.TextUtils;

import com.alibaba.fastjson.JSONObject;
import com.alipay.mobile.h5container.api.H5BridgeContext;
import com.alipay.mobile.h5container.api.H5Event;
import com.alipay.mobile.h5container.api.H5EventFilter;
import com.alipay.mobile.h5container.api.H5Param;
import com.alipay.mobile.h5container.api.H5SimplePlugin;

public class TechFinSitePlugin extends H5SimplePlugin {

    @Override
    public void onPrepare(H5EventFilter filter) {
        super.onPrepare(filter);
        filter.addAction(CommonEvents.H5_PAGE_SHOULD_LOAD_URL);
    }

    @Override
    public boolean interceptEvent(H5Event event, H5BridgeContext context) {
        String action = event.getAction();
        if (CommonEvents.H5_PAGE_SHOULD_LOAD_URL.equals(action)) {
            JSONObject params = event.getParam();
            String url = params.getString(H5Param.LONG_URL);
            if (!TextUtils.isEmpty(url) && url.contains("tech.antfin.com")) {
                event.getH5page().getWebView().addJavascriptInterface(new TechFinJavaScriptInterface(), "techFinBridge");
            }
        }

        return false;
    }
}

Nota

Não retorne true no método interceptEvent. Caso contrário, o contêiner não conseguirá carregar a página.

package com.mpaas.demo.nebula;

import android.webkit.JavascriptInterface;

public class TechFinJavaScriptInterface {

    @JavascriptInterface
    @com.uc.webview.export.JavascriptInterface
    public String whoAmI() {
        return "It is tech fin.";
    }
}

Nota

O kernel do sistema e o kernel UC usam classes de anotação diferentes. Garanta compatibilidade com ambas as classes de anotação.

Adicionar animações de transição aos contêineres HTML5

Para adicionar animações de transição a um contêiner HTML5, coloque os arquivos de recursos de animação na pasta res/anim do projeto. Siga estas etapas:

Na pasta res do projeto, crie uma pasta anim. Se a pasta já existir, ignore esta etapa.

Adicione os arquivos de recursos de animação à pasta anim. O contêiner HTML5 detecta automaticamente os arquivos de recursos pelos nomes. Os nomes dos arquivos devem ser h5_slide_out_right.xml, h5_slide_out_left.xml, h5_slide_in_right.xml ou h5_slide_in_left.xml. Use os exemplos a seguir para criar seus próprios arquivos de recursos.

h5_slide_out_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
  android:fromXDelta="0%"
  android:toXDelta="100%"
  android:duration="300" />
</set>

h5_slide_out_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
  android:fromXDelta="0%"
  android:toXDelta="-100%"
  android:duration="300" />
</set>

h5_slide_in_right.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
  android:fromXDelta="100%"
  android:toXDelta="0"
  android:duration="300" />
</set>

h5_slide_in_left.xml

<?xml version="1.0" encoding="utf-8"?>
<set xmlns:android="http://schemas.android.com/apk/res/android">
<translate
  android:fromXDelta="-100%"
  android:toXDelta="0%"
  android:duration="300" />
</set>

Configure uma lista de bloqueios para JSAPIs de contêiner HTML5

Para controlar as permissões de chamada de JSAPI para domínios específicos, configure uma lista de bloqueios. Siga estas etapas:

Herde a classe H5JSApiPermissionProvider e sobrescreva o método hasDomainPermission. Este método recebe dois parâmetros de entrada: action (nome do evento da JSAPI personalizada) e url (domínio da página atual). Ele retorna um valor boolean: true indica que o evento pode ser processado; false indica ausência de permissão. Exemplo de código:

public class H5JSApiPermissionProviderImpl implements H5JSApiPermissionProvider {
     private static final List blackList = new ArrayList<String>();
     static {
     // URLs in the blacklist do not have permission to execute JSAPI events.
     blackList.add("https://mcube-prod.cn-hangzhou.oss.aliyuncs.com/ONEX4B905F1032156-MUAT/20210728/0.0.0.1_all/nebula/fallback/www/index.html");
     }

     @override
     public boolean hasDomainPermission(String action, String url) {
         // You can determine whether you have permission to execute the current action based on the action name and URL.
         // action is the defined JSAPI event. Return true if the event can be processed. Return false if you do not have permission to process the event.
         if (blackList.contains(url)) {
             return false;
         }
         return true;
     }
     @override
     public boolean hasThisPermission(String permission, String url) {
         return true;
     }
}

Após inicializar o framework, defina o Provider.

H5Utils.setProvider(H5JSApiPermissionProvider.class.getName(), new H5JSApiPermissionProviderImpl());