iOS 小程序自定义导航栏

自定义导航栏背景和标题

全局自定义导航栏背景和标题

如果您要全局自定义小程序所有页面默认导航栏背景和标题，则需要在 app.json 中修改 window 配置。

• 导航栏隐藏：您需要自定义 JSAPI 实现。

• 导航栏透明："transparentTitle": "always"。

• 导航栏渐变："transparentTitle": "auto"。

• 导航栏颜色："titleBarColor": "#f00"。

• 导航栏标题文案："defaultTitle": "Alert"。

• 导航栏标题颜色：在 H5 基类的 viewWillAppear 方法的 super 之中，修改当前页面 titleView 的样式。

  - (void)viewWillAppear:(BOOL)animated
  {
      [super viewWillAppear:animated];   
      ...
      BOOL isTinyApp = [NBUtils isTinyAppWithSession:self.psdSession];
      if (isTinyApp) {
          id<NBNavigationTitleViewProtocol> titleView = self.navigationItem.titleView;
          [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
          [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
      }
   }

• 导航栏标题图片："titleImage": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png"。

• 导航栏标题位置：请参考以下代码进行实现。

  - (NSDictionary *)nebulaCustomConfig
  {
      NSString* leftConfig = @"{\"enable\":true,\"appIdBlacklist\":[],\"appIdWhitelist\":[\".*\"]}";
      return @{@"h5_tinyAppTitleViewAlignLeftConfig" : leftConfig };
  }

自定义某一页面导航栏背景和标题

如果您要自定义小程序中某一页面的导航栏背景和标题，则需要在该页面的 .json 中配置。

• 导航栏隐藏：您需要自定义 JSAPI 实现。

• 导航栏透明："transparentTitle": "always"。

• 导航栏渐变："transparentTitle": "auto"。

• 导航栏颜色："titleBarColor": "#f00"。

• 导航栏标题文案："defaultTitle": "Alert"。

• 导航栏标题颜色：您需要自定义 JSAPI，在 JSAPI 中修改当前页面 titleView 的样式。

- (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSD JSAPI ResponseCallbackBlock)callback
{
    [super handler:data context:context callback:callback];

     // 可以通过data传递字体、颜色等  
    id<NBNavigationTitleViewProtocol> titleView = context.currentViewController.navigationItem.titleView;
    [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
    [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
}

• 导航栏标题图片："titleImage": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png"。

动态修改当前页面的导航栏背景和标题

如果您要动态修改当前页面的导航栏背景和标题，则需要调用 my.setNavigationBar 进行配置。

• 导航栏隐藏：您需要自定义 JSAPI 实现。

• 导航栏透明：不支持。

• 导航栏渐变：不支持。

• 导航栏颜色："backgroundColor": "#f00"。

• 导航栏标题文案："title": "新标题"。

• 导航栏标题颜色：您需要自定义 JSAPI，在 JSAPI 中修改当前页面 titleView 的样式。

  - (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSD JSAPI ResponseCallbackBlock)callback
  {
      [super handler:data context:context callback:callback];
  
       // 可以通过 data 传递字体、颜色等
      id<NBNavigationTitleViewProtocol> titleView = context.currentViewController.navigationItem.titleView;
      [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
      [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
  }

• 导航栏标题图片："image": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png"。

自定义导航栏返回按钮

如果您要全局修改返回按钮样式，则需要在 H5 基类的 viewWillAppear 方法的 super 之中，修改当前页面 leftBarButtonItem 样式。可修改的样式包含以下内容，您可以参考下方代码段以获得更多指导。

• 修改返回箭头和文案颜色

• 修改返回箭头样式和文字内容

• 隐藏返回箭头

• 隐藏返回文案

  // 修改左侧返回按钮样式
  AUBarButtonItem *backItem = self.navigationItem.leftBarButtonItem;
  if ([backItem isKindOfClass:[AUBarButtonItem class]]) {
      // 在默认返回按钮基础上，修改返回箭头和文案颜色
      backItem.backButtonColor = [UIColor greenColor];
      backItem.titleColor = [UIColor colorFromHexString:@"#00ff00"];
  
      // 修改返回箭头样式和文字内容
      // backItem.backButtonTitle = @"回退";
      // backItem.backButtonImage = [UIImage imageNamed:@"APCommonUI.bundle/add"];
  
      // 隐藏返回箭头
      // backItem.hideBackButtonImage = YES;
  
      // 隐藏返回文案：文案设置为透明，保留返回按钮的点击区域
      // backItem.titleColor = [UIColor clearColor];
  }

导航栏右侧设置和关闭按钮

全局修改右侧按钮图片和颜色

如果您要修改右侧按钮图片和颜色，则需要引入头文件 #import <TinyappService/TASUtils.h> 并进行如下配置。

• 修改关闭按钮颜色：[TASUtils sharedInstance].customItemColor = [UIColor redColor]。

• 修改关闭按钮图片：[TASUtils sharedInstance].customCloseImage = [UIImage imageNamed:@"xx"]。

• 显示分享按钮：[TASUtils sharedInstance].shoulShowSettingMenu = YES。

• 修改分享按钮图片：[TASUtils sharedInstance].customSettingImage = [UIImage imageNamed:@"xx"]。

• 修改分享按钮颜色：[TASUtils sharedInstance].customItemColor = [UIColor redColor]。

全局修改右侧按钮样式

如果您要全局修改右侧按钮样式，则需要在 H5 基类的 viewwillAppear 中，重写当前页面的 rightBarButtonItem。

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];   
    ...
    BOOL isTinyApp = [NBUtils isTinyAppWithSession:self.psdSession];
    if (isTinyApp) {
        self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"关闭" style:UIBarButtonItemStylePlain target:self action:@selector(onClickClose)];
    }
 }

- (void)onClickClose
{
    [TASUtils exitTinyApplication:self.appId];
}