# 设置小程序胶囊
# 1. 效果展示
# 2. 设置小程序胶囊UI样式
# 2.1 覆盖范围
小程序胶囊UI样式修改，需由App实现，一经设置、App内的全部小程序均将按照本效果实现。
# 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 | 打开动画时，隐藏关闭胶囊 |
# 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
}
}