Customize close button

The super app can customize the appearance of the title bar close button in HTML5 mini programs to ensure a consistent user interface. The close button allows users to close a mini program. It can be either an image button or a text button. To customize the close button, the super app must implement the GRVNavigationCloseButtonItemProtocol protocol. This topic covers the user experience, implementation steps, and protocol details.

Note: To control the visibility of the title bar close button, refer to showCloseButton.

User experience

By default, the title bar close button in HTML5 mini programs is a cross-shaped icon (×). The following table shows UI examples of both the default and custom close buttons:

Procedure

To customize the close button, take the following two steps:

Step 1: Implement the GRVNavigationCloseButtonItemProtocol protocol

Define a class that implements the GRVNavigationCloseButtonItemProtocol protocol. Refer to the following sample implementations for the image and the text buttons, respectively. For more information about the protocol and its defined properties, refer to GRVNavigationCloseButtonItemProtocol.

Custom image button

Refer to the following code to create a custom image button:

class CloseButtonCustomization: NSObject, GRVNavigationCloseButtonItemProtocol {
    var itemContentType: GRVNavigationItemContentType = .image
    var image: UIImage? = UIImage(named: "xxx")?.withRenderingMode(.alwaysOriginal)
    var text: String? = nil
}

Custom text button

Refer to the following code to create a custom text button:

class CloseButtonCustomization: NSObject, GRVNavigationCloseButtonItemProtocol {
    var itemContentType: GRVNavigationItemContentType = .text
    var image: UIImage? = nil
    var text: String? = "Close"
}

Step 2: Configure pageCloseButtonItemSetting

After initializing the SDK, create an instance of GRVExtensionDelegate and assign the implementation (for example, CloseButtonCustomization in the sample) to the pageCloseButtonItemSetting property of the delegate's uiProvider. Refer to the following sample configuration code:

let extensionDelegate = GRVExtensionDelegate()
extensionDelegate.uiProvider.pageCloseButtonItemSetting = CloseButtonCustomization()

Structures

GRVNavigationCloseButtonItemProtocol protocol

The GRVNavigationCloseButtonItemProtocol protocol defines a set of properties for the super app to customize the title bar close button in HTML5 mini programs. The property values will be retrieved by the SDK for rendering. Refer to the following code for the protocol definition:

typedef NS_ENUM(NSUInteger, GRVNavigationItemContentType) {
    GRVNavigationItemContentText,
    GRVNavigationItemContentImage
};

@protocol GRVNavigationItemProtocol <NSObject>

@required
@property (nonatomic, assign) GRVNavigationItemContentType itemContentType;
@property (nonatomic, copy) NSString * _Nullable text;
@property (nonatomic, strong) UIImage * _Nullable image;

@end

@protocol GRVNavigationCloseButtonItemProtocol <GRVNavigationItemProtocol>

@end

The following table lists the property details of this protocol: