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

文档中心
  • 介绍
  • 开发
  • 小程序 SDK
  • 常见问题
  • 数据
  • 设计
  • 运营

# 设置小程序顶部导航栏

# 1. 效果展示

# 2. 左侧返回按钮替换的方法

# 2.1 覆盖范围

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

# 2.2 iOS 设置方法

只需要在工程里放一个png图片，然后命名为fin_btn_navi_back即可，请确保该图片通过 mainBundle 能正确访问到。

# 2.3 Android 设置方法

在初始化SDK时，可以自行配置返回按钮的图片资源文件，代码示例如下：

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// 设置返回按钮图片资源文件
uiConfig.setNavigateBarBackImageRes(backImageRes);
// 初始化SDK
FinAppConfig finAppConfig = new FinAppConfig.Builder()
        .setUiConfig(uiConfig)
        // 其它配置省略
        .build();
FinAppClient.INSTANCE.init(application, finAppConfig, callback);

注意

  • 若使用图片，建议使用【透明背景】的png图片，尺寸建议为60x60。
  • SDK会对图片进行黑色着色处理，因此实际运行时显示的返回按钮颜色均为黑色。

# 2.4 桌面端 设置方法

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

  params = finclip_create_params();
  finclip_params_set("appkey", "XXXXXXXXXX");
  // ... 其他必填参数
  finclip_params_set("title_bar.back.url.normal", "./res/miniapps_back_pressed.png");
  finclip_params_set("title_bar.back.url.hover", "./res/miniapps_back_normal.png");
  finclip_params_set("title_bar.back.url.pressed", "./res/miniapps_back_hover.png");
  finclip_init_with_config(appstore, params);

  // 或者使用json字符串
  params = {
      "appkey": "XXXXXXXXXX",
      // ... 其他必填参数
      "title_bar.back.url.normal": "./res/miniapps_back_pressed.png",
      "title_bar.back.url.hover": "./res/miniapps_back_normal.png",
      "title_bar.back.url.pressed": "./res/miniapps_back_hover.png"
    }
  finclip_init_with_json(appstore, params);

# 3. 导航栏的返回首页按钮UI定制方法

# 3.1 覆盖范围

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

目前返回首页按钮出现的条件为（需同时满足）：

  1. 使用了默认导航栏样式（非 custom）。
  2. 不是首页或 tabbar 页面（在 app.json 中定义的）。
  3. 是页面栈最底层页面。

小程序可在 onShow 中调用 hideHomeButton() 手动隐藏返回首页按钮。

# 3.2 iOS 设置方法

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

支持的配置属性如下：

@interface FATNavHomeConfig : NSObject

/**
 返回首页按钮的宽度
 */
@property (nonatomic, assign) CGFloat width;

/**
 返回首页按钮的高度
 */
@property (nonatomic, assign) CGFloat height;

/**
 返回首页按钮的左边距，默认值为10
 */
@property (nonatomic, assign) CGFloat leftMargin;

/**
 返回首页按钮的圆角半径，默认值为5
 */
@property (nonatomic, assign) CGFloat cornerRadius;

/**
 返回首页按钮的边框宽度，默认值为0.8
 */
@property (nonatomic, assign) CGFloat borderWidth;

/**
 浅色返回首页按钮的图片对象，如果不传，会使用默认图标
 （暗黑模式）
*/
@property (nonatomic, strong) UIImage *lightImage;

/**
 深色返回首页按钮的图片对象，如果不传，会使用默认图标
 （明亮模式）
*/
@property (nonatomic, strong) UIImage *darkImage;

/**
 返回首页按钮的边框浅色颜色
 （暗黑模式）
 */
@property (nonatomic, strong) UIColor *borderLightColor;

/**
 返回首页按钮的边框深色颜色
 （明亮模式）
 */
@property (nonatomic, strong) UIColor *borderDarkColor;

/**
 返回首页按钮的背景浅色颜色
 （明亮模式）
 */
@property (nonatomic, strong) UIColor *bgLightColor;

/**
 返回首页按钮的背景深色颜色
 （暗黑模式）
 */
@property (nonatomic, strong) UIColor *bgDarkColor;

@end

# 3.3 Android 设置方法

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

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

支持的配置属性如下：

public static class NavHomeConfig {
    /**
     * 导航栏返回首页按钮浅色图标，如果不传，会使用默认图标
     */
    public int lightImage = R.drawable.miniapps_home_light;
    /**
     * 导航栏返回首页按钮浅色图标，如果不传，会使用默认图标
     */
    public int darkImage = R.drawable.miniapps_home_dark;
    
    /**
     * 返回首页按钮宽度，默认44
     */
    public float width = 44;
    
    /**
     * 返回首页按钮高度，默认32
     */
    public float height = 32;
    
    /**
     * 返回首页按钮的左边距，默认7
     */
    public float leftMargin = 7;
    
    /**
     * 返回首页按钮边框圆角半径，默认5
     */
    public float cornerRadius = 5;
    
