Mini Program Navigation Bar Style Config

1. Effect show

2. The method of replacing the back button on the left side

2.1 Coverage

This setting is implemented by the App, once set, all the mini programs in the App will be implemented according to this effect.

2.2 iOS setup method

Just put a png image in the project and name it fin_btn_navi_back, please make sure the image can be accessed correctly through mainBundle.

3. UI customization method of Back Home button in navigation bar

3.1 Coverage

This setting is implemented by the App, once set, all the mini programs in the App will be implemented according to this effect.

The current conditions for the Back to Home button to appear are (subject to both being met):

1. the default navigation bar style (not custom) is used.

2. not the home page or tabbar page (as defined in app.json).

3. is the bottom page of the page stack.

The mini program can call hideHomeButton() in onShow to hide the Back Home button manually.

3.2 iOS setup method

FATNavHomeConfig *navHomeConfig = [[FATNavHomeConfig alloc] init];
uiConfig.navHomeConfig = navHomeConfig;

The following configuration attributes are supported.

@interface FATNavHomeConfig : NSObject

/**
 The width of the Back Home button
 */
@property (nonatomic, assign) CGFloat width;

/**
 Height of Back Home button
 */
@property (nonatomic, assign) CGFloat height;

/**
 The left margin of the Back Home button, the default value is 10
 */
@property (nonatomic, assign) CGFloat leftMargin;

/**
 The radius of the home button's rounded corners, the default value is 5.
 */
@property (nonatomic, assign) CGFloat cornerRadius;

/**
 Return to the home button border width, the default value is 0.8
 */
@property (nonatomic, assign) CGFloat borderWidth;

/**
 Light color return home button image object, if not passed, will use the default icon
 (dark mode)
*/
@property (nonatomic, strong) UIImage *lightImage;

/**
 Image object of the dark return home button, if not passed, the default icon will be used
 (bright mode)
*/
@property (nonatomic, strong) UIImage *darkImage;

/**
 Back to the home button border light color
 (Dark mode)
 */
@property (nonatomic, strong) UIColor *borderLightColor;

/**
 Back to the home button border dark color
 (bright mode)
 */
@property (nonatomic, strong) UIColor *borderDarkColor;

/**
 Back to the home button background light color
 (bright mode)
 */
@property (nonatomic, strong) UIColor *bgLightColor;

/**
 Back to the home button's background dark color
 (Dark mode)
 */
@property (nonatomic, strong) UIColor *bgDarkColor;

@end

4. Title style replacement method

4.1 Coverage

This setting is implemented by the App, once set, all the mini programs in the App will be implemented according to this effect.

This setting allows you to adjust the font, font size and position of the title.

4.2 iOS setup method

When initializing the SDK, it is configured via UIConfig, as follows.

// Navigation bar title text style
[FATClient sharedClient].uiConfig.navigationTitleTextAttributes[NSFontAttributeName] = [UIFont boldSystemFontOfSize:18.0f];

5. How to remove the background animation when the back button is pressed in the navigation bar

5.1 Coverage

This setting is implemented by the App, once set, all the mini programs in the App will be implemented according to this effect.

5.2 iOS setup method

When initializing the SDK, it is configured via UIConfig, as follows.

None, iOS does not have this setting item

6. The way to hide the overall navigation bar of the mini program

6.1 Coverage

The configuration is set by the mini program itself, and each mini program displays different effects according to its own configuration.

6.2 Setting method

In the mini program app.json, change the configuration of the global window window

{
  "window":{
    "navigationStyle": "hide"
  }
}

After completing the settings, the navigation bar and the upper right capsule will be hidden

7. When the navigation bar is the default style, how can I display the back button on the home page as well?

7.1 Coverage

This setting is implemented by the App, once set, all the mini programs in the App will be implemented according to this effect.

7.2 iOS setup method

When initializing the SDK, it is configured via UIConfig, as follows:

None, iOS does not have this setting item

8. Mini program-related settings

8.1 Navigation bar API

Name	Function Description
ft.showNavigationBarLoading	Show navigation bar loading animation on current page
ft.setNavigationBarTitle	Dynamically set the title of the current page
ft.setNavigationBarColor	Set page navigation bar color
ft.hideNavigationBarLoading	Hide navigation bar loading animation on current page

8.2 Global configuration app.json

See [Global Configuration] for details(../../develop/frameInterface/config/app.html#全局配置)

Properties	Type	Default	Description
navigationBarBackgroundColor	HexColor（Hexadecimal color values）	#000000	Navigation bar background color, such as #000000
navigationBarTextStyle	String	white	Navigation bar header color, currently only supported black / white
navigationBarTitleText	String		Navigation bar title text content, the number of words should not be too much
navigationStyle	String	default	Navigation bar style, only the following values are supported: 1. default (default style), 2. custom (customize the navigation bar, keeping only the top right button), 3. hide (hide the navigation bar and top right capsule)
navigationBarHideCloseButton	Boolean	false	Hide capsule close button
navigationBarHideMoreButton	Boolean	false	Hide capsule menu button

8.3 Page Configuration

See [Page Configuration] for details(../../develop/frameInterface/config/page.html#页面配置)

Properties	Type	Default	Description
navigationBarBackgroundColor	HexColor	#000000	Navigation bar background color, such as #000000
navigationBarTextStyle	string	white	Navigation bar header color, supported only black / white
navigationBarTitleText	string		Navigation bar title text content
navigationStyle	string	default	Navigation bar style, only the following values are supported: 1. default (default style), 2. custom (customize the navigation bar, keeping only the top right button), 3. hide (hide the navigation bar and top right capsule)