JSAPI

  • Since 8.0

    setOptionMenu

    设置标题栏右边的按钮属性。
    该接口仅负责设置,需要额外调用showOptionMenu保证该按钮的显示。

    注意:由于苹果的ATS限制,icon URL必须为https链接或base64,http链接会被忽略

    使用方法

    AlipayJSBridge.call('setOptionMenu', {
      title : '按钮',  // 与icon、icontype三选一
      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>
    

    API

    要注意的是有几个属性是优先级的:reset > title > icontype > icon, 这4个属性只需要有一个即可。

    AlipayJSBridge.call('setTitle',{
      title, icon, redDot, reset, color, override, menus, icontype
    })
    

    入参

    名称类型描述必选默认值版本
    titlestring右按钮文字Y
    iconstring右按钮图标url、base64(since 9.0)
    8.3及以前:iOS 40x40(周边不留白), Android 50x50(四边各透明留白5px)
    8.4及以后:两个平台统一使用40x40(周边不留白)
    Base64时,不要写“data:image/png;base64”前缀
    Y
    redDotstring红点数值N8.6
    resetbool重置到系统默认,当reset=true时,忽略其他参数Yfalse8.6
    colorstring文字颜色值N#ffffffff9.0
    overridebool在需要设置多个option的情况下,是否保留默认的optionMenuNfalse9.9
    menusarray设置多个按钮N[]9.9
    preventDefaultbool是否阻止默认的分享功能(默认是弹分享框)preventDefault=true会阻止默认的分享N[]9.9
    icontypestring根据图片类型加载容器预置图片,与title、icon三选一。
    注意: 只支持单个optionMenu变色。
    具体类型包含: user (账户)、filter (筛选器)、search (查找)、add (添加)、settings (设置)、scan (扫一扫)、info (信息)、help (帮助)、locate (定位)、more(更多)、mail(邮箱 10.0.8及以上)
    N9.9.3
    contentDescstring设置盲人模式阅读文案N10.0.18

    使用注意

    • setOptionMenu后如果效果不对,请调用一把showOptionMenu