Customize the navigation bar for an iOS mini program

Customize the navigation bar background and title

Globally customize the navigation bar background and title

To globally customize the default navigation bar background and title for all pages of a mini program, you can modify the window configuration in the app.json file.

• Hide the navigation bar: Implement a custom JSAPI.

• Make the navigation bar transparent: "transparentTitle": "always".

• Apply a gradient to the navigation bar: "transparentTitle": "auto".

• Set the navigation bar color: "titleBarColor": "#f00".

• The navigation bar title is set by "defaultTitle": "Alert".

• Set the navigation bar title color: In the super call of the viewWillAppear method in the H5 base class, you can modify the style of the titleView for the current page.

  - (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]];
      }
   }

• Set the navigation bar title image: "titleImage": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png".

• Set the navigation bar title position: Use the following code segment.

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

Customize the navigation bar background and title for a specific page

To customize the navigation bar background and title for a specific page in the mini program, you can configure it in the .json file for that page.

• Hide the navigation bar: Implement a custom JSAPI.

• Make the navigation bar transparent: "transparentTitle": "always".

• Apply a gradient to the navigation bar: "transparentTitle": "auto".

• Set the navigation bar color: "titleBarColor": "#f00".

• Navigation bar title: "defaultTitle": "Alert".

• Set the navigation bar title color: Implement a custom JSAPI. In the JSAPI, you can modify the style of the titleView for the current page.

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

     // Pass attributes such as font and color through data.
    id<NBNavigationTitleViewProtocol> titleView = context.currentViewController.navigationItem.titleView;
    [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
    [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
}

• Set the navigation bar title image: "titleImage": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png".

Dynamically modify the navigation bar background and title of the current page

To dynamically modify the navigation bar background and title of the current page, you can call the my.setNavigationBar method to configure them.

• Hide the navigation bar: Implement a custom JSAPI.

• Make the navigation bar transparent: Not supported.

• Apply a gradient to the navigation bar: Not supported.

• Set the navigation bar color: "backgroundColor": "#f00".

• Set the navigation bar title text: "title": "New Title".

• Set the navigation bar title color: Implement a custom JSAPI. In the JSAPI, you can modify the style of the titleView for the current page.

  - (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSD JSAPI ResponseCallbackBlock)callback
  {
      [super handler:data context:context callback:callback];
  
       // Pass attributes such as font and color through data.
      id<NBNavigationTitleViewProtocol> titleView = context.currentViewController.navigationItem.titleView;
      [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
      [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
  }

• Set the navigation bar title image: "image": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png".

Customize the Back button on the navigation bar

To globally modify the style of the Back button, you can modify the leftBarButtonItem style for the current page within the super call of the viewWillAppear method in the H5 base class. You can modify the styles listed below. For an example, see the following code segment.

• Modify the color of the back arrow and text

• Modify the style of the back arrow and the text content

• Hide the back arrow

• Hide the back text

  // Modify the style of the Back button on the left.
  AUBarButtonItem *backItem = self.navigationItem.leftBarButtonItem;
  if ([backItem isKindOfClass:[AUBarButtonItem class]]) {
      // Modify the color of the arrow and text for the default Back button.
      backItem.backButtonColor = [UIColor greenColor];
      backItem.titleColor = [UIColor colorFromHexString:@"#00ff00"];
  
      // Modify the style of the back arrow and the text content.
      // backItem.backButtonTitle = @"Back";
      // backItem.backButtonImage = [UIImage imageNamed:@"APCommonUI.bundle/add"];
  
      // Hide the back arrow.
      // backItem.hideBackButtonImage = YES;
  
      // Hide the back text: Set the text color to transparent but keep the clickable area of the Back button.
      // backItem.titleColor = [UIColor clearColor];
  }

Settings and Close buttons on the right of the navigation bar

Globally modify the image and color of the buttons on the right

To modify the image and color of the buttons on the right, you can import the #import <TinyappService/TASUtils.h> header file and use the following configurations.

• Modify the Close button color: [TASUtils sharedInstance].customItemColor = [UIColor redColor].

• Modify the Close button image: [TASUtils sharedInstance].customCloseImage = [UIImage imageNamed:@"xx"].

• To show the share button, use the following code: [TASUtils sharedInstance].shouldShowSettingMenu = YES.

• To modify the share button image: [TASUtils sharedInstance].customSettingImage = [UIImage imageNamed:@"xx"].

• Set the share button color: [TASUtils sharedInstance].customItemColor = [UIColor redColor].

Globally modify the style of the buttons on the right

To globally modify the style of the right-side button, rewrite the rightBarButtonItem of the current page in the H5 base class's viewwillAppear method.

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

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