全部产品
云市场
云游戏

设置右上角按钮

更新时间:2020-08-07 20:02:27

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

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

setOptionMenu 接口的使用方法

  1. AlipayJSBridge.call('setOptionMenu', {
  2. title : '按钮', // 与 icon、icontype 三选一
  3. redDot : '-1', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字
  4. color : '#ff00ff00', // 必须以 # 开始 ARGB 颜色值
  5. });

代码示例

设置各种类型的右侧按钮:

  1. <h1>点击以下按钮看不同效果</h1>
  2. <a href="javascript:void(0)" class="btn button">单按钮</a>
  3. <a href="javascript:void(0)" class="btn icon">单图标</a>
  4. <a href="javascript:void(0)" class="btn menu">多菜单(9.9.3)</a>
  5. <a href="javascript:void(0)" class="btn reset">重置</a>
  6. <a href="javascript:void(0)" class="btn hide">隐藏</a>
  7. <a href="javascript:void(0)" class="btn show">显示</a>
  8. <script>
  9. function ready(callback) {
  10. // 如果 jsbridge 已经注入则直接调用
  11. if (window.AlipayJSBridge) {
  12. callback && callback();
  13. } else {
  14. // 如果没有注入则监听注入的事件
  15. document.addEventListener('AlipayJSBridgeReady', callback, false);
  16. }
  17. }
  18. ready(function(e) {
  19. document.querySelector('.button').addEventListener('click', function() {
  20. AlipayJSBridge.call('setOptionMenu', {
  21. title : '按钮',
  22. redDot : '5', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字
  23. color : '#ff00ff00', // 必须以#开始 ARGB 颜色值
  24. });
  25. AlipayJSBridge.call('showOptionMenu');
  26. });
  27. document.querySelector('.icon').addEventListener('click', function() {
  28. AlipayJSBridge.call('setOptionMenu', {
  29. icon : 'http://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png',
  30. redDot : '-1', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字
  31. });
  32. AlipayJSBridge.call('showOptionMenu');
  33. });
  34. document.querySelector('.menu').addEventListener('click', function() {
  35. AlipayJSBridge.call('setOptionMenu', {
  36. // 显示时的顺序为从右至左
  37. menus: [{
  38. icontype: 'scan',
  39. redDot: '-1', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字
  40. }, {
  41. icontype: 'user',
  42. redDot: '-1', // -1 表示不显示,0 表示显示红点,1-99 表示在红点上显示的数字
  43. }],
  44. override: true // 在需要设置多个 option 的情况下,是否保留默认的 optionMenu
  45. });
  46. // 必须强制调用一次以刷新界面
  47. AlipayJSBridge.call('showOptionMenu');
  48. });
  49. document.querySelector('.reset').addEventListener('click', function() {
  50. AlipayJSBridge.call('setOptionMenu', {
  51. reset: true,
  52. });
  53. AlipayJSBridge.call('showOptionMenu');
  54. });
  55. document.querySelector('.show').addEventListener('click', function() {
  56. AlipayJSBridge.call('showOptionMenu');
  57. });
  58. document.querySelector('.hide').addEventListener('click', function() {
  59. AlipayJSBridge.call('hideOptionMenu');
  60. });
  61. document.addEventListener('optionMenu', function(e) {
  62. alert(JSON.stringify(e.data));
  63. }, false);
  64. });
  65. </script>

API

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

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

入参

名称 类型 描述 必选 默认值
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 “”

注意事项

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