All Products
Search
Document Center

Customize navigation bar of iOS Mini Program

Last Updated: Mar 24, 2021

Starting from the 10.1.60 baseline, the iOS Mini Program supports customization of the navigation bar. You can customize the title, background, back button, settings and close buttons on the right side of the navigation bar. This section gives you a detailed introduction to how to customize the navigation bar of the iOS Mini Program.

Customize navigation bar background and title

Globally customize the navigation bar background and title

If you want to customize the default navigation bar background and title of all pages of the Mini Program globally, you need to modify the window configuration in app.json.

  • Hide the navigation bar: You need to customize the JSAPI implementation.
  • Transparent navigation bar: "transparentTitle": "always".
  • Navigation bar gradient: "transparentTitle": "auto".
  • Navigation bar color: "titleBarColor": "#f00".
  • Navigation bar title text: "defaultTitle": "Alert".
  • Navigation bar title color: Modify the titleView style of the current page, in the super of the viewWillAppear method of the HTML5 base class.

    1. - (void)viewWillAppear:(BOOL)animated
    2. {
    3. [super viewWillAppear:animated];
    4. ...
    5. BOOL isTinyApp = [NBUtils isTinyAppWithSession:self.psdSession];
    6. if (isTinyApp) {
    7. id<NBNavigationTitleViewProtocol> titleView = self.navigationItem.titleView;
    8. [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
    9. [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
    10. }
    11. }
  • Navigation bar title image: "titleImage": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png".

  • Navigation bar title position: Please refer to the following code.

    1. - (NSDictionary *)nebulaCustomConfig
    2. {
    3. return @{@"h5_tinyAppTitleViewAlignLeftConfig" : @"{\"enable\":\"NO\"}"};
    4. }

Customize the navigation bar background and title of for a page

If you want to customize the navigation bar background and title of a certain page in the Mini Program, you need to configure it in the .json of the page.

  • Hide the navigation bar: You need to customize the JSAPI implementation.
  • Transparent navigation bar: "transparentTitle": "always".
  • Navigation bar gradient: "transparentTitle": "auto".
  • Navigation bar color: "titleBarColor": "#f00".
  • Navigation bar title text: "defaultTitle": "Alert".
  • Navigation bar title color: You need to customize JSAPI, and modify the style of titleView of the current page in JSAPI.

    1. - (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSD JSAPI ResponseCallbackBlock)callback
    2. {
    3. [super handler:data context:context callback:callback];
    4. // You can pass font, color, etc. through data
    5. id<NBNavigationTitleViewProtocol> titleView = context.currentViewController.navigationItem.titleView;
    6. [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
    7. [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
    8. }
  • 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

If you want to dynamically modify the navigation bar background and title of the current page, you need to call my.setNavigationBar for configuration.

  • Hide the navigation bar: You need to customize the JSAPI implementation.
  • Transparent navigation bar: Not supported.
  • Navigation bar gradient: Not supported.
  • Navigation bar color: "backgroundColor": "#f00".
  • Navigation bar title text: "title": "new title".
  • Navigation bar title color: You need to customize JSAPI, and modify the style of titleView of the current page in JSAPI.

    1. - (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSD JSAPI ResponseCallbackBlock)callback
    2. {
    3. [super handler:data context:context callback:callback];
    4. // You can pass font, color, etc. through data
    5. id<NBNavigationTitleViewProtocol> titleView = context.currentViewController.navigationItem.titleView;
    6. [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
    7. [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
    8. }
  • Navigation bar title image:"image": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png".

Customize the navigation bar back button

If you want to modify the style of the back button globally, you need to modify the style of the leftBarButtonItem of the current page in the super of the viewWillAppear method of the HTML5 base class. The editable styles include the following, you can refer to the code block below for more information.

  • Modify the back arrow and text color
  • Modify the back arrow style and text content
  • Hide back arrow
  • Hide back text

    1. // Modify the style of the return button on the left.
    2. AUBarButtonItem *backItem = self.navigationItem.leftBarButtonItem;
    3. if ([backItem isKindOfClass:[AUBarButtonItem class]]) {
    4. // Based on the default back button, modify the back arrow and copy color.
    5. backItem.backButtonColor = [UIColor greenColor];
    6. backItem.titleColor = [UIColor colorFromHexString:@"#00ff00"];
    7. // Modify the return arrow style and text content.
    8. // backItem.backButtonTitle = @"Return";
    9. // backItem.backButtonImage = [UIImage imageNamed:@"APCommonUI.bundle/add"];
    10. // Hide the return arrow.
    11. // backItem.hideBackButtonImage = YES;
    12. // Hide the return text: The text is set to transparent, and the click area of the return button is reserved.
    13. // backItem.titleColor = [UIColor clearColor];
    14. }

Set and close buttons on the right side of the navigation bar

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

If you want to modify the image and color of the buttons on the right, you need to import the header file #import <TinyappService/TASUtils.h> and configure as follows.

  • Modify the color of the close button: [TASUtils sharedInstance].customItemColor = [UIColor redColor].
  • Modify the image of the close button: [TASUtils sharedInstance].customCloseImage = [UIImage imageNamed:@"xx"].
  • Show the share button: [TASUtils sharedInstance].shoulShowSettingMenu = YES.
  • Modify the image of the share button: [TASUtils sharedInstance].customSettingImage = [UIImage imageNamed:@"xx"].
  • Modify the color of the share button: [TASUtils sharedInstance].customItemColor = [UIColor redColor].

Globally modify the style of the buttons on the right

If you want to modify the right button style globally, you need to override the rightBarButtonItem of the current page in the viewwillAppear of the HTML5 base class.

  1. - (void)viewWillAppear:(BOOL)animated
  2. {
  3. [super viewWillAppear:animated];
  4. ...
  5. BOOL isTinyApp = [NBUtils isTinyAppWithSession:self.psdSession];
  6. if (isTinyApp) {
  7. self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"Close" style:UIBarButtonItemStylePlain target:self action:@selector(onClickClose)];
  8. }
  9. }
  10. - (void)onClickClose
  11. {
  12. [TASUtils exitTinyApplication:self.appId];
  13. }