很多开发生在接入H5容器后会对其导航栏进行深度定制。除了Native的定制，还有很多使用jsAPI动态修改导航栏的场景。

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

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

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

修改导航栏标题API:setTitle

alipayjsbridge . call(& # 39；setTitle & # 39，{ 标题:& # 39；H5集标题& # 39；， })；alipayjsbridge . call(& # 39；setTitle & # 39，{ 副标题:& # 39；副标题& # 39；， })；alipayjsbridge . call(& # 39；setTitle & # 39，{ 标题:& # 39；标题& # 39；， 副标题:& # 39；副标题& # 39；， })；2。修改导航右键setOptionMenu。这个API有四个属性:重置、标题、图标类型和图标。属性的优先级是reset > title & gticontype & gt图标.

alipayjsbridge . call(& # 39；setOptionMenu & # 39，{ 标题:& # 39；按钮& # 39；， 红点:& # 39；5'// -1表示不显示，0表示显示红点，1-99表示红点上显示的数字 颜色:& # 39；# 9951咖啡& # 39；，//字体颜色，ARGB颜色值必须以# })开头； alipayjsbridge . call(& # 39；showOptionMenu & # 39);//强制刷新显示alipayjsbridge . call(& # 39；setOptionMenu & # 39，{ icon:& # 39；https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png'， 红点:& # 39；6'、// -1表示不显示，0表示显示红点，1-99表示红点上显示的数字 })； alipayjsbridge . call(& # 39；showOptionMenu & # 39);//强制刷新显示alipayjsbridge . call(& # 39；setOptionMenu & # 39、{ //从右向左显示 菜单:[{ 图标类型:& # 39；扫描& # 39；， }，{ icontype:& # 39；补充& # 39；， }]， override: true //是否保留默认的option menu })； alipayjsbridge . call(& # 39；showOptionMenu & # 39);//强制刷新显示alipayjsbridge . call(& # 39；hideOptionMenu & # 39);//隐藏右键3。修改导航栏背景色修改和设置导航栏背景色setTitleColor API，参数color，reset和resetTransparent。priority >:color & gt；重置透明度.

窗户。AlipayJSBridge & & AlipayJSBridge . call(& # 34；setTitleColor & # 34、{ color: 16118569、 reset: false//(可选，默认为false，true恢复默认导航栏颜色标题等。，且颜色等于无效) })；窗户。AlipayJSBridge & & AlipayJSBridge . call(& # 34；setTitleColor & # 34，{ reset: true //(可选，默认为false，true恢复默认导航栏颜色标题等。，颜色等于无效) })；alipayjsbridge . call(& # 34；setTitleColor & # 34，{ resetTransparent: true //设置导航栏透明度 })；注意:设置这个jsAPI的背景颜色会影响导航标题和按钮颜色。需要在自定义插件中监控KH 5 event _ scene _ navigation bar _ change color，并在监控事件中实现代码:

//禁止修改容器的默认导航栏样式 [事件停止传播]；4。其他修改(1)显示标题栏加载alipayjsbridge . call(& # 39；showTitleLoading & # 39);(2)隐藏标题栏，加载alipayjsbridge . call(& # 39；hideTitleLoading & # 39);显示效果:

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

(1)创建jsAPI类:必须从PSDJsApiHandler基类继承。

(2)为了与容器默认提供的插件名称保持一致，创建的jsAPI类的名称以XXJsApi4开头，其中XX是自定义前缀。

(3)在。m文件，您需要重写方法-(void)处理程序:上下文:回调:。当这个jsAPI在H5前端被调用时，它将被转发到这个方法。

2.注册 jsAPI

(1)在用户定义的Plist文件中注册这个jsAPI。

(2)在jsAPI数组下注册上一步创建的jsAPI类。注册的jsApi是字典类型，包含以下两项，键分别是jsAPI和name。

名字

意义

支付插件

H5页面中调用的jsAPI接口的名称。注意:为了防止用户自定义的jsAPI和容器内置的jsAPI因相互影响而不可用，请在用户自定义的jsAPI名称前加前缀进行区分。

名字

创建的jsAPI的类名。

3。自定义jsAPI代码的实现(1)H5前端代码参考:

函数setNativeTitle(){ my _ jsapi _ call(& # 34；setNativeTitle & # 34，{ & # 39；标题& # 39；:'主题& # 39； })； } 函数my_jsapi_call(apiName，params) { window。AlipayJSBridge & & AlipayJSBridge . call(API name，params，function(data){ alert(& # 39；通话结果& # 39；+JSON . stringify(data))； })； }(2)本机代码参考:

- (void)handler:(NSDictionary *)数据上下文:(PSDContext *)上下文回调:(PSDJsApiResponseCallbackBlock)回调{ [超级handler:数据上下文:上下文回调:回调]； NSLog(@ & # 34；+++++++%@"，数据)； ns string * string = data[@ & # 34；标题& # 34；]; //获取当前H5容器vc，修改导航栏 yx H5 Web VC * VC =(yx H5 Web VC *)dtcontextget()。在VC中定制CurrentVisibleViewcontroller VC . bar view . title = string； }作者:阿里云mPaaS TAM团队(于雪杨蓉)

mPaaS 最新折扣资讯

【隐私合规检测天妃会员专享八折优惠】帮助客户防范监管处罚，通过应用市场审核和上市。点击了解更多信息。