# 设置小程序顶部导航栏

# 1. 效果展示

1-1-2.png

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

# 2.1 覆盖范围

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

# 2.2 iOS 设置方法

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

# 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. 标题样式替换的方法

# 3.1 覆盖范围

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

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

# 3.2 iOS 设置方法

初始化SDK时,通过UIConfig进行配置,如下:

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

# 3.3 Android 设置方法

初始化SDK时,通过UIConfig进行配置,如下:

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

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

# 4.1 覆盖范围

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

# 4.2iOS 设置方法

初始化SDK时,通过UIConfig进行配置,如下:

无,iOS无该设置项

# 4.3 Android 设置方法

初始化SDK时,通过UIConfig进行配置,如下:

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

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

# 5.1 覆盖范围

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

# 5.2 设置方法

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

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

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

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

# 6.1 覆盖范围

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

# 6.2 iOS 设置方法

初始化SDK时,通过UIConfig进行配置,如下:

无,iOS无该设置项

# 6.3 Android 设置方法

初始化SDK时,通过UIConfig进行配置,如下:

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// 当导航栏为默认导航栏时,是否始终显示返回按钮
uiConfig.setAlwaysShowBackInDefaultNavigationBar(false);
© 2021 凡泰极客
  • 免费试用
  • 编组
  • 编组 2