一.背景
金融级移动开发平台 mPaaS（Mobile PaaS）为 App 开发、测试、运营及运维提供云到端的一站式解决方案，能有效降低技术门槛、减少研发成本、提升开发效率，协助企业快速搭建稳定高质量的移动应用。其中很多业务在接入H5容器后都会对容器的导航栏进行深度定制，除了Native的定制化之外，还有很多场景是使用到jsapi的方式，通过jsapi实现导航栏的动态修改。本文旨在通过实际场景的描述，通过jsapi的方式，介绍jsapi下怎样动态修改导航栏，供业务参考使用。
二.内置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。
名称 |
含义 |
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;
}
