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 Harmony 设置方法

初始化SDK时，通过UIConfig进行配置，具体参数参考 INavBackConfig,如下：

const navBackConfig: IFinAppConfig.INavBackConfig = {
  darkImage: 'xxx', // 深色图片,ResourceStr 类型
  lightImage: 'xxx' // 浅色图片,ResourceStr 类型
}

const uiConfig: IFinAppConfig.IUIConfig = {
  navBackConfig,
}

const finAppConfig: IFinAppConfig.IFinAppConfig = {
  finStoreConfigs,
  uiConfig,
}

FinAppClient.init(finAppConfig,context,entryInfo,)

# 2.5 桌面端 设置方法

初始化 SDK 和启动小程序时, 可以对小程序的属性进行配置，具体参考 配置 SDK：

支持的属性如下:

/**
 * @brief 标题栏返回按钮图片
 * @param 图片路径
 */
#define FINCLIP_UI_BACK_URL "title_bar.back.url"
// 调用示例
finclip_params_set(params, "title_bar.back.url", "C:/Program Files/test/resource/test.jpg");

# 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;
}

# 3.4 Harmony 设置方法

初始化SDK时，通过UIConfig进行配置，具体参数参考 INavHomeConfig，如下：

const navHomeConfig: IFinAppConfig.INavHomeConfig = {
  darkImage: 'xxx', // 深色图片,ResourceStr 类型
  lightImage: 'xxx' // 浅色图片,ResourceStr 类型
}

const uiConfig: IFinAppConfig.IUIConfig = {
  navHomeConfig,
}

const finAppConfig: IFinAppConfig.IFinAppConfig = {
  finStoreConfigs,
  uiConfig,
}

FinAppClient.init(finAppConfig,context,entryInfo,)

# 3.5 桌面端 设置方法

初始化 SDK 和启动小程序时, 可以对小程序的属性进行配置，具体参考 配置 SDK：

支持的属性如下:

/**
 * @brief 标题栏首页按钮图片
 *
 */
#define FINCLIP_UI_HOME_URL "title_bar.home.url"
// 调用示例
finclip_params_set(params, "title_bar.home.url", "C:/Program Files/test/resource/home.jpg");

/**
 * @brief 返回首页按钮的宽度
 * @param default (默认值) 22
 */
#define FINCLIP_UI_HOME_WIDTH "title_bar.home.width"
// 调用示例
finclip_params_set_int(params, "title_bar.home.width", 22);

/**
 * @brief 返回首页按钮的高度
 *
 */
#define FINCLIP_UI_HOME_HEIGHT "title_bar.home.height"
// 调用示例
finclip_params_set_int(params, "title_bar.home.height", 22);

/**
 * @brief 返回首页按钮的左边距
 * @param default (默认值) 10
 */
#define FINCLIP_UI_HOME_LEFT_MARGIN "title_bar.home.left_margin"

/**
 * @brief 返回首页按钮的圆角半径
 * @param default (默认值) 5
 */
#define FINCLIP_UI_HOME_CORNER_RADIUS "title_bar.home.corner_radius"

/**
 * @brief 返回首页按钮的图片对象，如果不传，会使用默认图标（暗黑模式）
 *
 */
#define FINCLIP_UI_HOME_DARK_IMAGE "title_bar.home.dark_image"
// 调用示例
finclip_params_set(params, "title_bar.home.dark_image", "C:/Program Files/test/resource/home_dark.jpg");

/**
 * @brief 返回首页按钮的图片对象，如果不传，会使用默认图标（明亮模式）
 *
 */
#define FINCLIP_UI_HOME_LIGHT_IMAGE "title_bar.home.light_image"
// 调用示例
finclip_params_set(params, "title_bar.home.light_image", "C:/Program Files/test/resource/home_light.jpg");

/**
 * @brief 返回首页按钮的边框浅色颜色（明亮模式）
 *
 */
