setToolbarMenu 设置菜单项
优质
小牛编辑
140浏览
2023-12-01
Since 8.2
setToolbarMenu
自定义分享面板第二栏的工具栏内容。
注意:由于苹果的ATS限制,icon URL必须为https链接或base64,http链接会被忽略
使用方法
AlipayJSBridge.call('setToolbarMenu', {
menus: [
{
name: "字体",
tag: "H5MenuActionOfFont",
icon: "https://os.alipayobjects.com/rmsportal/SuHlTsUNSyJvRzn.png"
},
{
name: "菜单项2",
tag: "cm2"
},
{
name: "菜单项3",
tag: "cm3"
}
],
override: false
}, function() {
// do something
});
代码演示
设置工具栏菜单项列表
<button class="btn">override(false)</button>
<button class="btn">reset(false)</button>
<script>
function ready(callback) {
// 如果jsbridge已经注入则直接调用
if (window.AlipayJSBridge) {
callback && callback();
} else {
// 如果没有注入则监听注入的事件
document.addEventListener('AlipayJSBridgeReady', callback, false);
}
}
ready(function(e) {
var options = {
menus: [
{
name: "字体",
tag: "H5MenuActionOfFont",
icon: "https://os.alipayobjects.com/rmsportal/SuHlTsUNSyJvRzn.png"
},
{
name: "菜单项2",
tag: "cm2"
},
{
name: "菜单项3",
tag: "cm3"
}
],
override: false,
reset: false
};
document.querySelector('#J_setOverrideValue').addEventListener('click', function(e) {
options.override = !options.override;
e.target.innerText = 'override(' + options.override.toString() + ')';
updateOptions();
}, false);
document.querySelector('#J_setResetValue').addEventListener('click', function(e) {
options.reset = !options.reset;
e.target.innerText = 'reset(' + options.reset.toString() + ')';
updateOptions();
}, false);
function updateOptions() {
AlipayJSBridge.call('setToolbarMenu', options, function(result) {
alert(JSON.stringify(result));
});
}
updateOptions();
document.addEventListener('toolbarMenuClick', function(e) {
alert(JSON.stringify(e));
}, false);
});
</script>
查看演示 扫码查看 用支付宝扫码运行API
AlipayJSBridge.call('setToolbarMenu',{
menus: {
name, tag, icon
}, override, reset
})
入参
名称 | 类型 | 描述 | 必选 | 默认值 | 版本 |
---|---|---|---|---|---|
menus | array | 菜单列表,默认显示于容器默认菜单项的右上角,icon使用容器默认icon(五角星)。 name:表示菜单项显示内容,必须控制在4个字符(含)以内,否则容器会截断4个字显示(必须填写); tag:表示菜单项的唯一标签(必须填写); icon:可自定义icon,传入图片url(非必填); 当菜单被点击后,传入的值都会被返回; 当override为false时,用户自定义菜单个数必须小于5个。 | Y | ||
override | bool | 是否覆盖容器自带的菜单列表 | N | false | |
reset | bool | 是否重置菜单到系统默认,当reset=true时,忽略其他参数 | N | false |
出参
回调函数带入的参数result: {result}
名称 | 类型 | 描述 | 版本 |
---|---|---|---|
result.status | string | “Success”:添加菜单项成功 |