内置jsAPI修改导航栏标题API、title、icon这4个属性有一个即可

很多开发者在接入H5容器后会深度定制容器的导航栏。除了自定义之外，还有很多使用jsAPI通过jsAPI动态修改导航栏的场景。

本文旨在通过对实际场景的描述，通过jsAPI来介绍如何在jsAPI下动态修改导航栏，供mPaaS Coder参考。

延伸阅读：技术干货 | 如何实现页面下导航栏的定制化开发？

内置jsAPI修改导航栏1.修改导航栏标题

修改导航栏标题API：

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

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

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

2.修改导航右键

这个API有reset、title、icon 4个属性，一个就够了。属性的优先级为：reset > title > > 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.修改导航栏背景颜色

修改设置导航栏背景颜色、参数颜色、reset、. 优先重置 > 颜色 > 。

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设置背景色后会影响导航标题和按钮颜色导航样式的自定义导航样式的自定义，需要在自定义插件中监听并在监听事件中实现代码：

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

4.其他修改（1）显示标题栏加载

AlipayJSBridge.call('showTitleLoading');

(2）隐藏标题栏加载

AlipayJSBridge.call('hideTitleLoading');

结果显示：

自定义jsAPI 修改导航栏1.创建自定义jsAPI

(1）创建 jsAPI 类：必须继承自基类。

(2） 为了与容器提供的默认插件名一致，创建的jsAPI类名以XX开头作为自定义前缀。

(3）.m文件中，需要重写方法-(void):::。在H5前端调用这个jsAPI时，会转发给这个方法。

2.注册jsAPI

（1）在自定义 Plist 文件中注册此 jsAPI。

(2）在数组下注册上一步创建的jsAPI类。注册的jsAPI为字典类型，包含以下两个内容，key为：jsApi和name。

姓名

意义

jsAPI

H5页面调用的jsAPI接口名称。注意：为防止自定义jsAPI与容器内置jsAPI交互，导致不可用，请在自定义jsAPI名称前加前缀区分。

姓名

创建的 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最新优惠信息

【隐私合规测试飞天会员享20折】帮助客户防范监管处罚，通过应用市场审核。点击了解更多