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

入参

名称类型描述必选默认值版本
menusarray菜单列表,默认显示于容器默认菜单项的右上角,icon使用容器默认icon(五角星)。
name:表示菜单项显示内容,必须控制在4个字符(含)以内,否则容器会截断4个字显示(必须填写);
tag:表示菜单项的唯一标签(必须填写);
icon:可自定义icon,传入图片url(非必填);
当菜单被点击后,传入的值都会被返回;
当override为false时,用户自定义菜单个数必须小于5个。
Y
overridebool是否覆盖容器自带的菜单列表Nfalse
resetbool是否重置菜单到系统默认,当reset=true时,忽略其他参数Nfalse

出参

回调函数带入的参数result: {result}

名称类型描述版本
result.statusstring“Success”:添加菜单项成功