Introduction: Operation Guide: dynamically modify the navigation bar through jsAPI.

After accessing the H5 container, many development students will deeply customize the navigation bar of the container. In addition to the customization of Native, there are many scenarios that use jsAPI to dynamically modify the navigation bar through jsAPI.

This paper aims to introduce how to dynamically modify the navigation bar under jsAPI through the description of the actual scene and the way of jsAPI for your mPaaS Coder's reference.

Extended reading: How to realize the customized development of the navigation bar under the technology dry goods ｜ Native page?

Modify navigation bar with built-in jsAPI

1. Modify the navigation bar title

Modify navigation bar Title API: setTitle

AlipayJSBridge.call('setTitle', {
    title: 'H5 Set title',
 });

AlipayJSBridge.call('setTitle', {
   subtitle: 'Subtitle',
});

AlipayJSBridge.call('setTitle', {
    title: 'title',
    subtitle: 'Subtitle',
});

2. Modify the right navigation button

setOptionMenu this API has four attributes: reset, title, icontype and icon. You can have one attribute. The priority of the attribute is: reset > title > icontype > icon.

AlipayJSBridge.call('setOptionMenu', {
  title : 'Button',
  redDot : '5', // -1 means not to display, 0 means to display the red dot, and 1-99 means the number displayed on the red dot
  color : '#9951fee ', / / font color. ARGB color value must start with ＃
});
AlipayJSBridge.call('showOptionMenu');//Force refresh display

AlipayJSBridge.call('setOptionMenu', {
  icon : 'https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',
  redDot : '6', // -1 means not to display, 0 means to display the red dot, and 1-99 means the number displayed on the red dot
});
AlipayJSBridge.call('showOptionMenu');//Force refresh display

AlipayJSBridge.call('setOptionMenu',{
    // The order of display is from right to left
      menus: [{
        icontype: 'scan',
      },{
          icontype: 'add',
      }],
      override: true // If multiple options need to be set, do you want to keep the default optionMenu
});
AlipayJSBridge.call('showOptionMenu');//Force refresh display

AlipayJSBridge.call('hideOptionMenu');//Hide right button

3. Modify the background color of the navigation bar

Modify and set the setTitleColor API for the background color of the navigation bar, and the parameters color, reset, resetTransparent. Priority reset > Color > resetTransparent.

window.AlipayJSBridge && AlipayJSBridge.call("setTitleColor", {
  color: 16118569,
  reset: false // (optional, the default is false, true restores the default navigation bar color, title, etc., and color equals invalid)
});

window.AlipayJSBridge && AlipayJSBridge.call("setTitleColor", {
  reset: true // (optional, the default is false, true restores the default navigation bar color, title, etc., and color equals invalid)
});

AlipayJSBridge.call("setTitleColor", {
 resetTransparent: true // Set navigation bar transparency
});

Note: setting the background color of this jsAPI will affect the navigation title and button color. You need to listen to kh5event in the custom plug-in_ Scene_ NavigationBar_ Changecolor and implement the code in the listening event:

//Disable modifying the container default navigation bar style
[event stopPropagation];

4. Other modifications

(1) Show title bar loading

AlipayJSBridge.call('showTitleLoading');

(2) Hide title block loading

AlipayJSBridge.call('hideTitleLoading');

Display effect:

Customize the jsAPI to modify the navigation bar

1. Create a custom jsAPI

(1) Create jsAPI class: must inherit from PSDJsApiHandler base class.

(2) To keep consistent with the plug-in name provided by the container by default, the name of the created jsAPI class starts with XXJsApi4, where XX is the custom prefix.

(3) In the. m file, override the method - (void)handler:context:callback:. When this jsAPI is called on the H5 front end, it will be forwarded to this method.

2. Register jsAPI

(1) Register this jsAPI in the custom Plist file.

(2) Register the jsApi class created in the previous step under the JsApis array. The registered jsApi is a dictionary type that contains the following two items: jsApi and name.

name	meaning
jsAPI	The name of the jsAPI interface invoked in the H5 page. Note: to prevent the user-defined jsapi from being unavailable due to interaction with the built-in jsapi of the container, please prefix the name of the user-defined jsapi to distinguish it.
name	The class name of the created jsAPI.

3. Custom jsAPI code implementation

(1) H5 front end code reference:

function setNativeTitle() {
    my_jsapi_call("setNativeTitle",{
        'title':'theme'
    });
}
                
function my_jsapi_call(apiName,params) {
    window.AlipayJSBridge && AlipayJSBridge.call(apiName,params,function(data){
        alert('Call result'+JSON.stringify(data));

    });
}

(2) Native code reference:

- (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSDJsApiResponseCallbackBlock)callback {
    [super handler:data context:context callback:callback];
    NSLog(@"+++++++%@",data);
    NSString *string = data[@"title"];
    //Get the current H5 container VC and modify the navigation bar through customization in VC
    YXH5WebVC *vc = (YXH5WebVC *)DTContextGet().currentVisibleViewController;
    vc.barView.title = string;
}

Author: Alibaba cloud mPaaS TAM team (Yuxue Rongyang)

Latest discount information of mPaaS

[20% discount for Feitian members of privacy compliance testing] help customers prevent regulatory penalties and get on the shelves through application market audit. click Learn more

Original link: https://developer.aliyun.com/article/794168?

Copyright notice: the content of this article is spontaneously contributed by Alibaba cloud real name registered users. The copyright belongs to the original author. Alibaba cloud developer community does not own its copyright or bear corresponding legal liabilities. Please refer to Alibaba cloud developer community user service agreement and Alibaba cloud developer community intellectual property protection guidelines for specific rules. If you find any content suspected of plagiarism in the community, fill in the infringement complaint form to report. Once verified, the community will immediately delete the content suspected of infringement.