FinClip为企业提供小程序生态圈技术产品,开发者可在FinClip小程序开发帮助中心找到相关FinClip小程序指引

# 设置小程序胶囊

# 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 打开动画时,隐藏关闭胶囊

# 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
  }
}
© FinClip with ❤ , Since 2017