Mobile Platform as a Service：Custom JSAPIs

Komponen container HTML5 menyediakan kemampuan berikut:

• Sekumpulan JSAPI bawaan yang kaya untuk mengimplementasikan fitur seperti page push, page pop, dan pengaturan judul. Untuk informasi selengkapnya, lihat Built-in JSAPIs.

• Dukungan untuk custom JSAPI dan plugin guna memenuhi kebutuhan bisnis ekstensi Anda.

Topik ini menjelaskan cara mengimplementasikan custom JSAPI dan plugin.

Tentang tugas ini

Plugin custom JSAPI memiliki fitur-fitur berikut:

• Container HTML5 menyediakan mekanisme bagi layanan eksternal untuk mendaftarkan konfigurasi plugin. Hal ini memungkinkan berbagai layanan berintegrasi dengan container HTML5 secara lebih fleksibel.

• Layanan dapat menggunakan metode ini untuk mendaftarkan plugin eksternal kustom. Kode tersebut dapat ditempatkan dalam bundle-nya sendiri tanpa melibatkan container HTML5. Saat sebuah plugin didaftarkan melalui konfigurasi plugin, container HTML5 hanya menginisialisasi objek tersebut ketika halaman memanggilnya, bukan saat objek dibuat langsung.

• Implementasi dan pendaftaran plugin dapat berada di bundle yang berbeda untuk mencapai penguraian keterkaitan dependensi. Anda dapat menyuntikkan plugin ke dalam container secara dinamis menggunakan H5Service.

Panggil Native dari halaman frontend

Untuk memanggil Native dari halaman frontend, konfigurasikan kode client dan frontend dengan mengikuti langkah-langkah berikut.

1. Daftarkan JSAPI menggunakan antarmuka pendaftaran JSAPI MPNebula.

   Catatan

   Untuk melihat kode sumber MyJSApiPlugin, lihat Code examples.

   • Antarmuka pendaftaran JSAPI adalah sebagai berikut:

     /**
     * Mendaftarkan plugin HTML5 kustom (JSAPI).
     *
     * @param className  Nama kelas plugin. Diperlukan path lengkap (package + class).
     * @param bundleName Nama bundle. Anda dapat melihat nama bundle di file main module/build/intermediates/bundle/META-INF/BUNDLE.MF. Jika plugin ditulis dalam proyek portal, atur bundleName menjadi string kosong ("").
     * @param scope      Cakupan. Nilai default: page.
     * @param events     Event yang akan didaftarkan.
     */
     public static void registerH5Plugin(String className, String bundleName, String scope, String[] events)

   • Kode berikut memberikan contoh pendaftaran:

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

2. Pemanggilan frontend.

   Untuk melakukan pemanggilan frontend ke JSAPI kustom, ubah parameter event menjadi event yang telah didaftarkan oleh plugin. Plugin menggunakan event.getParam() untuk mengambil nilai yang dikirimkan dari JS, lalu mengurai data tersebut.

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

Panggil halaman frontend dari Native

Native juga dapat memanggil halaman frontend dari container HTML5. Sebagai contoh, pada kasus JSAPI perubahan jaringan, halaman mendengarkan event tersebut. Kode frontend dan client yang diperlukan adalah sebagai berikut:

1. Daftarkan pendengar di frontend.

   document.addEventListener('h5NetworkChange',
   function(e) {
    alert("Lingkungan jaringan telah berubah. Anda dapat memanggil API getNetworkType untuk mendapatkan detailnya.");
   },
   false);

2. Saat client mendeteksi perubahan jaringan, client mengirim event panggilan ke halaman.

   JSONObject param = new JSONObject();
   // Tetapkan parameter kustom untuk param.
   param.put("data", param);
   H5Page h5Page = h5Service.getTopH5Page();
   if (h5Page != null) {
    h5Page.getBridge().sendDataWarpToWeb("h5NetworkChange", param, null);
   }

Gunakan Inspect

Anda dapat menggunakan tool inspect Chrome untuk memeriksa apakah pemanggilan custom JSAPI berjalan valid:

1. Sambungkan ponsel Anda ke komputer. Di komputer, buka browser Chrome dan masukkan chrome://inspect untuk membuka halaman debugging.

2. Pada demo mPaaS, buka halaman utama Ant Financial. Halaman inspect Chrome akan muncul seperti pada gambar berikut:

   Catatan

   Jika layar kosong muncul saat Anda membuka chrome://inspect di komputer Anda, upgrade Chrome ke versi terbaru.

   

3. Klik inspect pada gambar. Halaman berikut akan muncul:

   

4. Klik Console pada bilah alat halaman untuk masuk ke mode debugging halaman. Anda kemudian dapat memanggil operasi API kustom Anda, seperti yang ditunjukkan pada gambar.

Tautan terkait

• Code examples

• FAQ