Mobile Platform as a Service：JSAPI Kustom

Komponen H5 container menyediakan fitur-fitur berikut:

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

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

Topik ini menggunakan demo H5 Container and Offline Package untuk menunjukkan cara membuat plugin kustom. Plugin ini memodifikasi navigation bar saat halaman HTML5 dimuat.

Tentang tugas ini

Anda dapat menyesuaikan JSAPI dengan salah satu dari dua cara berikut:

• Pendaftaran melalui Plist

• Pendaftaran melalui kode

Prosedur

Pendaftaran melalui Plist

1. Buat kelas JSAPI.

   • Konvensi penamaan: Untuk menjaga konsistensi dengan nama plugin default, tambahkan awalan XXJsApiHandler4 pada nama kelas JSAPI Anda, di mana XX adalah awalan kustom.

   • Kelas dasar: Semua JSAPI harus mewarisi dari PSDJsApiHandler.

   • Implementasikan metode handler: Dalam file .m, override metode -(void)handler:context:callback:. Saat antarmuka depan memanggil JSAPI ini, permintaan akan diteruskan ke metode tersebut.

   • Parameter untuk metode ini adalah sebagai berikut:

     Parameter	Deskripsi
     data	Parameter yang dikirim dari halaman HTML5 saat JSAPI ini dipanggil.
     context	Konteks halaman HTML5 saat ini. Untuk detailnya, lihat PSDContext.h.
     callback	Metode callback yang dipanggil setelah pemanggilan JSAPI selesai. Metode ini mengirimkan hasilnya ke halaman HTML5 dalam bentuk dictionary.

     Kode berikut memberikan contoh.

       #import <NebulaPoseidon/NebulaPoseidon.h>
       @interface MPJsApiHandler4OpenSms : PSDJsApiHandler
       @end
       @implementation MPJsApiHandler4OpenSms
       - (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSDJsApiResponseCallbackBlock)callback
       {
       [super handler:data context:context callback:callback];
       // Open the system text message app.
       NSURL *url = [NSURL URLWithString:@"sms://xxx"];
       BOOL reasult = [[UIApplication sharedApplication] openURL:url];
       callback(@{@"success":@(reasult)});
       }
       @end

2. Daftarkan JSAPI dalam file Plist kustom Anda.

   • Untuk mengelola JSAPI dan plugin kustom secara bersamaan, Anda dapat membuat file Plist baru. Unduh file templat DemoCustomPlugins.bundle.zip dan tambahkan ke proyek Anda.

   • Daftarkan kelas JSAPI yang telah Anda buat pada langkah sebelumnya di dalam array JsApis.

   • JSAPI yang didaftarkan berupa dictionary yang berisi dua item berikut:

     Nama	Deskripsi
     jsApi	Nama antarmuka JSAPI yang dipanggil pada halaman HTML5. Penting Untuk mencegah konflik dengan JSAPI bawaan, tambahkan awalan pada nama JSAPI kustom Anda.
     name	Nama kelas JSAPI yang telah Anda buat.

   • Anda juga harus menentukan path ke file Plist kustom saat menginisialisasi konfigurasi container.

     • Untuk informasi lebih lanjut tentang cara menginisialisasi H5 container, lihat H5 container quick start.

     Kode berikut memberikan contoh.

       - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
       {  
           // Initialize the container.
           // [MPNebulaAdapterInterface initNebula];
     
           // Specify the custom JSAPI path and preset offline package information.
           NSString *presetApplistPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPresetApps.bundle/h5_json.json"] ofType:nil];
           NSString *appPackagePath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPresetApps.bundle"] ofType:nil];
           NSString *pluginsJsapisPath = [[NSBundle mainBundle] pathForResource:[NSString stringWithFormat:@"DemoCustomPlugins.bundle/Poseidon-UserDefine-Extra-Config.plist"] ofType:nil];
           [MPNebulaAdapterInterface initNebulaWithCustomPresetApplistPath:presetApplistPath customPresetAppPackagePath:appPackagePath customPluginsJsapisPath:pluginsJsapisPath]
       }

Pendaftaran melalui kode

Alih-alih menggunakan file Plist, Anda dapat mendaftarkan JSAPI kustom dengan langsung memanggil metode antarmuka yang disediakan oleh container Nebula.

1. Untuk informasi tentang cara membuat plugin baru, lihat dokumen Custom plugins.

2. Implementasikan metode addJSApis dalam plugin.

    - (void)addJSApis
    {
        [super addJSApis];
   
        // Register the JSAPI using code.
        PSDJsApi *jsApi4DemoTest2 = [PSDJsApi jsApi:@"demoTest2"
                                              handler:^(NSDictionary *data, PSDContext *context, PSDJsApiResponseCallbackBlock responseCallbackBlock) {
                                                  responseCallbackBlock(@{@"result":@"Processing result from native call by jsapi-demoTest2"});
                                              }
                                          checkParams:NO
                                            isPrivate:NO
                                                scope:self.scope];
        [self registerJsApi2Target:jsApi4DemoTest2];
    }

   • Tabel berikut mencantumkan parameter pendaftaran beserta deskripsinya.

     Parameter	Deskripsi
     jsApi	Nama antarmuka JSAPI yang dipanggil pada halaman HTML5.
     handler	Fungsi handler JSAPI. Fungsi ini sama dengan metode handler yang digunakan untuk pendaftaran melalui Plist.
     checkParams	Menentukan apakah parameter perlu diperiksa. Tetapkan nilai ini ke NO.
     isPrivate	Menentukan apakah JSAPI bersifat privat. Tetapkan nilai ini ke NO.
     scope	Cakupan. Tetapkan nilai ini ke self.scope.

Untuk contoh implementasi, lihat kelas MPPlugin4TitleView dalam contoh kode.

Langkah selanjutnya

1. Panggil JSAPI kustom dari halaman HTML5.

   

2. Tambahkan breakpoint di metode handler untuk memverifikasi parameter dari halaman HTML5.

   

3. Verifikasi hasil yang dikembalikan ke halaman HTML5.