Contoh fitur ekstensi container HTML5 - Mobile Platform as a Service

Komponen container HTML5 menyediakan berbagai fitur ekstensi. Dokumen ini menjelaskan cara menggunakan fitur-fitur tersebut dalam berbagai skenario.

Dapatkan hasil yang dikembalikan oleh suatu Activity dalam H5Plugin
Sesuaikan halaman error HTML5
Aktifkan status bar imersif
Tambahkan JavaScriptInterface pihak ketiga
Tambahkan animasi transisi ke container HTML5
Konfigurasikan blacklist untuk JSAPI container HTML5

Dapatkan hasil yang dikembalikan oleh suatu Activity dalam H5Plugin

Skema seperti pemindaian dan pengenalan wajah mengharuskan Anda memulai Activity baru untuk mendapatkan hasilnya. Dalam kasus ini, JavaScript Application Programming Interface (JSAPI) tidak dapat memperoleh hasil dengan meng-override H5Activity. Untuk mendapatkan hasil dari suatu Activity saat menggunakan container HTML5, ikuti langkah-langkah berikut:

Pada H5Plugin kustom Anda, daftarkan callback OnH5ActivityResult. Contoh kodenya sebagai berikut:
```
H5ActivityResultManager.getInstance().put(onH5ActivityResult);
```
Catatan
- Metode put tidak memeriksa pendaftaran duplikat. Anda harus mencegah pendaftaran ganda.
- Setelah digunakan, panggil metode remove untuk menghapus callback tersebut. Anda dapat menghapusnya di metode onRelease H5Plugin. Contoh kodenya sebagai berikut:
```
H5ActivityResultManager.getInstance().remove(onH5ActivityResult);
```

Jalankan Activity tujuan menggunakan startActivityForResult. Anda dapat menjalankannya di metode handleEvent pada H5Plugin kustom. Contoh kodenya sebagai berikut:

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;
}

Catatan

Callback hanya dilakukan untuk hasil dari H5Activity.

Pada metode callback OnH5ActivityResult, kirimkan hasilnya ke antarmuka depan melalui objek H5BridgeContext.

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

Sesuaikan halaman error HTML5

Untuk menyesuaikan halaman error HTML5, ikuti langkah-langkah berikut:

Buat halaman error kustom dalam format 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>

Implementasikan H5ErrorPageView. Pada APWebView, atur halaman error yang telah Anda buat.

 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);
     }
 }

Daftarkan H5ErrorPageView. Sebelum membuka container HTML5, daftarkan H5ErrorPageView kustom ke container.
```
H5Utils.setProvider(H5ErrorPageView.class.getName(),new H5ErrorPageViewImpl());
```

Catatan

Garis dasar 10.1.68.7 dan versi setelahnya mendukung MPH5ErrorPageView yang baru. Nama dan penggunaan metodenya sama dengan H5ErrorPageView, tetapi parameter metodenya diperluas.

/**
 * 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);
}

Aktifkan status bar imersif

Untuk mengaktifkan status bar imersif, ikuti langkah-langkah berikut:

Catatan

Fitur ini hanya didukung pada versi garis dasar 10.1.60 dan setelahnya.
Metode ini mengatur warna status bar untuk semua halaman HTML5 yang dibuka oleh container HTML5. Jika Anda memiliki kebutuhan lebih kompleks terkait warna status bar, Anda dapat mengimplementasikan title bar kustom untuk container HTML5.
Anda dapat mengatur warna status bar di metode openTranslucentStatusBarSupport pada antarmuka title bar container atau di tempat lain.

Aktifkan TSBS dalam konfigurasi container HTML5.

Jika Anda menggunakan title bar bawaan, implementasikan antarmuka H5TransStatusBarColorProvider. Lalu, gunakan metode H5Utils.setProvider untuk mengatur instans ke container HTML5. Contoh kodenya sebagai berikut:

 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);
     }
 }

Tambahkan JavaScriptInterface pihak ketiga

Saat mengintegrasikan halaman pihak ketiga, Anda mungkin perlu menggunakan JavaScriptInterface. Untuk mendukung skenario ini, ikuti langkah-langkah berikut:

Implementasikan plugin untuk mengintersepsi event pemuatan halaman pihak ketiga.
Dapatkan WebView dan injeksikan objek JavaScript.

Contoh kodenya sebagai berikut:

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;
    }
}

Catatan

Jangan mengembalikan nilai true di metode interceptEvent. Jika tidak, container tidak dapat memuat halaman.

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.";
    }
}

Catatan

Kernel sistem dan kernel UC menggunakan kelas anotasi yang berbeda. Anda harus memastikan kompatibilitas dengan kedua kelas anotasi tersebut.

Tambahkan animasi transisi ke container HTML5

Untuk menambahkan animasi transisi ke container HTML5, tambahkan file sumber daya animasi ke folder res/anim proyek Anda. Ikuti langkah-langkah berikut:

Pada folder res proyek Anda, buat folder anim. Jika folder tersebut sudah ada, Anda dapat melewati langkah ini.

Tambahkan file sumber daya animasi ke folder anim. Container HTML5 secara otomatis mendeteksi file sumber daya berdasarkan nama filenya. Nama file harus berupa h5_slide_out_right.xml, h5_slide_out_left.xml, h5_slide_in_right.xml, atau h5_slide_in_left.xml. Anda dapat menggunakan contoh berikut untuk membuat file sumber daya sendiri.

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>

Konfigurasikan blacklist untuk JSAPI container HTML5

Untuk mengontrol izin saat Nama domain tertentu memanggil JSAPI container, Anda dapat mengonfigurasi blacklist. Ikuti langkah-langkah berikut:

Wariskan kelas H5JSApiPermissionProvider dan override metode hasDomainPermission. Metode hasDomainPermission memiliki dua parameter input: action dan url. Parameter action adalah nama event JSAPI kustom. Parameter url adalah Nama domain halaman saat ini. Metode ini mengembalikan nilai boolean. Nilai true menunjukkan bahwa event dapat diproses. Nilai false menunjukkan bahwa Anda tidak memiliki izin untuk memproses event tersebut. Contoh kodenya sebagai berikut untuk referensi Anda.

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;
     }
}

Setelah framework diinisialisasi, atur Provider.

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