Set the top navigation bar of the applet

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 applets 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.

2.3 Android setup method

Refer to the following xml file, create and adjust the image style, and name it fin_applet_nav_back.xml, put it in the res/drawable directory of the project.

Please note that the image filename cannot be changed, otherwise it will not overwrite the image in the SDK.

xml

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

3.1 Coverage

This setting is implemented by the App, once set, all the applets 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):
the default navigation bar style (not custom) is used.
not the home page or tabbar page (as defined in app.json).
is the bottom page of the page stack.
The applet can call hideHomeButton() in onShow to hide the Back Home button manually.

3.2 iOS setup method

objectivec

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

The following configuration attributes are supported.

objectivec

@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

3.3 Android setup method

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

java

UIConfig.NavHomeConfig navHomeConfig = new UIConfig.NavHomeConfig();
uiConfig.setNavHomeConfig(navHomeConfig);

The following configuration attributes are supported:

java

public static class NavHomeConfig {
    /**
     * Navigation bar back to the home button light-colored icon, if not passed, will use the default icon
     */
    public int lightImage = R.drawable.miniapps_home_light;
    /**
     * Navigation bar back to the home button light-colored icon, if not passed, will use the default icon
     */
    public int darkImage = R.drawable.miniapps_home_dark;

    /**
     * Return home button width, default 44
     */
    public float width = 44;

    /**
     * Return to home button height, default 32
     */
    public float height = 32;

    /**
     * The left margin of the Back to Home button, default 7
     */
    public float leftMargin = 7;

    /**
     * Return home button border radius, default 5
     */
    public float cornerRadius = 5;

    /**
     * Return to home button border width, default 1
     */
    public float borderWidth = 1;

    /**
     * Back to home button light border color, default 0X80FFFFFF
     */
    public int borderLightColor = 0x80ffffff;

    /**
     * Return home button dark border color, default 0X26000000
     */
    public int borderDarkColor = 0x26000000;

    /**
     * Return home button light background, default 0x33000000
     */
    public int bgLightColor = 0x33000000;

    /**
     * Return home button dark background, default 0x33000000
     */
    public int bgDarkColor = 0x80ffffff;
}

4. Title style replacement method

4.1 Coverage

This setting is implemented by the App, once set, all the applets 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.

objectivec

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

4.3 Android setup method

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

java

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// Navigation bar title text style
uiConfig.setNavigationBarTitleTextAppearance(R.style.TextAppearance_AppCompat);
// Gravity of the navigation bar title relative to the parent control
uiConfig.setNavigationBarTitleTextLayoutGravity(Gravity.CENTER);

5.1 Coverage

This setting is implemented by the App, once set, all the applets 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

5.3 Android setup method

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

java

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// Whether to clear the background of the navigation buttons in the navigation bar
uiConfig.setClearNavigationBarNavButtonBackground(true);

6.1 Coverage

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

6.2 Setting method

In the applet 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.1 Coverage

This setting is implemented by the App, once set, all the applets 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:

objectivec

None, iOS does not have this setting item

7.3 Android setup method

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

java

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// Whether the back button is always displayed when the navigation bar is the default navigation bar
uiConfig.setAlwaysShowBackInDefaultNavigationBar(false);

Name	Function Description
pz.showNavigationBarLoading	Show navigation bar loading animation on current page
pz.setNavigationBarTitle	Dynamically set the title of the current page
pz.setNavigationBarColor	Set page navigation bar color
pz.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

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)

Set the top navigation bar of the applet

1. Effect show

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

2.1 Coverage

2.2 iOS setup method

2.3 Android setup method

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

3.1 Coverage

3.2 iOS setup method

3.3 Android setup method

4. Title style replacement method

4.1 Coverage

4.2 iOS setup method

4.3 Android setup method

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

5.1 Coverage

5.2 iOS setup method

5.3 Android setup method

6. The way to hide the overall navigation bar of the applet

6.1 Coverage

6.2 Setting method

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

7.2 iOS setup method

7.3 Android setup method

8.1 Navigation bar API

8.2 Global configuration app.json

8.3 Page Configuration

Set the top navigation bar of the applet ​

1. Effect show ​

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

2.1 Coverage ​

2.2 iOS setup method ​

2.3 Android setup method ​

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

3.1 Coverage ​

3.2 iOS setup method ​

3.3 Android setup method ​

4. Title style replacement method ​

4.1 Coverage ​

4.2 iOS setup method ​

4.3 Android setup method ​

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

5.1 Coverage ​

5.2 iOS setup method ​

5.3 Android setup method ​

6. The way to hide the overall navigation bar of the applet ​

6.1 Coverage ​

6.2 Setting method ​

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 ​

7.2 iOS setup method ​

7.3 Android setup method ​

8. Applet-related settings ​

8.1 Navigation bar API ​

8.2 Global configuration app.json ​

8.3 Page Configuration ​

Set the top navigation bar of the applet

1. Effect show

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

2.1 Coverage

2.2 iOS setup method

2.3 Android setup method

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

3.1 Coverage

3.2 iOS setup method

3.3 Android setup method

4. Title style replacement method

4.1 Coverage

4.2 iOS setup method

4.3 Android setup method

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

5.1 Coverage

5.2 iOS setup method

5.3 Android setup method

6. The way to hide the overall navigation bar of the applet

6.1 Coverage

6.2 Setting method

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

7.2 iOS setup method

7.3 Android setup method

8. Applet-related settings

8.1 Navigation bar API

8.2 Global configuration app.json

8.3 Page Configuration