导航栏设置接口(TopBarUI)

描述

自定义设置Top Bar导航栏

调用方式

http://cmbls/TopBarUI?id=xx&right_btn_style=xx&left_btn_style=xx&title_style=xx&navigationBar_style=xx&hide=true

参数

参数说明
id功能标识
right_btn_style未设置:不做处理 ; null:主动清空右上角按钮 ; default:使用APP默认的“更多”菜单->消息/咨询/首页/ ; json字符串:通过json来设置菜单按钮
left_btn_style未设置:不做处理 ; null:主动清空左上角按钮 ; default:默认为返回按钮 ; json字符串:通过json来设置按钮,具体参见
title_style未设置/设置为default:显示网页的标题 (默认值);null:主动清空标题内容;json字符串(5.6.0以上版本支持):通过json来自定义定制标题
navigationBar_style未设置/设置为default:使用默认沉浸式 ; json字符串:通过json字来设置背景
hide值为true,表示隐藏导航栏(5.3.0版本以上支持此参数)
备注沉浸式悬浮样式的导航需要在打开页面前设置,目前有下面三种方式:
1、在菜单中添加属性:<Item ID="1.2" Title="转账" Icon="xxx.png" TopBarStyle=" immersive ">
2、普通URL增加参数:http://www.cmbchina.com?topBarStyle=immersive
3、functionjump中增加参数:http://cmbls/functionjump?action=gofuncid&funcid=100299&topBarStyle=immersive
设置right_btn_style/left_btn_style的json说明
[{
    "title": "功能1",
    "titleColor":"#123456",(设置文本颜色,7.0.0版本以上支持(7.0.0版本以上支持)
    "iconName": "iconName",
    "useOriginalColor ": "true",
    "showMode": "0",
    "actionType": "url",         //url类型,客户端自动区分cmbls和普通url
    "actionContent": "xxx",      //通过actionContent指定跳转的url
    "layout": "lr"               //layout指定按钮布局样式
},
{
    "actionType": "more",        //更多按钮由客户端固定样式
    "flagType": "messagePoint",
    "actionContent": [{          //通过actionContent指定下拉菜单内容
        "title": "功能2",
        "iconName": "iconName",
        "showMode": "1",
        "actionType": "callback",   //回调类型
        "actionContent": "xxxx"    //通过actionContent指定的js函数回调网页
},
    {
        "title": "功能3",
        "titleColor":"#123456",(设置文本颜色,7.0.0版本以上支持(7.0.0版本以上支持)
        "iconName": "iconName",
        "useOriginalColor ": "true",
        "showMode": "2",
        "actionType": "callback",
        "actionContent": "xxxx"
}]
}]
特别注意:返回按钮设置如下:
[{
    "btnType": "goback",
    "actionType": " callback ", //返回按钮只支持callback类型
    "actionContent": "js函数" //回调的js函数
}]



参数说明
title按钮标题
iconName图标名称,若图片不存在则从服务器下载
showMode显示模式,有3种模式,0:只显示图标,图标不存在时显示标题;1:只显示标题;2:两者都显示,如果图标不存在客户端时只会显示标题
btnTypegoback:默认返回按钮(兼容旧版风格逻辑),点击后客户端重置为默认行为(actionContent将失效)。样式由客户端固定,且只在left_btn_style中支持。
actionType目前有3种类型.url: 链接类型,这里客户端自动识别是cmbls还是普通链接 ;more:更多类型的按钮;callback:回调类型
actionContent根据actionType的不同,actionContent表示不同的内容。
1. actionType = “url” 时actionContent表示跳转的url内容。目前只支持functionjump的跳转。
2. actionType = “more” 时actionContent表示下拉菜单内容。下拉菜单采用JSON数组表示,按钮的显示顺序和json数组的顺序保持一致,下拉菜单最多显示5个按钮。3. actionType = “callBack” 时actionContent表示回调的js函数名称
layout目前有2种类型: lr : 图标在左文字在右(默认值);tb: 图标在上文字在下。注意“more”类型按钮的子菜单不支持该参数,全部固定图标在左文字在右
flagTypemessagePoint: 有招乎消息时显示红点;messageNumber:有招乎消息时显示消息数量
备注1、right_btn_style/left_btn_style设置菜单采用json数组表示,最多两个一级菜单(建议左边只设置一个按钮);
2、按钮的显示顺序和json数组的顺序保持一致;
3、左导航菜单从左往右排序,右导航菜单从右往左排序


设置title_style的json说明(5.6.0以上版本支持此设置)
{
    "text": "主标题",
    "color": "#123456",//可选字段,默认白色
    "subText": "副标题",//可选字段,用户需要显示两行标题的情况
    "subColor": "#123456"//可选字段,默认白色
    "callbackName":"menu"//目前暂不支持,新增字段,处理点击标题回调事件
}


设置navigationBar_style的json说明
{
    "color": " #EEFFEE "//可选字段,自定义背景颜色,如不设置则默认为APP预设颜色
}

color   非悬浮样式时有效,此时可以自行设置导航栏背景颜色

双行标题逻辑说明

1、如果页面没有调用topbarUI接口设置标题栏title,则从取网页title作为单行标题,按照18号字体显示,超出显示区域,显示...

2、如果页面调用topbarUI接口指定了title_style且title_style为default,按照第1点处理。

3、如果页面调用topbarUI接口指定了title_style且只指定了主标题,副标题为空,则取主标题作为单行标题,按照18号字体显示,超过显示区域,显示...

4、如果页面调用topbarUI接口指定了title_style指定了主标题和副标题,则按照原双行标题的显示逻辑处理:
a.10个字以内使用14号字体, 超出显示区域,显示...
b.超过10个字使用12号字体,超出显示区域,显示...

多次调用TopbarUI接口逻辑

1、在当前窗口,页面未跳转,非首次调用TopbarUI接口时,默认保留先前调用TopbarUI接口通过left_btn_style、right_btn_style、title_style、navigationBar_style字段指定的效果,除非在当次调用时对上述字段重新指定。

2、在当前窗口,页面发生跳转后,默认保留先前调用TopbarUI接口通过left_btn_style、right_btn_style、navigationBar_style字段指定的效果,若需要取消这些效果需要重新调用TopbarUI接口。

3、在当前窗口,页面发生跳转后,不保留先前通过title_style字段指定的效果,将进行重置,即将获取当前页面的标题进行设置。需要再次调用TopBarUI接口,才能对title_style进行重新设置。

4、如果通过hide字段或showtopbar字段对标题栏进行了隐藏,先前调用TopbarUI接口产生的所有效果都将清除,后续再次调用TopbarUI接口时,未设置或设置成default的字段都将使对应的区域设置成默认效果,默认效果遵从现有规范。

5、特别说明一下:对于btntype=goback类型的left_btn_style,首次调用TopbarUI接口设置了该类型按钮,如果用户未点击过,则遵从第1、2条规则,继续保留效果,如果用户点击后,将重置为默认效果。


返回调用接口

CMBLS.TopBarUI.successCallback(id,message)

CMBLS.TopBarUI.failCallback(id,message)

返回值

成功返回

<Response>
    <StatusCode>0</StatusCode>//0:设置成功,1:设置失败
    <immersiveFull>false</immersiveFull>//部分Android系统版本可能沉浸式导航栏并不能顶到信号栏顶部,此时会额外返回该字段标识,此时页面可根据此标志自行适配高度
    <Message>xxx</Message>
    … …
</Response>


失败返回

<Response>
    <StatusCode>非0数字</StatusCode> //1:参数为空;2参数值非法3.其他系统错误
    <Message>xxx</Message>
    … …
</Response>


调用实例

http://cmbls/TopBarUI?id=xx&right_btn_style=%5B%7B%22title%22%3A%20%22%E6%9B%B4%E5%A4%9A%22%2C%22iconName%22%3A%20%22more_btn%22%2C%22showMode%22%3A%20%220%22%2C%22actionType%22%3A%20%22more%22%2C%22flagType%22%3A%20%22messagePoint%22%2C%22actionContent%22%3A%20%5B%7B%22title%22%3A%20%22%E9%A6%96%E9%A1%B5%22%2C%22iconName%22%3A%20%22popmenu_home%22%2C%22showMode%22%3A%20%222%22%2C%22actionType%22%3A%20%22callback%22%2C%22actionContent%22%3A%20%22http%3A%2F%2FCMBLS%2FFunctionJump%3Faction%3Dgochannel%26channelname%3DHome%22%7D%2C%7B%22title%22%3A%20%22%E6%B6%88%E6%81%AF%22%2C%22iconName%22%3A%20%22popmenu_message%22%2C%22showMode%22%3A%20%222%22%2C%22actionType%22%3A%20%22callback%22%2C%22actionContent%22%3A%20%22cmbmobilebank%3A%2F%2Fcmbls%2Ffunctionjump%3Faction%3Dgofuncid%26funcid%3D102999%22%7D%5D%7D%2C%7B%22title%22%3A%20%22%E5%9B%9E%E6%97%A7%E7%89%88%22%2C%22iconName%22%3A%20%22AccVieChange3.png%22%2C%22showMode%22%3A%20%222%22%2C%22actionType%22%3A%20%22url%22%2C%22actionContent%22%3A%20%22http%3A%2F%2Fcmbls%2Ffunctionjump%3Faction%3Dgofuncid%26funcid%3D100002%26clean%3Dtrue%22%2C%22layout%22%3A%20%22tb%22%7D%5D

备注