很多开发同学在接入 H5 容器后都会对容器的导航栏进行深度定制，除了 Native 的定制化之外，还有很多场景是使用到 jsAPI 的方式，通过 jsAPI 实现导航栏的动态修改。

本文旨在通过实际场景的描述，通过 jsAPI 的方式，介绍 jsAPI 下怎样动态修改导航栏，供各位 mPaaS Coder 参考使用。

（福利推荐：阿里云、腾讯云、华为云服务器最新限时优惠活动，云服务器1核2G仅88元/年、2核4G仅698元/3年，点击这里立即抢购>>>）

延伸阅读：技术干货 ｜ 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。

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 最新折扣资讯

【隐私合规检测飞天会员八折专享】助力客户防范监管处罚及通过应用市场审核上架。点击了解更多

你还在原价购买阿里云、腾讯云、华为云、天翼云产品？那就亏大啦！现在申请成为四大品牌云厂商VIP用户，可以3折优惠价购买云服务器等云产品，并且可享四大云服务商产品终身VIP优惠价，还等什么？赶紧点击下面对应链接免费申请VIP客户吧：

1、点击这里立即申请成为腾讯云VIP客户

2、点击这里立即注册成为天翼云VIP客户

3、点击这里立即申请成为华为云VIP客户

4、点击这里立享阿里云产品终身VIP优惠价

喜欢 (0)赏

[[email protected]]

分享 (0)