#define FINCLIP_UI_HOME_BORDER_LIGHT_COLOR "title_bar.home.border_light_color"
// 调用示例
finclip_params_set(params, "title_bar.home.border_light_color", "#CCCCCC");

/**
 * @brief 返回首页按钮的边框浅色颜色（暗黑模式）
 *
 */
#define FINCLIP_UI_HOME_BORDER_DARK_COLOR "title_bar.home.border_dark_color"
// 调用示例
finclip_params_set(params, "title_bar.home.border_dark_color", "#333333");

/**
 * @brief 返回首页按钮的背景浅色颜色（明亮模式）
 *
 */
#define FINCLIP_UI_HOME_BG_LIGHT_COLOR "title_bar.home.bg_light_color"
// 调用示例
finclip_params_set(params, "title_bar.home.bg_light_color", "#FFFFFF");

/**
 * @brief 返回首页按钮的背景浅色颜色（暗黑模式）
 *
 */
#define FINCLIP_UI_HOME_BG_DARK_COLOR "title_bar.home.bg_dark_color"
// 调用示例
finclip_params_set(params, "title_bar.home.bg_dark_color", "#000000");

# 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 Harmony 设置方法

初始化SDK时，通过UIConfig进行配置，具体参数参考 INavTitleConfig，如下：

const navTitleConfig: IFinAppConfig.INavTitleConfig = {
  fontSize: 20, 
  fontWeight: 700,
  textAlign: 'left' 
}

const uiConfig: IFinAppConfig.IUIConfig = {
  navTitleConfig,
}

const finAppConfig: IFinAppConfig.IFinAppConfig = {
  finStoreConfigs,
  uiConfig,
}

FinAppClient.init(finAppConfig,context,entryInfo,)

# 4.5 桌面端 设置方法

初始化 SDK 和启动小程序时, 可以对小程序的属性进行配置，具体参考 配置 SDK：

支持的属性如下:

/**
 * @brief 标题栏样式
 *
 * @param default (默认值) 完整显示
 * @param custom 自定义导航栏，只保留右上角胶囊按钮。
 * @param hide 隐藏。
 */
#define FINCLIP_UI_TITLE_BAR_STYLE "title_bar.style"
finclip_params_set_int(params, "title_bar.style", "default");

/**
 * @brief 标题栏高度，默认值44
 *
 */
#define FINCLIP_UI_TITLE_BAR_HEIGHT "title_bar.height"
finclip_params_set_int(params, "title_bar.height", 44);

/**
 * @brief 标题栏标题文字字体
 *
 */
#define FINCLIP_UI_TITLE_BAR_FONT_FAMILIES "title_bar.font.families"
finclip_params_set(params, "title_bar.font.families", "JetBrains Mono, Fira Code, Fira Code Retina");

/**
 * @brief 标题栏标题文字大小
 *
 */
#define FINCLIP_UI_TITLE_BAR_FONT_HEIGHT "title_bar.font.height"
finclip_params_set_int(params, "title_bar.font.height", 16);

/**
 * @brief 标题栏标题文字对齐方式
 * @param default center 居中
 * @param left 
 * @param right
 */
#define FINCLIP_UI_TITLE_BAR_FONT_ALIGN "title_bar.font.align"
finclip_params_set_int(params, "title_bar.font.align", "center");

# 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);

# 7.4 Harmony 设置方法

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

// 当导航栏为默认导航栏时，是否始终显示返回按钮
const uiConfig: IFinAppConfig.IUIConfig = {
  isAlwaysShowBackInDefaultNavigationBar: true,
}

# 7.4 桌面端 设置方法

初始化 SDK 和启动小程序时, 可以对小程序的属性进行配置，具体参考 配置 SDK：

支持的属性如下:

/**
 * @brief 是否展示总是返回按钮
 *
 * @param hidden (默认值) 隐藏
 * @param normal 总是显示
 */
#define FINCLIP_UI_CONFIG_TITLE_BAR_BACK_BUTTON "title_bar_back_button"
finclip_params_set(params, "title_bar_back_button", "hidden");

# 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