简介：操作指导：通过jsAPI实现导航栏的动态修改。很多开发同学在接入H5容器后，都会深度定制容器的导航栏。除了Native的自定义，还有很多场景使用jsAPI，通过jsAPI实现导航栏的动态修改。本文旨在通过实际场景的描述，通过jsAPI介绍如何动态修改jsAPI下的导航栏，供mPaaS码友参考使用。延伸阅读：技术干货｜如何实现Native页面下导航栏的定制化开发？内置jsAPI修改导航栏1.修改导航栏标题修改导航栏标题API：setTitleAlipayJSBridge.call('setTitle',{title:'H5settitle',});AlipayJSBridge.call('setTitle',{subtitle:'subtitle',});AlipayJSBridge.call('setTitle',{title:'title',subtitle:'subtitle',});2.修改导航右键setOptionMenu这个API有4个属性：reset,title,icontype,icon只有一个，属性的优先级：reset>title>icontype>icon。AlipayJSBridge.call('setOptionMenu',{title:'button',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//当需要设置多个选项时，是否保持默认optionMenu});AlipayJSBridge.call('showOptionMenu');//强制刷新显示AlipayJSBridge.call('hideOptionMenu');//隐藏右键3.修改导航栏背景色修改setTitleColorAPI，用于设置导航栏的背景色导航栏，带有参数color、reset和resetTransparent。优先级重置>颜色>重置透明。window.AlipayJSBridge&&AlipayJSBridge.call("setTitleColor",{color:16118569,reset:false//（可选，默认为false，true恢复默认导航栏颜色标题等，颜色等于无效）});window.AlipayJSBridge&&AlipayJSBridge.call("setTitleColor",{reset:true//（可选，默认为false，true恢复默认导航栏颜色标题等，颜色等于无效）});AlipayJSBridge.call("setTitleColor",{resetTransparent:true//设置导航栏透明});注意：设置此jsAPI的背景色后，会影响导航标题和按钮的颜色。需要在自定义插件中监听kH5Event_Scene_NavigationBar_ChangeColor，在监听事件中实现代码：`//禁止修改容器Style的默认导航栏[eventstopPropagation];`4。其他修改（1）显示标题栏加载loadingAlipayJSBridge.call('showTitleLoading');(2)隐藏标题栏加载loadingAlipayJSBridge.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)将上一步创建的jsAPI类注册到JsApis数组下。注册的jsAPI为字典类型，包括以下两项，Key为：jsApi和name。3、自定义jsAPI代码实现（一）H5前端代码参考：functionsetNativeTitle(){my_jsapi_call("setNativeTitle",{'title':'theme'});}functionmy_jsapi_call(apiName,params){window.AlipayJSBridge&&AlipayJSBridge.call(apiName,params,function(data){alert('callresult'+JSON.stringify(data));});}(2)原生代码参考：-(void)handler:(NSDictionary*)数据上下文：（PSDContext*）上下文回调：（PSDJsApiResponseCallbackBlock）回调{[超级处理程序：数据上下文：上下文回调：回调];NSLog(@"+++++++%@",数据);NSString*string=data[@"title"];//获取当前H5容器vc，在VC中自定义修改导航栏YXH5WebVC*vc=(YXH5WebVC*)DTContextGet().currentVisibleViewController;vc.barView.title=string;}本文作者：阿里云mPaaSTAM团队（雨雪荣阳）原文链接本文为阿里云原创内容，未经允许不得转载。
