设置小程序胶囊

1. 效果展示

​

2. 设置小程序胶囊UI样式

2.1 覆盖范围

小程序胶囊UI样式修改，需由App实现，一经设置、App内的全部小程序、小游戏、H5应用均将按照本效果实现。

2.2 iOS 设置方法

在初始化SDK时，通过CapsuleConfig类进行配置：

//设置右上角胶囊视图的宽度为88
[FATClient sharedClient].uiConfig.capsuleConfig.capsuleWidth = 88;

具体可配置项说明：

/**
 右上角胶囊视图的宽度，默认值为88
 */
@property (nonatomic, assign) CGFloat capsuleWidth;

/**
 右上角胶囊视图的高度，默认值为32
 */
@property (nonatomic, assign) CGFloat capsuleHeight;

/**
 右上角胶囊视图的右边距，默认值为10
 */
@property (nonatomic, assign) CGFloat capsuleRightMargin;

/**
 右上角胶囊视图的圆角半径，默认值为5
 */
@property (nonatomic, assign) CGFloat capsuleCornerRadius;

/**
 右上角胶囊视图的边框宽度，默认值为0.8
 */
@property (nonatomic, assign) CGFloat capsuleBorderWidth;

/**
 右上角胶囊视图的边框浅色颜色
 */
@property (nonatomic, strong) UIColor *capsuleBorderLightColor;

/**
 右上角胶囊视图的边框深色颜色
 */
@property (nonatomic, strong) UIColor *capsuleBorderDarkColor;

/**
 右上角胶囊视图的背景浅色颜色
 */
@property (nonatomic, strong) UIColor *capsuleBgLightColor;

/**
 右上角胶囊视图的背景深色颜色
 */
@property (nonatomic, strong) UIColor *capsuleBgDarkColor;

/**
 胶囊里的浅色更多按钮的图片对象，如果不传，会使用默认图标
 */
@property (nonatomic, strong) UIImage *moreLightImage;

/**
 胶囊里的深色更多按钮的图片对象，如果不传，会使用默认图标
 */
@property (nonatomic, strong) UIImage *moreDarkImage;

/**
 胶囊里的更多按钮的宽度，高度与宽度相等
 */
@property (nonatomic, assign) CGFloat moreBtnWidth;

/**
 胶囊里的更多按钮的左边距
 */
@property (nonatomic, assign) CGFloat moreBtnLeftMargin;

/**
 胶囊里的浅色更多按钮的图片对象，如果不传，会使用默认图标
 */
@property (nonatomic, strong) UIImage *closeLightImage;

/**
 胶囊里的深色更多按钮的图片对象，如果不传，会使用默认图标
 */
@property (nonatomic, strong) UIImage *closeDarkImage;

/**
 胶囊里的关闭按钮的宽度，高度与宽度相等
 */
@property (nonatomic, assign) CGFloat closeBtnWidth;

/**
 胶囊里的关闭按钮的左边距
 */
@property (nonatomic, assign) CGFloat closeBtnLeftMargin;

/**
 胶囊里的分割线的浅色颜色
 */
@property (nonatomic, strong) UIColor *capsuleDividerLightColor;

/**
 胶囊里的分割线的深色颜色
 */
@property (nonatomic, strong) UIColor *capsuleDividerDarkColor;

2.3 Android 设置方法

在初始化SDK时，通过CapsuleConfig类进行配置：

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
CapsuleConfig capsuleConfig = new CapsuleConfig();
uiConfig.setCapsuleConfig(capsuleConfig);

具体可配置项说明：

/**
 * 胶囊按钮配置
 */
public static class CapsuleConfig {

    /**
     *  右上角胶囊视图的宽度，默认值为88
     *  
     */
    public float capsuleWidth = 88;

    /**
     *  右上角胶囊视图的高度，默认值为32
     *  
     */
    public float capsuleHeight = 32;

    /**
     * 右上角胶囊视图的右边距
     */
    public float capsuleRightMargin = 7;

