H5 容器組件提供以下能力：

• 豐富的內(nèi)置 JSAPI，實(shí)現(xiàn)例如頁面 push、pop、標(biāo)題設(shè)置等功能。更多信息，請參見 內(nèi)置 JSAPI。

• 支持用戶自定義 JSAPI 和插件功能，擴(kuò)展業(yè)務(wù)需求。

本文將結(jié)合 H5容器和離線包 Demo，自定義一個在 H5 頁面加載時，修改頁面導(dǎo)航欄的插件。

關(guān)于此任務(wù)

自定義一個 JSAPI 可以有以下兩種方式：

• Plist 注冊

• 代碼注冊

操作步驟

Plist 注冊

1. 創(chuàng)建 JSAPI 類：

   • 命名規(guī)范：為與容器默認(rèn)提供的插件命名保持一致，創(chuàng)建的 JSAPI 類命名以 XXJsApiHandler4 開頭，其中 XX 為自定義的前綴。

   • 基類：所有 JSAPI 均繼承自 PSDJsApiHandler。

   • 實(shí)現(xiàn)基礎(chǔ)方法：在 .m 文件中，需重寫方法 -(void)handler:context:callback:。當(dāng)在前端調(diào)用此 JSAPI 時，會轉(zhuǎn)發(fā)到此方法。

   • 該方法的參數(shù)含義如下：

     參數(shù)	描述
     data	H5 頁面調(diào)用此 JSAPI 時傳入的參數(shù)。
     context	當(dāng)前 H5 頁面的上下文，具體可參考 PSDContext.h。
     callback	調(diào)用此 JSAPI 完成后的回調(diào)方法，以字典方式傳遞調(diào)用結(jié)果到 H5 頁面。

     示例代碼如下：

       #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];
       // 打開系統(tǒng)短信
       NSURL *url = [NSURL URLWithString:@"sms://xxx"];
       BOOL reasult = [[UIApplication sharedApplication] openURL:url];
       callback(@{@"success":@(reasult)});
       }
       @end

2. 注冊 JSAPI。在自定義的 Plist 文件中注冊此 JSAPI。

   • 為統(tǒng)一管理自定義的 JSAPI 和 Plugin，新建一個 Plsit 文件，您可以直接下載此模板文件 DemoCustomPlugins.bundle.zip 并添加到工程中。

   • 在 JsApis 數(shù)組下注冊上一步創(chuàng)建的 JSAPI 類：

   • 注冊的 JSAPI 是一個字典類型，包含以下兩項內(nèi)容：

     名稱	描述
     jsApi	在 H5 頁面中調(diào)用的 JSAPI 接口名。 重要 為防止自定義的 JSAPI 與容器內(nèi)置 JSAPI 相互影響導(dǎo)致不可用，請給自定義 JSAPI 名加上前綴予以區(qū)分。
     name	創(chuàng)建的 JSAPI 的類名。

   • 同時需在初始化容器配置時，指定自定義的 Plist 文件的路徑。

     • 初始化 H5 容器，請參見 H5 容器快速開始。

     示例代碼如下：

       - (void)application:(UIApplication *)application beforeDidFinishLaunchingWithOptions:(NSDictionary *)launchOptions
       {  
           // 初始化容器
           // [MPNebulaAdapterInterface initNebula];
     
           // 自定義 JSAPI 路徑和預(yù)置離線包信息
           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]
       }

代碼注冊

除使用 Plist 方式自定義一個 JSAPI 外，容器也支持直接調(diào)用 Nebula 容器提供的接口方法注冊一個自定義的 JSAPI。

1. 參考 自定義插件 文檔，新建一個 Plugin。

2. 在 Plugin 中實(shí)現(xiàn) addJSApis 方法。

    - (void)addJSApis
    {
        [super addJSApis];
   
        // 代碼注冊 jsapi
        PSDJsApi *jsApi4DemoTest2 = [PSDJsApi jsApi:@"demoTest2"
                                              handler:^(NSDictionary *data, PSDContext *context, PSDJsApiResponseCallbackBlock responseCallbackBlock) {
                                                  responseCallbackBlock(@{@"result":@"jsapi-demoTest2調(diào)用 Native 的處理結(jié)果"});
                                              }
                                          checkParams:NO
                                            isPrivate:NO
                                                scope:self.scope];
        [self registerJsApi2Target:jsApi4DemoTest2];
    }

   • 下表列出注冊時各參數(shù)及其含義：

     參數(shù)	描述
     jsApi	在 H5 頁面中調(diào)用的 JSAPI 接口名。
     handler	JSAPI 處理函數(shù)，功能同 Plist 注冊方式中的 handler 方法。
     checkParams	是否檢查參數(shù)，請設(shè)置為 NO。
     isPrivate	是否私有 JSAPI，請設(shè)置為 NO。
     scope	作用域，請設(shè)置為 self.scope。

具體示例，請參考代碼示例中 MPPlugin4TitleView 類相關(guān)實(shí)現(xiàn)。

后續(xù)操作

1. 在 H5 頁面中調(diào)用自定義的 JSAPI。

   

2. 在 handler 方法中添加斷點(diǎn)，觀察 H5 頁面提供的參數(shù)是否符合預(yù)期。

   

3. 查看 H5 頁面返回的結(jié)果是否符合預(yù)期。