mPaaS-技术干货 ｜jsAPI 方式下的导航栏的动态化修改

Posted 2021-11-05 枯木前头万木春

一、内置 jsAPI 修改导航栏

1. 修改导航栏标题

修改导航栏标题 API：setTitle

  // 设置标题
    getTitle() {
      AlipayJSBridge.call("setTitle", {
        title: "我是标题",
        //subtitle:"我是副标题"//目前看是没有什么用
      });
    },

2.修改导航栏背景颜色

修改设置导航栏背景色 setTitleColor API，参数 color、reset、resetTransparent。优先级：reset > color > resetTransparent。

// 修改导航栏背景色
    backgColor() {
      window.AlipayJSBridge &&
        AlipayJSBridge.call("setTitleColor", {
          color: 4115235,
          reset: false,//(可选，默认为false，true恢复默认导航栏颜色title等，color等于无效)
          // resetTransparent:true//设置导航栏透明
        });
    },

注：此JSAPI设置背景色后会影响导航标题和按钮颜色，需要在自定义插件中监听 kH5Event_Scene_NavigationBar_ChangeColor 并在监听事件中实现代码：

//禁止修改容器默认导航栏样式
[event stopPropagation];

3.其他修改

（1）显示标题栏加载 loading

showLoading(){
	AlipayJSBridge.call('showTitleLoading')
}

（2）隐藏标题栏加载 loading

hideLoading(){
	AlipayJSBridge.call('hideTitleLoading')
}

4.修改导航右按钮

setOptionMenu 此 API 有 reset、title、icontype、icon 这 4 个属性有一个即可，属性的优先级：reset > title > icontype > icon。

右侧按钮

theBtn(){
	AlipayJSBridge.call('setOptionMenu',{
		title:'按钮',
		redDot:'5',//-1 表示不显示，0表示显示红点 1-99 表示在红点上显示的数字
		color:'#9951ffee'
	})
},
forced(){
	AlipayJSBridge.call('showOptionMenu');//强制刷新显示
}

自定义图片

theImg(){
	AlipayJSBridge.call('setOptionMenu',{
		icon:'图片的路径',
		redDot:'6',//-1 表示不显示，0表示显示红点 1-99 表示在红点上显示的数字
	})
},
forced(){
	AlipayJSBridge.call('showOptionMenu');//强制刷新显示
}

隐藏右侧按钮

hideBtn(){
	AlipayJSBridge.call('hideOptionMenu');//隐藏右侧按钮
}

二、自定义 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:在 H5 页面中调用的 jsAPI 接口名。注意： 为防止自定义的 jsAPI 与容器内置 jsAPI 相互影响导致不可用，请给自定义 jsAPI 名加上前缀予以区分。
• name:创建的 jsAPI 的类名。

4. 自定义 jsAPI代码实现

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));	
	})
}

以上内容出自：微信公众号 mPaaS