Mini Program Capsules Style Config

1. Effect show

2. Set mini program capsule UI style

2.1 Coverage

Once set, all the mini programs in the app will be implemented according to this effect.

2.2 iOS setup method

When initializing the SDK, configuration is done via the CapsuleConfig class:

//Set the width of the top-right capsule view to 88
[FATClient sharedClient].uiConfig.capsuleConfig.capsuleWidth = 88;

Description of specific configurable items:

/**
 The width of the capsule view in the upper right corner, default value is 88
 */
@property (nonatomic, assign) CGFloat capsuleWidth;

/**
 The height of the top-right capsule view, the default value is 32
 */
@property (nonatomic, assign) CGFloat capsuleHeight;

/**
 The right margin of the top-right capsule view, the default value is 10
 */
@property (nonatomic, assign) CGFloat capsuleRightMargin;

/**
 The radius of the rounded corners of the upper right capsule view, the default value is 5
 */
@property (nonatomic, assign) CGFloat capsuleCornerRadius;

/**
 The border width of the top-right capsule view, default value is 0.8
 */
@property (nonatomic, assign) CGFloat capsuleBorderWidth;

/**
 Light color of the border in the upper right corner of the capsule view
 */
@property (nonatomic, strong) UIColor *capsuleBorderLightColor;

/**
 Dark color of the border of the capsule view in the upper right corner
 */
@property (nonatomic, strong) UIColor *capsuleBorderDarkColor;

/**
 Light color of the background of the upper right capsule view
 */
@property (nonatomic, strong) UIColor *capsuleBgLightColor;

/**
 Dark background color for capsule view in the upper right corner
 */
@property (nonatomic, strong) UIColor *capsuleBgDarkColor;

/**
 Image object for the light-colored more buttons in the capsule, if not passed, the default icon will be used
 */
@property (nonatomic, strong) UIImage *moreLightImage;

/**
 Image object for the darker more buttons in the capsule, if not passed, the default icon will be used
 */
@property (nonatomic, strong) UIImage *moreDarkImage;

/**
 The width of more buttons in the capsule, equal in height and width
 */
@property (nonatomic, assign) CGFloat moreBtnWidth;

/**
 The left distance of the more button in the capsule
 */
@property (nonatomic, assign) CGFloat moreBtnLeftMargin;

/**
 Image object for the light-colored more buttons in the capsule, if not passed, the default icon will be used
 */
@property (nonatomic, strong) UIImage *closeLightImage;

/**
 Image object for the darker more buttons in the capsule, if not passed, the default icon will be used
 */
@property (nonatomic, strong) UIImage *closeDarkImage;

/**
 The width of the close button in the capsule, equal in height and width
 */
@property (nonatomic, assign) CGFloat closeBtnWidth;

/**
 The left distance of the close button in the capsule
 */
@property (nonatomic, assign) CGFloat closeBtnLeftMargin;

/**
 The light color of the dividing line in the capsule
 */
@property (nonatomic, strong) UIColor *capsuleDividerLightColor;

/**
 The dark color of the dividing line in the capsule
 */
@property (nonatomic, strong) UIColor *capsuleDividerDarkColor;

3. Hide the "More" button

3.1 Coverage

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

3.2 Setting method

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

{
  "window":{
    "navigationBarHideMoreButton": true
  }
}

4. The way to hide the close button when opening animations in mini programs

4.1 Coverage

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

This method is mainly used to handle whether to hide the close button of the navigation bar during the loading of the mini progmini (the mini progmini service layer is not yet loaded successfully and the base library has not yet passed the mini progmini configuration information to the SDK).

4.2 iOS setup method

When initializing the SDK, configuration is done via the CapsuleConfig class.

//Hide the close button when the mini progmini opens with an animation
[FATClient sharedClient].uiConfig.hideTransitionCloseButton = YES;

5. How to hide the close button after the mini progmini is fully opened

5.1 Coverage

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

5.2 Setting method

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

{
  "window":{
    "navigationBarHideCloseButton": true
  }
}