设置右上角按钮

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

说明

由于苹果的 ATS 限制,icon URL 必须为 HTTPS 链接或 Base64,而 HTTP 链接会被忽略。

setOptionMenu 接口的使用方法

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 说明

注意

设置 setOptionMenu 后,如果效果不对,请调用一次 showOptionMenu

reset、title、icontype、icon 这 4 个属性有一个即可,属性的优先级为:reset > title > icontype > icon。

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

入参

属性

类型

描述

必填

默认值

title

string

右按钮文字。

Y

“”

icon

string

右按钮图标 URL,base64(since 9.0)。

8.3 及以前版本:iOS 40x40(周边不留白), Android 50x50(四边各透明留白 5px)。

8.4 及以后版本:两个平台统一使用 40x40(周边不留白)。

Y

“”

redDot

string

红点数值。

N

“”

reset

bool

重置为系统默认,当 reset=true 时,忽略其他参数。

Y

false

color

string

文字颜色值。

N

“#FFFFFFFF”

override

bool

在需要设置多个 option 的情况下,是否保留默认的 optionMenu。

N

false

menus

array

设置多个按钮。

N

[ ]

preventDefault

bool

是否阻止默认的分享功能(默认是弹分享框)preventDefault=true 时,会阻止默认的分享。

N

[ ]

icontype

string

根据图片类型加载容器预置图片,与 title、icon 三选一。

注意

只支持单个 optionMenu 变色。

具体类型包含 user(账户)、filter(筛选器)、search(查找)、add(添加)、settings(设置)、scan(扫一扫)、info(信息)、help(帮助)、locate(定位)、more(更多)、mail(邮箱 10.0.8 及以上)。

N

“”

contentDesc

string

设置盲人模式来阅读文案。

N

“”

阿里云首页 移动开发平台 mPaaS 相关技术圈