FinClip

Appearance

Mini Program More Menu Style Config ​

1. Effect show ​

Click on the "..." in the top right capsule This brings up the following more menu pages

2. Block the "Forward" button in the More menu ​

2.1 Coverage ​

This setting is implemented by the App, once set, all the mini programs in the App will be implemented according to this effect

2.2 Android setup method ​

When initializing the SDK, configure it through UI configuration items, as follows:

kotlin
FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
//Block the "Forward" button in the More Menu
uiConfig.setHideForwardMenu(true);

3. Block the "Settings" button in the More menu ​

3.1 Coverage ​

This setting is implemented by the App, once set, all the mini programs in the App will be implemented according to this effect

3.2 Android setup method ​

When initializing the SDK, the configuration is done through the UI configuration items as follows:

java
// UI Configuration
FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// Whether to hide the "Settings" button in the "More" menu
uiConfig.setHideSettingMenu(true);

4. Block the "Back to Home" button in the More menu ​

4.1 Coverage ​

This setting is implemented by the App, once set, all the mini programs in the App will be implemented according to this effect

4.2 Android setup method ​

When initializing the SDK, the configuration is done through the UI configuration items as follows:

java
FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// Whether to hide the "Back to Home" menu entry in the "More" menu
uiConfig.setHideBackHome(true);

Notes:

The "Back to Home" button in the More menu has been deprecated since version 2.36.1, and this configuration item has been changed to control the "Back to Home" button on the navigation bar.

5. Block the "Feedback & Complaints" button in the More menu ​

5.1 Coverage ​

This setting is implemented by the App, once set, all the mini programs in the App will be implemented according to this effect

5.2 Android setup method ​

When initializing the SDK, the configuration is done through the UI configuration items as follows:

java
FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// Whether to hide "Feedback & Complaints" in the More menu
uiConfig.setHideFeedbackAndComplaints(true);

6.Block the "Re-enter" button in the More menu ​

6.1 Coverage ​

This setting is implemented by the App, once set, all the mini programs in the App will be implemented according to this effect

6.2 Android setup method ​

When initializing the SDK, the configuration is done through the UI configuration items as follows:

java
FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// Whether to hide "Feedback & Complaints" in the More menu
uiConfig.setHideRefreshMenu(true);

7. Implement more panels on your own ​

If you don't want to use the more panels provided by the SDK and want to customize the implementation of a more panel, you can do so as follows.

7.1 Coverage ​

This setting is implemented by the App, which can achieve different more panel effects for different mini program ids. The more panel is designed and implemented by the App, and the view style and menu items can be controlled by the App.

7.2 Android setup method ​

Custom more panel is realized by IAppletProcessHandler, IAppletProcessHandler will call the onNavigationBarMoreButtonClicked that triggers the mini program "..." Click event of onNavigationBarMoreButtonClicked callback to the host, by the host to achieve the effect of more panels.

/**
 * mini program abstract business callback interface, the SDK will be these abstract business through the form of interface exposed to the external, by the external concrete implementation
 * (mini program process)
 */
interface IAppletProcessHandler {

    /**
     * The "More" button in the mini program navigation bar is clicked
     *
     * @param appId mini program ID
     * @return Returning true means that the button click event is handled by itself and no default action (popup menu) needs to be performed. Returning false means that the default action needs to be performed
     */
    fun onNavigationBarMoreButtonClicked(context: Context, appId: String): Boolean
}

The onNavigationBarMoreButtonClicked method implementation example is as follows:

public class AppletProcessHandler implements IAppletProcessHandler {

    @NonNull
    private Context mContext;

    private AppletProcessHandler() {
    }

    public AppletProcessHandler(@NonNull Context context) {
        this.mContext = context;
    }

    @Nullable
    @Override
    fun onNavigationBarMoreButtonClicked(context: Context, appId: String): Boolean {
        // If you need to customize more panels, write the logic to show more panels here and return true.
        // If you do not need to customize more panels, you can return false.
        return false
    }
}

8. Self-injecting menu items in the More panel ​

The current SDK supports adding custom menu items to more panels, and menu items are classified by type as common and onMiniProgram types.

  • common: This type does not require additional processing by the mini program
  • onMiniProgram: This type gets data from the mini program when the menu is clicked to provide business processing to the app.

Tips

  1. Custom menu items can be configured by the admin backend to be displayed or not, and the menu ID configured by the admin backend should correspond to the custom menu ID. If the admin background is not configured, it will not affect the menu injected in the App side. 2.
  2. onMiniProgram type menu, if you want to display it, you must implement on{MenuId}ButtonHandler(id is initial capitalization) in the current page, for example, if the menu ID is ShareDingDing, the method name to implement is onShareDingDingButtonHandler. 3.
  3. the menu items displayed in the final more panel are taken from the intersection of the menu items returned by the admin backend, the menu items injected by the app, and the menu items implemented in the current page of the mini program.