    /**
     *  右上角胶囊视图的圆角半径，默认值为5
     *  
     */
    public float capsuleCornerRadius = 5;

    /**
     *  右上角胶囊视图的边框宽度，默认值为0.8
     *  
     */
    public float capsuleBorderWidth = 1f;

    /**
     * 胶囊背景颜色浅色
     */
    public int capsuleBgLightColor = 0x33000000;

    /**
     * 胶囊背景颜色深色
     */
    public int capsuleBgDarkColor = 0x80ffffff;

    /**
     *  右上角胶囊视图的边框浅色颜色
     *  
     */
    public int capsuleBorderLightColor = 0x80ffffff;

    /**
     *  右上角胶囊视图的边框深色颜色
     *  
     */
    public int capsuleBorderDarkColor = 0x26000000;

    /**
     * 胶囊分割线浅色颜色
     */
    public int capsuleDividerLightColor = 0x80ffffff;

    /**
     * 胶囊分割线深色颜色
     */
    public int capsuleDividerDarkColor = 0x26000000;

    /**
     *  胶囊里的浅色更多按钮的图片对象，如果不传，会使用默认图标
     *  
     */
    public int moreLightImage = R.drawable.miniapps_more_light;

    /**
     *  胶囊里的深色更多按钮的图片对象，如果不传，会使用默认图标
     *  
     */
    public int moreDarkImage = R.drawable.miniapps_more_dark;

    /**
     *  胶囊里的更多按钮的宽度，高度与宽度相等
     *  
     */
    public float moreBtnWidth = 32;

    /**
     *  胶囊里的更多按钮的左边距
     *  
     */
    public float moreBtnLeftMargin = 6;

    /**
     *  胶囊里的浅色更多按钮的图片对象，如果不传，会使用默认图标
     *  
     */
    public int closeLightImage = R.drawable.miniapps_close_light;

    /**
     *  胶囊里的深色更多按钮的图片对象，如果不传，会使用默认图标
     *  
     */
    public int closeDarkImage = R.drawable.miniapps_close_dark;

    /**
     *  胶囊里的关闭按钮的宽度，高度与宽度相等
     *  
     */
    public float closeBtnWidth = 32;

    /**
     *  胶囊里的关闭按钮的左边距
     *  
     */
    public float closeBtnLeftMargin = 6;
}

2.4 桌面端 设置方法

在初始化SDK时，通过finclip_init_with_config / finclip_init_with_json函数进行配置：

伪代码示例如下:

  params = finclip_create_params();
  finclip_params_set("appkey", "XXXXXXXXXX");
  // ... 其他必填参数
  finclip_params_set("capsule.width", "56");
  finclip_params_set("capsule.height", "32");
  finclip_params_set("capsule.right_margin", "40");
  finclip_init_with_config(appstore, params);

  // 或者使用json字符串
  params = {
      "appkey": "XXXXXXXXXX",
      // ... 其他必填参数
      "capsule.width": "56",
      "capsule.height": "32",
      "capsule.right_margin": "40",
  }
  finclip_init_with_json(appstore, params);

具体可配置项：

属性	类型	说明
capsule.width	string	右上角胶囊视图的宽度，默认值为88
capsule.height	string	右上角胶囊视图的高度，默认值为32
capsule.right_margin	string	右上角胶囊视图的右边距，默认值为10
capsule.radius	string	右上角胶囊视图的圆角半径，默认值为4
capsule.border.width	string	右上角胶囊视图的边框宽度，默认值为1
capsule.border.light_color	string	右上角胶囊视图的边框浅色颜色
capsule.border.dark_color	string	右上角胶囊视图的边框深色颜色
capsule.background.light_color	string	右上角胶囊视图的背景浅色颜色
capsule.background.dark_color	string	右上角胶囊视图的背景深色颜色
capsule.more.light_image	string	胶囊里的浅色更多按钮的图片路径
capsule.more.dark_image	string	胶囊里的深色更多按钮的图片路径
capsule.more.width	string	胶囊里的更多按钮的宽度，高度与宽度相等
capsule.more.left_margin	string	胶囊里的更多按钮的左边距
capsule.close.light_image	string	胶囊里的浅色关闭按钮的图片路径
capsule.close.dark_image	string	胶囊里的深色色关闭按钮的图片路径
capsule.close.width	string	胶囊里的关闭按钮的宽度，高度与宽度相等
capsule.close.left_margin	string	胶囊里的关闭按钮的左边距
capsule.hide_before_open	string	打开动画时，隐藏关闭胶囊

