设置标题栏右边的按钮属性。
该接口仅负责设置,需要额外调用showOptionMenu保证该按钮的显示。
注意:由于苹果的ATS限制,icon URL必须为https链接或base64,http链接会被忽略
AlipayJSBridge.call('setOptionMenu', {
title : '按钮', // 与icon、icontype、iconfont、iconfont四选一
redDot : '-1', // -1表示不显示,0表示显示红点,1-99表示在红点上显示的数字
color : '#ff00ff00', // 必须以#开始ARGB颜色值
});
<h1>点击以下按钮看不同效果</h1>
<a href="javascript:void(0)" class="btn button">单按钮</a>
<a href="javascript:void(0)" class="btn icon">单图标</a>
<a href="javascript:void(0)" class="btn menu">多菜单(9.9.3)</a>
<a href="javascript:void(0)" class="btn reset">重置</a>
<a href="javascript:void(0)" class="btn hide">隐藏</a>
<a href="javascript:void(0)" class="btn show">显示</a>
<script>
function ready(callback) {
// 如果jsbridge已经注入则直接调用
if (window.AlipayJSBridge) {
callback && callback();
} else {
// 如果没有注入则监听注入的事件
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function(e) {
document.querySelector('.button').addEventListener('click', function() {
AlipayJSBridge.call('setOptionMenu', {
title : '按钮',
redDot : '5', // -1表示不显示,0表示显示红点,1-99表示在红点上显示的数字
color : '#ff00ff00', // 必须以#开始ARGB颜色值
});
AlipayJSBridge.call('showOptionMenu');
});
document.querySelector('.icon').addEventListener('click', function() {
AlipayJSBridge.call('setOptionMenu', {
icon : 'http://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',
redDot : '-1', // -1表示不显示,0表示显示红点,1-99表示在红点上显示的数字
});
AlipayJSBridge.call('showOptionMenu');
});
document.querySelector('.menu').addEventListener('click', function() {
AlipayJSBridge.call('setOptionMenu', {
// 显示的时候是从后往前显示的
menus: [{
icontype: 'scan',
redDot: '-1', // -1表示不显示,0表示显示红点,1-99表示在红点上显示的数字
}, {
icontype: 'user',
redDot: '-1', // -1表示不显示,0表示显示红点,1-99表示在红点上显示的数字
}],
override: true //在需要设置多个option的情况下,是否保留默认的optionMenu
});
// 必须强制调用一把刷新界面
AlipayJSBridge.call('showOptionMenu');
});
document.querySelector('.reset').addEventListener('click', function() {
AlipayJSBridge.call('setOptionMenu', {
reset: true,
});
AlipayJSBridge.call('showOptionMenu');
});
document.querySelector('.show').addEventListener('click', function() {
AlipayJSBridge.call('showOptionMenu');
});
document.querySelector('.hide').addEventListener('click', function() {
AlipayJSBridge.call('hideOptionMenu');
});
document.addEventListener('optionMenu', function(e) {
alert(JSON.stringify(e.data));
}, false);
});
</script>
要注意的是有几个属性是优先级的:reset > title > icontype > iconfont > icon, 这5个属性只需要有一个即可。
AlipayJSBridge.call('setTitle',{
title, icon, redDot, reset, color, override, menus, spmIds, icontype, iconfont
})
名称 | 类型 | 描述 | 必选 | 默认值 | 版本 |
---|---|---|---|---|---|
title | string | 右按钮文字 | Y | ||
icon | string | 右按钮图标url、base64(since 9.0) 8.3及以前:iOS 40x40(周边不留白), Android 50x50(四边各透明留白5px) 8.4及以后:两个平台统一使用40x40(周边不留白) Base64时,不要写“data:image/png;base64”前缀 | Y | ||
redDot | string | 红点数值 | N | 8.6 | |
reset | bool | 重置到系统默认,当reset=true时,忽略其他参数 | Y | false | 8.6 |
color | string | 文字颜色值 | N | #ffffffff | 9.0 |
override | bool | 在需要设置多个option的情况下,是否保留默认的optionMenu | N | false | 9.9 |
menus | array | 设置多个按钮 | N | [] | 9.9 |
spmIds | array | 设置按钮对应的spmId, 当设置多个时,与menus的元素顺序要对应 | N | [] | 10.1.95 |
preventDefault | bool | 是否阻止默认的分享功能(默认是弹分享框)preventDefault=true会阻止默认的分享 | N | [] | 9.9 |
icontype | string | 根据图片类型加载容器预置图片,与title、iconType四选一。 注意: 只支持单个optionMenu变色。 具体类型包含: user (账户)、filter (筛选器)、search (查找)、add (添加)、settings (设置)、scan (扫一扫)、info (信息)、help (帮助)、locate (定位)、more(更多)、mail(邮箱 10.0.8及以上) | N | 9.9.3 | |
iconfont | string | 根据类型加在支付宝端内预置图片,与title、icon、iconType四选一。 支持的类型见下地址,注意不要加上k前缀 http://alipay-rmsdeploy-image.cn-hangzhou.alipay.aliyun-inc.com/ucpsprod/ios_unicode.html | N | ICONFONT_MORE | 10.2.20 |
contentDesc | string | 设置盲人模式阅读文案 | N | 10.0.18 |
setOptionMenu
后如果效果不对,请调用一把showOptionMenu