Technical dry goods｜Dynamic modification of the navigation bar in jsAPI mode

Introduction to Operation Guide: Realize the dynamic modification of the navigation bar through jsAPI.

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

This article aims to introduce how to dynamically modify the navigation bar under jsAPI through the description of the actual scene and through jsAPI, for your reference and use by mPaaS Coder.

extended reading: technical dry goods | How to realize the customized development of the navigation bar under the Native page?

Built-in jsAPI to modify the navigation bar

1. Modify the title of the navigation bar

API to modify the title of the navigation bar: setTitle

AlipayJSBridge.call('setTitle', {
    title: 'H5设置标题',
 });

AlipayJSBridge.call('setTitle', {
   subtitle: '副标题',
});

AlipayJSBridge.call('setTitle', {
    title: '标题',
    subtitle: '副标题',
});

2. Modify the navigation right button

setOptionMenu This API has four attributes: reset, title, icontype, and icon. The priority of the attributes is: 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. Modify the background color of the navigation bar

Modify the setTitleColor API to set the background color of the navigation bar, the parameters color, reset, and resetTransparent. Priority 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 // 设置导航栏透明
});

Note: This jsAPI will affect the navigation title and button color after setting the background color. You need to monitor kH5Event\_Scene\_NavigationBar\_ChangeColor in the custom plug-in and implement the code in the listening event:

//禁止修改容器默认导航栏样式
[event stopPropagation];

4. Other modifications

(1) Display the title bar loading loading

AlipayJSBridge.call('showTitleLoading');

(2) Hide the title bar and load loading

AlipayJSBridge.call('hideTitleLoading');

Display effect:

Customize jsAPI to modify the navigation bar

1. Create a custom jsAPI

(1) Create a jsAPI class: it must be inherited from the PSDJsApiHandler base class.

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

(3) In the .m file, the method -(void)handler:context:callback: needs to be rewritten. 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 customized Plist file.

(2) Register the jsAPI class created in the previous step under the JsApis array. The registered jsAPI is a dictionary type, which contains the following two contents, and the keys are: jsApi and name.

name	meaning
jsAPI	The name of the jsAPI interface called in the H5 page. Note: In order to prevent the custom jsAPI from interacting with the built-in jsAPI of the container and causing it to be unavailable, please prefix the name of the custom 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':'主题'
    });
}
                
function my_jsapi_call(apiName,params) {
    window.AlipayJSBridge && AlipayJSBridge.call(apiName,params,function(data){
        alert('调用结果'+JSON.stringify(data));

    });
}

(2) Native end 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"];
    //获取当前H5容器vc，通过VC内自定义修改导航栏
    YXH5WebVC *vc = (YXH5WebVC *)DTContextGet().currentVisibleViewController;
    vc.barView.title = string;
}

Author of this article: Alibaba Cloud mPaaS TAM team (Yuxue Rongyang)

mPaaS latest discount information

[Privacy compliance test 20% off for Feitian members] Help customers prevent regulatory penalties and go on sale through the app market review. Click learn more

Copyright Statement: content of this article is contributed spontaneously by Alibaba Cloud real-name registered users, and the copyright belongs to the original author. The Alibaba Cloud Developer Community does not own its copyright and does not assume corresponding legal responsibilities. For specific rules, please refer to the "Alibaba Cloud Developer Community User Service Agreement" and the "Alibaba Cloud Developer Community Intellectual Property Protection Guidelines". If you find suspected plagiarism in this community, fill in the infringement complaint form to report it. Once verified, the community will immediately delete the suspected infringing content.