2.5 Harmony 设置方法

在 SDK 初始化的时候设置 capsuleConfig

const capsuleConfig: IFinAppConfig.ICapsuleConfig = {}

具体可配置项：

属性	类型	说明
capsule.capsuleWidth	number	右上角胶囊视图的宽度，默认值为88
capsule.capsuleHeight	number	右上角胶囊视图的高度，默认值为32
capsule.capsuleRightMargin	number	右上角胶囊视图的右边距，默认值为7
capsule.capsuleCornerRadius	number	右上角胶囊视图的圆角半径，默认值为16
capsule.capsuleBorderWidth	number	右上角胶囊视图的边框宽度，默认值为0.5
capsule.capsuleBorderLightColor	string	右上角胶囊视图的边框浅色颜色
capsule.capsuleBorderDarkColor	string	右上角胶囊视图的边框深色颜色
capsule.capsuleBgLightColor	string	右上角胶囊视图的背景浅色颜色
capsule.capsuleBgDarkColor	string	右上角胶囊视图的背景深色颜色
capsule.moreLightImage	ResourceStr	胶囊里的浅色更多按钮的图片路径
capsule.moreDarkImage	ResourceStr	胶囊里的深色更多按钮的图片路径
capsule.moreBtnWidth	number	胶囊里的更多按钮的宽度，高度与宽度相等
capsule.moreBtnLeftMargin	number	胶囊里的更多按钮的左边距
capsule.closeLightImage	ResourceStr	胶囊里的浅色关闭按钮的图片路径
capsule.closeDarkImage	ResourceStr	胶囊里的深色色关闭按钮的图片路径
capsule.closeBtnWidth	number	胶囊里的关闭按钮的宽度，高度与宽度相等
capsule.closeBtnLeftMargin	number	胶囊里的关闭按钮的左边距
capsule.capsuleDividerLightColor	string	胶囊里浅色分割线颜色
capsule.capsuleDividerDarkColor	string	胶囊里的深色分割线颜色

3. 隐藏「更多」按钮

3.1 覆盖范围

该配置由小程序自行设置，每个小程序根据自己的配置展示不同效果。

3.2 设置方法

在小程序app.json中，修改全局窗口window的配置

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

4. 在小程序打开动画时，隐藏关闭按钮的方法

4.1 覆盖范围

该设置由App实现，一经设置、App内的全部小程序均将按照本效果实现。

该方法主要用于处理加载小程序过程中（小程序Service层还未加载成功，基础库还没有向SDK传递小程序配置信息），是否隐藏导航栏的关闭按钮。

4.2 iOS 设置方法

在初始化SDK时，通过CapsuleConfig类进行配置：

//在小程序打开动画时，隐藏关闭按钮
[FATClient sharedClient].uiConfig.hideTransitionCloseButton = YES;

4.3 Android 设置方法

初始化SDK时，通过UIConfig进行配置，如下：

// UI配置
FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// 是否隐藏右上角关闭按钮
uiConfig.setHideNavigationBarCloseButton(true);

5. 在小程序完全打开后，隐藏关闭按钮的方法

5.1 覆盖范围

该配置由小程序自行设置，每个小程序根据自己的配置展示不同效果。

5.2 设置方法

在小程序app.json中，修改全局窗口window的配置

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