很多開發(fā)同學(xué)在接入 H5 容器后都會對容器的導(dǎo)航欄進行深度定制，除了 Native 的定制化之外，還有很多場景是使用到 jsAPI 的方式，通過 jsAPI 實現(xiàn)導(dǎo)航欄的動態(tài)修改。

本文旨在通過實際場景的描述，通過 jsAPI 的方式，介紹 jsAPI 下怎樣動態(tài)修改導(dǎo)航欄，供各位 mPaaS Coder 參考使用。

延伸閱讀：技術(shù)干貨 ｜ Native 頁面下如何實現(xiàn)導(dǎo)航欄的定制化開發(fā)？

內(nèi)置 jsAPI 修改導(dǎo)航欄

1.修改導(dǎo)航欄標題

修改導(dǎo)航欄標題API：setTitle

AlipayJSBridge.call('setTitle', {
    title: 'H5設(shè)置標題',
 });

AlipayJSBridge.call('setTitle', {
   subtitle: '副標題',
});

AlipayJSBridge.call('setTitle', {
    title: '標題',
    subtitle: '副標題',
});

2.修改導(dǎo)航右按鈕

setOptionMenu 此 API 有 reset、title、icontype、icon 這 4 個屬性有一個即可，屬性的優(yōu)先級：reset > title > icontype > icon。

AlipayJSBridge.call('setOptionMenu', {
  title : '按鈕',
  redDot : '5', // -1 表示不顯示，0 表示顯示紅點，1-99 表示在紅點上顯示的數(shù)字
  color : '#9951ffee', //字體顏色，必須以＃開始 ARGB 顏色值
});
AlipayJSBridge.call('showOptionMenu');//強制刷新顯示

AlipayJSBridge.call('setOptionMenu', {
  icon : 'https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',
  redDot : '6', // -1 表示不顯示，0 表示顯示紅點，1-99 表示在紅點上顯示的數(shù)字
});
AlipayJSBridge.call('showOptionMenu');//強制刷新顯示

AlipayJSBridge.call('setOptionMenu',{
    // 顯示時的順序為從右至左
      menus: [{
        icontype: 'scan',
      },{
          icontype: 'add',
      }],
      override: true // 在需要設(shè)置多個 option 的情況下，是否保留默認的 optionMenu
});
AlipayJSBridge.call('showOptionMenu');//強制刷新顯示

AlipayJSBridge.call('hideOptionMenu');//隱藏右側(cè)按鈕

3.修改導(dǎo)航欄背景色

修改設(shè)置導(dǎo)航欄背景色 setTitleColor API，參數(shù) color、reset、resetTransparent。優(yōu)先級 reset > color > resetTransparent。

window.AlipayJSBridge && AlipayJSBridge.call("setTitleColor", {
  color: 16118569,
  reset: false // （可選，默認為 false，true 恢復(fù)默認導(dǎo)航欄顏色title 等，color等于無效）
});

window.AlipayJSBridge && AlipayJSBridge.call("setTitleColor", {
  reset: true // （可選，默認為 false，true 恢復(fù)默認導(dǎo)航欄顏色title 等，color等于無效）
});

AlipayJSBridge.call("setTitleColor", {
 resetTransparent: true // 設(shè)置導(dǎo)航欄透明
});

注：此 jsAPI 設(shè)置背景色后會影響導(dǎo)航標題和按鈕顏色，需要在自定義插件中監(jiān)聽kH5Event_Scene_NavigationBar_ChangeColor 并在監(jiān)聽事件中實現(xiàn)代碼：

//禁止修改容器默認導(dǎo)航欄樣式
[event stopPropagation];

4.其他修改

（1）顯示標題欄加載 loading

AlipayJSBridge.call('showTitleLoading');

（2）隱藏標題欄加載 loading

AlipayJSBridge.call('hideTitleLoading');

展示效果：

自定義 jsAPI 修改導(dǎo)航欄

1.創(chuàng)建自定義 jsAPI

（1）創(chuàng)建 jsAPI 類：必須繼承自 PSDJsApiHandler 基類。

（2）為與容器默認提供的插件命名保持一致，創(chuàng)建的 jsAPI 類命名以 XXJsApi4 開頭，其中 XX 為自定義的前綴。

（3）在 .m文件中，需重寫方法 -(void)handler:context:callback:。當在 H5 前端調(diào)用此 jsAPI 時，會轉(zhuǎn)發(fā)到此方法。

2.注冊 jsAPI

（1）在自定義的 Plist 文件中注冊此 jsAPI。

（2）在 JsApis 數(shù)組下注冊上一步創(chuàng)建的 jsAPI 類，注冊的 jsAPI 是一個字典類型，包含以下兩項內(nèi)容，Key 分別為：jsApi 和 name。

3.自定義 jsAPI代碼實現(xiàn)

（1）H5 前端代碼參考：

function setNativeTitle() {
    my_jsapi_call("setNativeTitle",{
        'title':'主題'
    });
}

function my_jsapi_call(apiName,params) {
    window.AlipayJSBridge && AlipayJSBridge.call(apiName,params,function(data){
        alert('調(diào)用結(jié)果'+JSON.stringify(data));

    });
}

（2）原生端代碼參考：

- (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSDJsApiResponseCallbackBlock)callback {
    [super handler:data context:context callback:callback];
    NSLog(@"+++++++%@",data);
    NSString *string = data[@"title"];
    //獲取當前H5容器vc，通過VC內(nèi)自定義修改導(dǎo)航欄
    YXH5WebVC *vc = (YXH5WebVC *)DTContextGet().currentVisibleViewController;
    vc.barView.title = string;
}

本文作者：阿里云 mPaaS TAM 團隊（御雪 榮陽）

mPaaS 最新折扣資訊

【隱私合規(guī)檢測飛天會員八折專享】助力客戶防范監(jiān)管處罰及通過應(yīng)用市場審核上架。點擊了解更多