    /**
     * 返回首页按钮边框宽度，默认1
     */
    public float borderWidth = 1;
    
    /**
     * 返回首页按钮浅色边框颜色，默认0X80FFFFFF
     */
    public int borderLightColor = 0x80ffffff;
    
    /**
     * 返回首页按钮深色边框颜色，默认0X26000000
     */
    public int borderDarkColor = 0x26000000;
    
    /**
     * 返回首页按钮浅色背景，默认0x33000000
     */
    public int bgLightColor = 0x33000000;
    
    /**
     * 返回首页按钮深色背景，默认0x33000000
     */
    public int bgDarkColor = 0x80ffffff;
}

# 4. 标题样式替换的方法

# 4.1 覆盖范围

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

通过本设置项，可调整标题的字体、字号、位置。

# 4.2 iOS 设置方法

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

// 导航栏标题文字样式
[FATClient sharedClient].uiConfig.navigationTitleTextAttributes[NSFontAttributeName] = [UIFont boldSystemFontOfSize:18.0f];

# 4.3 Android 设置方法

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

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// 导航栏标题文字样式
uiConfig.setNavigationBarTitleTextAppearance(R.style.TextAppearance_AppCompat);
// 导航栏标题相对父控件的Gravity
uiConfig.setNavigationBarTitleTextLayoutGravity(Gravity.CENTER);

# 4.4 桌面端 设置方法

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

  params = finclip_create_params();
  finclip_params_set("appkey", "XXXXXXXXXX");
  // ... 其他必填参数
  finclip_params_set("title_bar.font.height", "Cascadia Mono,Cascadia Code PL,Monaco,Menlo,Courier New,monospace");
  finclip_params_set("title_bar.font.height", "22");
  finclip_params_set("title_bar.font.align", "center");
  finclip_init_with_config(appstore, params);

  // 或者使用json字符串
  params = {
      "appkey": "XXXXXXXXXX",
      // ... 其他必填参数
      "title_bar.font.families": "Cascadia Mono,Cascadia Code PL,Monaco,Menlo,Courier New,monospace",
      "title_bar.font.height": "22",
      "title_bar.font.align": "center",  // left/right/center
  }
  finclip_init_with_json(appstore, params);

  finclip_init_with_json(appstore, R"(//{
      "appkey": "XXXXXXXXXX",
      // ...

  }//)");

# 5. 去除导航栏返回按钮按下时的背景动画的方法

# 5.1 覆盖范围

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

# 5.2 iOS 设置方法

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

无，iOS无该设置项

# 5.3 Android 设置方法

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

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// 是否清除导航栏导航按钮的背景
uiConfig.setClearNavigationBarNavButtonBackground(true);

# 6. 隐藏小程序整体导航栏的方法

# 6.1 覆盖范围

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

# 6.2 设置方法

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

{
  "window":{
    "navigationStyle": "hide"
  }
}

完成设置后，导航栏及右上胶囊均会被隐藏

# 7. 当导航栏为默认样式时，怎样实现在首页也显示返回按钮？

# 7.1 覆盖范围

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

# 7.2 iOS 设置方法

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

无，iOS无该设置项

# 7.3 Android 设置方法

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

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// 当导航栏为默认导航栏时，是否始终显示返回按钮
uiConfig.setAlwaysShowBackInDefaultNavigationBar(false);

# 8. 小程序相关设置

# 8.1 导航栏 API

名称 功能说明
ft.showNavigationBarLoading 在当前页面显示导航条加载动画
ft.setNavigationBarTitle 动态设置当前页面的标题
ft.setNavigationBarColor 设置页面导航条颜色
ft.hideNavigationBarLoading 在当前页面隐藏导航条加载动画

# 8.2 全局配置 app.json

详情请见 全局配置

属性 类型 默认值 描述
navigationBarBackgroundColor HexColor（十六进制颜色值） #000000 导航栏背景颜色，如 #000000
navigationBarTextStyle String white 导航栏标题颜色，目前仅支持 black / white
navigationBarTitleText String 导航栏标题文字内容，字数不宜过多
navigationStyle String default 导航栏样式，仅支持以下值：1. default（默认样式）, 2. custom（自定义导航栏，只保留右上角按钮）, 3.hide（隐藏导航栏和右上角胶囊）
navigationBarHideCloseButton Boolean false 隐藏胶囊关闭按钮
navigationBarHideMoreButton Boolean false 隐藏胶囊菜单按钮

# 8.3 页面配置

详情请见 页面配置

属性 类型 默认值 描述 最低版本
navigationBarBackgroundColor HexColor #000000 导航栏背景颜色，如 #000000
navigationBarTextStyle string white 导航栏标题颜色，仅支持 black / white
navigationBarTitleText string 导航栏标题文字内容
navigationStyle string default 导航栏样式，仅支持以下值：1. default（默认样式）, 2. custom（自定义导航栏，只保留右上角按钮）, 3.hide（隐藏导航栏和右上角胶囊）
© FinClip with ❤ , Since 2017