簡介：操作指導：通過 jsAPI 實現導航欄的動態修改。

很多開發同學在接入 H5 容器后都會對容器的導航欄進行深度定制，除了 Native 的定制化之外，還有很多場景是使用到 jsAPI 的方式，通過 jsAPI 實現導航欄的動態修改。

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

延伸閱讀：技術干貨 ｜ Native 頁面下如何實現導航欄的定制化開發？

內置 jsAPI 修改導航欄

1.修改導航欄標題

修改導航欄標題API：setTitle

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

2.修改導航右按鈕

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

AlipayJSBridge.call('setOptionMenu', {title : '按鈕',redDot : '5', // -1 表示不顯示，0 表示顯示紅點，1-99 表示在紅點上顯示的數字color : '#9951ffee', //字體顏色，必須以＃開始 ARGB 顏色值 }); AlipayJSBridge.call('showOptionMenu');//強制刷新顯示 AlipayJSBridge.call('setOptionMenu', {icon : 'https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',redDot : '6', // -1 表示不顯示，0 表示顯示紅點，1-99 表示在紅點上顯示的數字 }); AlipayJSBridge.call('showOptionMenu');//強制刷新顯示 AlipayJSBridge.call('setOptionMenu',{// 顯示時的順序為從右至左menus: [{icontype: 'scan',},{icontype: 'add',}],override: true // 在需要設置多個 option 的情況下，是否保留默認的 optionMenu }); AlipayJSBridge.call('showOptionMenu');//強制刷新顯示 AlipayJSBridge.call('hideOptionMenu');//隱藏右側按鈕

3.修改導航欄背景色

修改設置導航欄背景色 setTitleColor API，參數 color、reset、resetTransparent。優先級 reset > color > resetTransparent。

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

注：此 jsAPI 設置背景色后會影響導航標題和按鈕顏色，需要在自定義插件中監聽kH5Event_Scene_NavigationBar_ChangeColor 并在監聽事件中實現代碼：

//禁止修改容器默認導航欄樣式 [event stopPropagation];

4.其他修改

（1）顯示標題欄加載 loading

AlipayJSBridge.call('showTitleLoading');

（2）隱藏標題欄加載 loading

AlipayJSBridge.call('hideTitleLoading');

展示效果：

自定義 jsAPI 修改導航欄

1.創建自定義 jsAPI

（1）創建 jsAPI 類：必須繼承自 PSDJsApiHandler 基類。

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

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

2.注冊 jsAPI

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

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

名稱含義

jsAPI	在 H5 頁面中調用的 jsAPI 接口名。注意： 為防止自定義的 jsAPI 與容器內置 jsAPI 相互影響導致不可用，請給自定義 jsAPI 名加上前綴予以區分。
name	創建的 jsAPI 的類名。

3.自定義 jsAPI代碼實現

（1）H5 前端代碼參考：

function setNativeTitle() {my_jsapi_call("setNativeTitle",{'title':'主題'}); }function my_jsapi_call(apiName,params) {window.AlipayJSBridge && AlipayJSBridge.call(apiName,params,function(data){alert('調用結果'+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內自定義修改導航欄YXH5WebVC *vc = (YXH5WebVC *)DTContextGet().currentVisibleViewController;vc.barView.title = string; }

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

mPaaS 最新折扣資訊

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

原文鏈接：https://developer.aliyun.com/article/794168?

版權聲明：本文內容由阿里云實名注冊用戶自發貢獻，版權歸原作者所有，阿里云開發者社區不擁有其著作權，亦不承擔相應法律責任。具體規則請查看《阿里云開發者社區用戶服務協議》和《阿里云開發者社區知識產權保護指引》。如果您發現本社區中有涉嫌抄襲的內容，填寫侵權投訴表單進行舉報，一經查實，本社區將立刻刪除涉嫌侵權內容。 與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的技术干货 ｜ jsAPI 方式下的导航栏的动态化修改的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。