Customize the more menu for mini program

2024-05-16 07:13

Customize the more menu for mini program

When users click the options menu in the mini program, the Griver shows a panel containing lots of menus. By default, there is not any menu. To add menus in your app such as Share, About the mini program, and other menus, implement the GriverMenuExtension. The default panel is shown below.

GriverMenuExtension

copy
public interface GriverMenuExtension extends GriverExtension {

    /**
     * The menu list to be displayed when users click the "..." option menu in the title bar.
     *
     * @return The list of the menu item {@link GriverMenuItem}.
     */
    List<GriverMenuItem> getMenuList();

}

You can return a list of menus to Griver, then Griver renders the menus in the panel.

GriverMenuItem

Properties

GriverMenuItem contains the following properties.

Property	Type	Nullable	Description
id	String	No	The id of the menu, which should be unique among all menus.
name	String	No	The name of the menu. It is displayed in the panel.
iconUrl	String	Yes	A URL for the icon. It is displayed in the panel.
iconDrawable	int	Yes	The local drawable id of the icon. It has a lower priority than `iconUrl`.
listener	OnMenuClickListener	Yes	The listener when users click the menu. If you want to listen to the event, it should not be null.
row	int	NO	The row of the menu, supporting 1 and 2. The row 1 menu is in the first row and 2 in the second row. Please note that if you do not set the row, the menu is not displayed in any row.

Here is the definition of OnMenuClickListener

copy
public interface OnMenuItemClickListener {
    void onItemClick(Page page, String id);
}

You can know which menu is clicked by the id. And get the context such as the page URL and activity context from the page.

Method

Method

Param

Return Value

Description

canShow

Page

boolean

Return true to display the menu.

Return false to not display the menu.

Each menu item judges whether to display according to the appId and other conditions of the mini program.

If a menu is always displayed, it extends the GriverBaseMenuItem.

Griver default menu

Griver provides some default menus.

Menu	Description	Row
ShareMenu	Support to share mini program.	1
SettingMenu	Support to manage permissions granted by users.	2
FeedbackMenu	Support to get customer feedback.	2
AboutMenu	Support to get the mini program info.	2

Sample code

Implement the GriverMenuExtension

copy
public class TestMenuExtensionImpl implements GriverMenuExtension {

    @Override
    public List<GriverMenuItem> getMenuList(Page page) {
        List<GriverMenuItem> menuItems = new LinkedList<>();
        menuItems.add(new ShareMenu());
        menuItems.add(new SettingMenu());
        menuItems.add(new FeedbackMenu());
        menuItems.add(new AboutMenu());
        return menuItems;
    }
}

Register the extension after Griver is initialized

copy
 Griver.registerExtension(new GriverExtensionManifest(
            GriverMenuExtension.class, new TestMenuExtensionImpl()));