技術乾貨 | jsAPI 方式下的導航欄的動態化修改

阿里雲開發者 發表於 2021-10-22
簡介:操作指導:通過 jsAPI 實現導航欄的動態修改。

 title=

很多開發同學在接入 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');

展示效果: title=

自定義 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 最新折扣資訊

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

 title=

版權宣告:本文內容由阿里雲實名註冊使用者自發貢獻,版權歸原作者所有,阿里雲開發者社群不擁有其著作權,亦不承擔相應法律責任。具體規則請檢視《阿里雲開發者社群使用者服務協議》和《阿里雲開發者社群智慧財產權保護指引》。如果您發現本社群中有涉嫌抄襲的內容,填寫侵權投訴表單進行舉報,一經查實,本社群將立刻刪除涉嫌侵權內容。