As an example: If the set of menu item events implemented on the current page of the mini program is A;
A collection of menu items injected by App as B, containing collection B1 for menus of type common and collection B2 for menus of type onMiniProgram;
The collection of menus configured by the administration backend is C;

The final result of the custom menu collection displayed, in two cases:

1)If C is empty (null for Android, nil for iOS), then
A and B2 take the intersection to obtain D;
D and B1 are combined to obtain E;
The final result is E.

2)If C is not null (not null for Android, not nil for iOS), then:
A and B2 take the intersection to obtain D;
D and B1 are combined to obtain E;
E and C take the intersection to obtain F;
The final result is F.

Tips

  1. If C is [], it means that all custom menus are not displayed.
  2. For the work to be done on the mini program side, refer to mini program-API-custom menu
  3. Why take the intersection? Since the behavior of the custom menu needs to be implemented by the App, if it is only configured by the backend, it will result in a situation where the menu is displayed and the click is not responsive.

8.1 Coverage ​

This setting is implemented by the App and can be used to inject different custom menu items in the more panel of the SDK for different mini program ids.

8.2 Android setup method ​

The injection of menu items in the "More" menu is implemented by IAppletHandler, which will call back the interface method getRegisteredMoreMenuItems to get the injected menu items and the interface method onRegisteredMoreMenuItemClicked to the host application, which will implement the specific business logic.

getRegisteredMoreMenuItems和onRegisteredMoreMenuItemClickedas follows.

kotlin
/**
 * Get the registered "More" menu item
 *
 * @param appId mini program ID
 * @return Register for the "More" menu item
 */
fun getRegisteredMoreMenuItems(appId: String): List<MoreMenuItem>?

/**
 * The "More" menu item of the registration is clicked
 *
 * @param appId mini program ID
 * @param path mini program page path
 * @param menuItemId ID of the clicked menu item
 * @param appInfo mini program information, a string of json, contains information such as mini program id, mini program name, mini program icon, user id, forwarded data content, etc.
 * The content of [appInfo] has the following format:
 * {
 *      "appTitle": " FinClip mini program",
 *      "appAvatar": "https:\/\/www.finogeeks.club\/statics\/images\/swan_mini\/swan_logo.png",
 *      "appId": "5df36b3f687c5c00013e9fd1",
 *      "appType": "trial",
 *      "userId": "finogeeks",
 *      "cryptInfo": "SFODj9IW1ENO8OA0El8P79aMuxB1DJvfKenZd7hrnemVCNcJ+Uj9PzkRkf/Pu5nMz0cGjj0Ne4fcchBRCmJO+As0XFqMrOclsqrXaogsaUPq2jJKCCao03vI8rkHilrWxSDdzopz1ifJCgFC9d6v29m9jU29wTxlHsQUtKsk/wz0BROa+aDGWh0rKvUEPgo8mB+40/zZFNsRZ0PjsQsi7GdLg8p4igKyRYtRgOxUq37wgDU4Ymn/yeXvOv7KrzUT",
 *      "params": {
 *           "title": "apt-test-tweet-The dynamics of interface test releases！@#￥%……&*（",
 *           "desc": "Service experts by your side",
 *           "imageUrl": "finfile:\/\/tmp_fc15edd8-2ff6-4c54-9ee9-fe5ee034033d1576550313667.png",
 *           "path": "pages\/tweet\/tweet-detail.html?fcid=%40staff_staff1%3A000000.finogeeks.com&timelineId=db0c2098-031e-41c4-b9c6-87a5bbcf681d&shareId=3dfa2f78-19fc-42fc-b3a9-4779a6dac654",
 *           "appInfo": {
 *               "weixin": {
 *                   "path": "\/studio\/pages\/tweet\/tweet-detail",
 *                   "query": {
 *                       "fcid": "@staff_staff1:000000.finogeeks.com",
 *                       "timelineId": "db0c2098-031e-41c4-b9c6-87a5bbcf681d"
 *                    }
 *               }
 *           }
 *       }
 * }
 * Description of the fields in [appInfo]:
 * appId mini program ID
 * appTitle mini program name
 * appAvatar mini program avatar
 * appType mini program type, where trial means experience version, temporary means temporary version, review means review version, release means online version, development means development version
 * userId User ID
 * cryptInfo mini program encryption information
 * params Other parameters attached, passed by the mini program itself
 *
 * @param bitmap The cover image of the mini program. If the [appInfo].params.imageUrl field is a link address of http, https, then the mini program cover image
 * Otherwise, the cover image of the mini program is taken as [bitmap].
 * @param callback result callback.
 */
