iOS 小程序自定义导航栏

自 10.1.60 版本基线起,iOS 小程序支持对导航栏进行自定义,您可以对导航栏中的标题、背景、返回按钮、右侧的设置和关闭按钮进行自定义。本文将向您详细介绍关于自定义 iOS 小程序导航栏的方法。

自定义导航栏背景和标题

全局自定义导航栏背景和标题

如果您要全局自定义小程序所有页面默认导航栏背景和标题,则需要在 app.json 中修改 window 配置。

  • 导航栏隐藏:您需要自定义 JSAPI 实现。

  • 导航栏透明:"transparentTitle": "always"

  • 导航栏渐变:"transparentTitle": "auto"

  • 导航栏颜色:"titleBarColor": "#f00"

  • 导航栏标题文案:"defaultTitle": "Alert"

  • 导航栏标题颜色:在 H5 基类的 viewWillAppear 方法的 super 之中,修改当前页面 titleView 的样式。

    - (void)viewWillAppear:(BOOL)animated
    {
        [super viewWillAppear:animated];   
        ...
        BOOL isTinyApp = [NBUtils isTinyAppWithSession:self.psdSession];
        if (isTinyApp) {
            id<NBNavigationTitleViewProtocol> titleView = self.navigationItem.titleView;
            [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
            [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
        }
     }
  • 导航栏标题图片:"titleImage": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png"

  • 导航栏标题位置:请参考以下代码进行实现。

    - (NSDictionary *)nebulaCustomConfig
    {
        NSString* leftConfig = @"{\"enable\":true,\"appIdBlacklist\":[],\"appIdWhitelist\":[\".*\"]}";
        return @{@"h5_tinyAppTitleViewAlignLeftConfig" : leftConfig };
    }

自定义某一页面导航栏背景和标题

如果您要自定义小程序中某一页面的导航栏背景和标题,则需要在该页面的 .json 中配置。

  • 导航栏隐藏:您需要自定义 JSAPI 实现。

  • 导航栏透明:"transparentTitle": "always"

  • 导航栏渐变:"transparentTitle": "auto"

  • 导航栏颜色:"titleBarColor": "#f00"

  • 导航栏标题文案:"defaultTitle": "Alert"

  • 导航栏标题颜色:您需要自定义 JSAPI,在 JSAPI 中修改当前页面 titleView 的样式。

- (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSD JSAPI ResponseCallbackBlock)callback
{
    [super handler:data context:context callback:callback];

     // 可以通过data传递字体、颜色等  
    id<NBNavigationTitleViewProtocol> titleView = context.currentViewController.navigationItem.titleView;
    [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
    [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
}
  • 导航栏标题图片:"titleImage": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png"

动态修改当前页面的导航栏背景和标题

如果您要动态修改当前页面的导航栏背景和标题,则需要调用 my.setNavigationBar 进行配置。

  • 导航栏隐藏:您需要自定义 JSAPI 实现。

  • 导航栏透明:不支持。

  • 导航栏渐变:不支持。

  • 导航栏颜色:"backgroundColor": "#f00"

  • 导航栏标题文案:"title": "新标题"

  • 导航栏标题颜色:您需要自定义 JSAPI,在 JSAPI 中修改当前页面 titleView 的样式。

    - (void)handler:(NSDictionary *)data context:(PSDContext *)context callback:(PSD JSAPI ResponseCallbackBlock)callback
    {
        [super handler:data context:context callback:callback];
    
         // 可以通过 data 传递字体、颜色等
        id<NBNavigationTitleViewProtocol> titleView = context.currentViewController.navigationItem.titleView;
        [[titleView mainTitleLabel] setFont:[UIFont systemFontOfSize:16]];
        [[titleView mainTitleLabel] setTextColor:[UIColor redColor]];
    }
  • 导航栏标题图片:"image": "https://pic.alipayobjects.com/e/201212/1ntOVeWwtg.png"

自定义导航栏返回按钮

如果您要全局修改返回按钮样式,则需要在 H5 基类的 viewWillAppear 方法的 super 之中,修改当前页面 leftBarButtonItem 样式。可修改的样式包含以下内容,您可以参考下方代码段以获得更多指导。

  • 修改返回箭头和文案颜色

  • 修改返回箭头样式和文字内容

  • 隐藏返回箭头

  • 隐藏返回文案

    // 修改左侧返回按钮样式
    AUBarButtonItem *backItem = self.navigationItem.leftBarButtonItem;
    if ([backItem isKindOfClass:[AUBarButtonItem class]]) {
        // 在默认返回按钮基础上,修改返回箭头和文案颜色
        backItem.backButtonColor = [UIColor greenColor];
        backItem.titleColor = [UIColor colorFromHexString:@"#00ff00"];
    
        // 修改返回箭头样式和文字内容
        // backItem.backButtonTitle = @"回退";
        // backItem.backButtonImage = [UIImage imageNamed:@"APCommonUI.bundle/add"];
    
        // 隐藏返回箭头
        // backItem.hideBackButtonImage = YES;
    
        // 隐藏返回文案:文案设置为透明,保留返回按钮的点击区域
        // backItem.titleColor = [UIColor clearColor];
    }

导航栏右侧设置和关闭按钮

全局修改右侧按钮图片和颜色

如果您要修改右侧按钮图片和颜色,则需要引入头文件 #import <TinyappService/TASUtils.h> 并进行如下配置。

  • 修改关闭按钮颜色:[TASUtils sharedInstance].customItemColor = [UIColor redColor]

  • 修改关闭按钮图片:[TASUtils sharedInstance].customCloseImage = [UIImage imageNamed:@"xx"]

  • 显示分享按钮:[TASUtils sharedInstance].shoulShowSettingMenu = YES

  • 修改分享按钮图片:[TASUtils sharedInstance].customSettingImage = [UIImage imageNamed:@"xx"]

  • 修改分享按钮颜色:[TASUtils sharedInstance].customItemColor = [UIColor redColor]

全局修改右侧按钮样式

如果您要全局修改右侧按钮样式,则需要在 H5 基类的 viewwillAppear 中,重写当前页面的 rightBarButtonItem

- (void)viewWillAppear:(BOOL)animated
{
    [super viewWillAppear:animated];   
    ...
    BOOL isTinyApp = [NBUtils isTinyAppWithSession:self.psdSession];
    if (isTinyApp) {
        self.navigationItem.rightBarButtonItem = [[UIBarButtonItem alloc] initWithTitle:@"关闭" style:UIBarButtonItemStylePlain target:self action:@selector(onClickClose)];
    }
 }

- (void)onClickClose
{
    [TASUtils exitTinyApplication:self.appId];
}
阿里云首页 移动开发平台 mPaaS 相关技术圈