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

# 设置小程序顶部导航栏

# 1. 效果展示

1-1-2.png

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

# 2.1 覆盖范围

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

# 2.2 iOS 设置方法

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

# 2.3 Android 设置方法

参考如下xml文件,创建并调整图片样式,并命名为fin_applet_ic_arrow_back.xml,放入工程的res/drawable目录下。

请注意,图片文件名不能改动,否则无法覆盖SDK中的图片。

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0">
    <path
        android:fillColor="#FF000000"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

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

# 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(隐藏导航栏和右上角胶囊)
© 2022 FinClip with ❤

👋🏻 嘿,你好!

「FinClip」是一套基于云原生框架设计的小程序容器。能够让任何移动应用在集成小程序SDK之后,获得可用、安全的小程序运行能力。

>> 点我免费注册体验

查看产品文档
了解与 FinClip 相关的一切信息

产品博客 👈  了解产品更新与核心功能介绍
资源下载 👈  获取小程序 SDK 与开发工具
文档中心 👈  查询 FinClip 小程序开发指南与答疑

商务咨询热线
预约 FinClip 产品介绍,咨询商务报价或私有化部署事宜

0755-86967467

获取产品帮助
联系 FinClip 技术顾问,获取产品资料或加入开发者社群

联系线上
人工客服

或 👉  点击这里,提交咨询工单