很多开发同学在接入 H5 容器后都会对容器的导航栏进行深度定制，除了 Native 的定制化之外，还有很多场景是应用到 jsAPI 的形式，通过 jsAPI 实现导航栏的动静批改。
本文旨在通过理论场景的形容，通过 jsAPI 的形式，介绍 jsAPI 下怎么动静批改导航栏，供各位 mPaaS Coder 参考应用。
延长浏览：技术干货｜ 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。

名称	含意
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;}

本文作者：阿里云 mPaaS TAM 团队（御雪荣阳）

关于前端:技术干货-｜-jsAPI-方式下的导航栏的动态化修改