概念

胶囊按钮即小程序页面导航栏右侧的按钮，包含···菜单按钮和X关闭按钮，如下图所示：

目前胶囊按钮的样式不支持修改，框架默认会根据导航栏的颜色自适应胶囊按钮的颜色，不过您可以隐藏默认的胶囊按钮，然后自定义实现

胶囊按钮 - 图1

自定义菜单项

点击胶囊按钮左侧的···按钮会弹出ActionSheet菜单，菜单中的按钮支持自定义，其中上部分的按钮是在小程序中定义，下部分的按钮在宿主中定义，取消按钮为框架默认添加，如下图所示：

胶囊按钮 - 图2

宿主中添加菜单按钮

宿主添加的菜单按钮在每个页面都会显示

iOS 添加方法

  1. // 创建按钮
  2. DCUniMPMenuActionSheetItem *item1 = [[DCUniMPMenuActionSheetItem alloc] initWithTitle:@"Item 1" identifier:@"item1"];
  3. DCUniMPMenuActionSheetItem *item2 = [[DCUniMPMenuActionSheetItem alloc] initWithTitle:@"Item 2" identifier:@"item2"];
  4. // 添加到全局配置
  5. [DCUniMPSDKEngine setDefaultMenuItems:@[item1,item2]];

点击按钮会回调 DCUniMPSDKEngineDelegate协议的 defaultMenuItemClicked:方法

  1. /// 监听菜单按钮点击
  2. - (void)defaultMenuItemClicked:(NSString *)identifier {
  3.     NSLog(@"标识为 %@ 的 item 被点击了", identifier);
  5.     // 向小程序发送消息
  6.     if ([identifier isEqualToString:@"SendUniMPEvent"]) {
  7.         [DCUniMPSDKEngine sendUniMPEvent:@"NativeEvent" data:@{@"msg":@"native message"}];
  8.     }
  9. }

Android 添加方法

DCSDKInitConfig设置setMenuActionSheetItems实现全局菜单按钮设置.

  1. MenuActionSheetItem item = new MenuActionSheetItem("关于", "gy");
  2. List<MenuActionSheetItem> sheetItems = new ArrayList<>();
  3. sheetItems.add(item);
  4. DCSDKInitConfig config = new DCSDKInitConfig.Builder()
  5.     // 添加到全局配置
  6.     .setMenuActionSheetItems(sheetItems)
  7.     .build();

设置全局菜单按钮点击事件监听

  1. DCUniMPSDK.getInstance().setDefMenuButtonClickCallBack(new DCUniMPSDK.IMenuButtonClickCallBack() {
  2.     @Override
  3.     public void onClick(String appid, String id) {
  4.         switch (id) {
  5.             case "gy":{
  6.                 Log.e("unimp", "点击了关于" + appid);
  7.                 break;
  8.             }
  9.         }
  10.     }
  11. });

小程序中添加菜单按钮

在小程序中可以单独为某个页面添加菜单按钮，打开pages.json，在页面的 style->app-plus->titleNView->buttons节点下添加配置，pages.json 的更多配置说明请参考此 文档

  1. {
  2.     "pages": [ 
  3.         {
  4.             "path": "pages/tabBar/component/component",
  5.             "style": {
  6.                 "navigationBarTitleText": "内置组件",
  7.                 "app-plus": {
  8.                     "bounce": "vertical",
  9.                     "titleNView": {
  10.                         "buttons": [{
  11.                             "text": "\ue534",  
  12.                             "title":"关于",       //注意：title 为 uni小程序中显示的按钮标题，如果没有设置则显示 text 字段
  13.                             "fontSrc": "/static/uni.ttf",
  14.                             "fontSize": "22px",
  15.                             "color": "#FFFFFF"
  16.                         }]
  17.                     }
  18.                 }
  19.             }
  20.         },
  21.         ...
  22.     ],
  23.     ...
  24. }

按钮点击后会在小程序中触发onNavigationBarButtonTap(e)方法

  1. // 监听按钮点击事件
  2. onNavigationBarButtonTap(e) {
  3.     console.log(e)
  4. }

隐藏胶囊按钮

uni小程序默认会显示胶囊按钮，您可以将其隐藏（目前只支持全局隐藏，不支持单个页面隐藏）

iOS 隐藏胶囊按钮

  1. [DCUniMPSDKEngine setMenuButtonHidden:YES];

Android 隐藏胶囊按钮

DCSDKInitConfig设置setCapsule实现隐藏

  1. DCSDKInitConfig config = new DCSDKInitConfig.Builder()
  2.     .setCapsule(false).build();

需要注意，如果您隐藏了胶囊按钮，原生中添加的菜单按钮就会无效，小程序中添加的菜单按钮会显示到页面导航栏上并且显示的是text字段配置信息（和在HX内置基座运行效果一样）如下图所示

胶囊按钮 - 图3

发现错误？想参与编辑？在 GitHub 上编辑此页面！