fun onRegisteredMoreMenuItemClicked(appId: String, path: String, menuItemId: String, appInfo: String?, bitmap: Bitmap?, callback: IAppletCallback)

The IAppletHandler instance needs to be passed in by calling the setAppletHandler(appletHandler: IAppletHandler) method of the IAppletApiManager.

The getRegisteredMoreMenuItems method and the onRegisteredMoreMenuItemClicked method are implemented as follows.

java
/**
 * {@link IAppletHandler} implementation class, used to implement some business scenarios, such as registering "more" menu items, forwarding mini programs, etc.
 */
public class AppletHandler implements IAppletHandler {

    @NonNull
    private Context mContext;

    private AppletHandler() {
    }

    public AppletHandler(@NonNull Context context) {
        this.mContext = context;
    }

    @Nullable
    @Override
    public List<MoreMenuItem> getRegisteredMoreMenuItems(@NotNull String appId) {
        List<MoreMenuItem> items = new ArrayList<>();
        MoreMenuItem item0 = new MoreMenuItem("WXShareAPPFriends", "WeChat Good Friends", MoreMenuType.ON_MINI_PROGRAM);
        items.add(item0);
        MoreMenuItem item1 = new MoreMenuItem("WXShareAPPMoments", "WeChat Friend Circle", MoreMenuType.ON_MINI_PROGRAM, true);
        items.add(item1);
        MoreMenuItem item2 = new MoreMenuItem("ShareSinaWeibo", "Sina Weibo", MoreMenuType.ON_MINI_PROGRAM);
        items.add(item2);
        MoreMenuItem item3 = new MoreMenuItem("ShareQQFirends", "QQ", MoreMenuType.ON_MINI_PROGRAM);
        items.add(item3);
        MoreMenuItem item4 = new MoreMenuItem("ShareDingDing", "Dingding", MoreMenuType.ON_MINI_PROGRAM);
        items.add(item4);
        MoreMenuItem item5 = new MoreMenuItem("ShareLinks", "The title is based on the back-end configuration", MoreMenuType.ON_MINI_PROGRAM);
        items.add(item5);
        MoreMenuItem item6 = new MoreMenuItem("SharePicture", "SharePicture", MoreMenuType.ON_MINI_PROGRAM);
        items.add(item6);
        MoreMenuItem item7 = new MoreMenuItem("Restart", "Restart", MoreMenuType.COMMON);
        items.add(item7);
        MoreMenuItem item8 = new MoreMenuItem("Desktop", "Desktop", MoreMenuType.COMMON);
        items.add(item8);
        return items;
    }

    @Override
    public void onRegisteredMoreMenuItemClicked(@NotNull String appId, @NotNull String path, @NotNull String menuItemId, @Nullable String appInfo, @Nullable Bitmap bitmap, @NotNull IAppletCallback callback) {
        Toast.makeText(mContext, "mini program" + appId + "'s" + path + "Menu of the page" + menuItemId + "was clicked, appInfo : " + appInfo + " bitmap : " + bitmap, Toast.LENGTH_SHORT).show();
        callback.onSuccess(null);
    }
}

MoreMenuItem is the menu entry data class, as follows:

kotlin
/**
 * More menu entries
 *
 * @param id Menu entry ID
 * @param title Menu menu entry title
 * @param image Menu entry icon address
 * @param icon The resource ID corresponding to the menu entry icon
 * @param type Menu entry type
 * @param isEnable Availability of menu entries
 */
data class MoreMenuItem(val id: String,
                        val title: String,
                        val image: String,
                        @DrawableRes val icon: Int,
                        val type: MoreMenuType = MoreMenuType.COMMON,
                        val isEnable: Boolean = true) {

    /**
     * Construction method
     * @param id Menu entry ID
     * @param title Menu menu entry title
     * @param type Menu entry type [MoreMenuType.COMMON]或[MoreMenuType.ON_MINI_PROGRAM]
     */
    constructor(id: String, title: String, type: MoreMenuType) : this(id, title, "", -1, type, true)
}

MoreMenuType is an enumeration class, as follows.

kotlin
/**
 * More menu types
 * [COMMON] is a normal menu type, no interaction with the mini program is required
 * [ON_MINI_PROGRAM] is the type of menu that needs to interact with the mini program, such as the share mini program button, when you click the button to share the mini program, you may need to get some data about the mini program
 */
enum class MoreMenuType {
    COMMON, ON_MINI_PROGRAM
}

Copyright © 2024 FinClip