setOptionMenu 设置右上角按钮

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

入参

使用注意

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