# 设置小程序更多菜单

# 1. 效果展示

点击右上角胶囊中的“...”即可唤起如下更多菜单页面

4-1-1.png

# 2. 屏蔽更多菜单中的“转发”按钮

# 2.1 覆盖范围

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

# 2.2 iOS 设置方法

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

//屏蔽更多菜单中的“转发”按钮
[FATClient sharedClient].uiConfig.hideForwardMenu = YES;

# 2.3 Android 设置方法

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

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// 是否隐藏"更多"菜单中的"转发"按钮
uiConfig.setHideForwardMenu(true);

# 3. 屏蔽更多菜单中的“返回首页”按钮

# 3.1 覆盖范围

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

# 3.2 iOS 设置方法

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

//屏蔽更多菜单中的“返回首页”按钮
[FATClient sharedClient].uiConfig.hideBackToHome = YES;

# 3.3 Android 设置方法

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

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// 是否隐藏"更多"菜单中的"返回首页"菜单入口
uiConfig.setHideBackHome(true);

# 4. 屏蔽更多菜单中的“反馈与投诉”按钮

# 4.1覆盖范围

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

# 4.2iOS 设置方法

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

//屏蔽更多菜单中的“反馈与投诉”按钮
[FATClient sharedClient].uiConfig.hideFeedbackMenu = YES;

# 4.3 Android 设置方法

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

FinAppConfig.UIConfig uiConfig = new FinAppConfig.UIConfig();
// 是否隐藏更多菜单中的"反馈与投诉"
uiConfig.setHideFeedbackAndComplaints(true);

# 5. 自行注入其他能力的方法

# 5.1 覆盖范围

该设置由App实现,可以针对不同的小程序id注入不同的自定义“更多”菜单项。

# 5.2 iOS 设置方法

“更多”菜单中菜单项的注入通过FATAppletDelegate来实现的,FATAppletDelegate会把获取注入菜单项的接口方法customMenusInApplet:atPath:和点击注入菜单项的接口方法customMenu:inApplet:didClickAtPath:回调给宿主应用,由宿主应用实现具体的业务逻辑。

[FATClient sharedClient].delegate = self;

实现示范:

@interface FATCustomMenuModel : NSObject<FATAppletMenuProtocol>

@end

- (NSArray<id<FATAppletMenuProtocol>> *)customMenusInApplet:(FATAppletInfo *)appletInfo atPath:(NSString *)path
{
    FATCustomMenuModel *favModel1 = [[FATCustomMenuModel alloc] init];
    favModel1.menuId = @"WXShareAPPFriends";
    favModel1.menuTitle = @"微信好友";
    favModel1.menuIconImage = [UIImage imageNamed:@"mini_menu_chat"];
    favModel1.menuType = FATAppletMenuStyleOnMiniProgram;//为需要和小程序有交互的菜单类型,例如分享小程序按钮,点击按钮分享小程序时,可能需要获取到小程序的一些数据

    // 默认为普通菜单类型,不需要和小程序有交互
    FATCustomMenuModel *favModel2 = [[FATCustomMenuModel alloc] init];
    favModel2.menuId = @"1002";
    favModel2.menuTitle = @"微信朋友圈";
    favModel2.menuIconImage = [UIImage imageNamed:@"mini_menu_timeline"];
    
    return @[favModel1, favModel2];
}

- (void)customMenu:(id<FATAppletMenuProtocol>)customMenu inApplet:(FATAppletInfo *)appletInfo didClickAtPath:(NSString *)path
{
    NSLog(@"点击了:%@",customMenu.menuTitle);
}

# 5.3 Android 设置方法

“更多”菜单中菜单项的注入通过IAppletHandler来实现的,IAppletHandler会把获取注入菜单项的接口方法getRegisteredMoreMenuItems和点击注入菜单项的接口方法onRegisteredMoreMenuItemClicked回调给宿主应用,由宿主应用实现具体的业务逻辑。

getRegisteredMoreMenuItemsonRegisteredMoreMenuItemClicked如下:

/**
 * 获取注册的"更多"菜单项
 *
 * @param appId 小程序ID
 * @return 注册的"更多"菜单项
 */
fun getRegisteredMoreMenuItems(appId: String): List<MoreMenuItem>?

/**
 * 注册的"更多"菜单项被点击
 *
 * @param appId 小程序ID
 * @param path 小程序页面路径
 * @param menuItemId 被点击的菜单条目的ID
 * @param appInfo 小程序信息,是一串json,包含了小程序id、小程序名称、小程序图标、用户id、转发的数据内容等信息。
 * [appInfo]的内容格式如下:
 * {
 *      "appTitle": " FinClip 小程序",
 *      "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-接口测试发布的动态!@#¥%……&*(",
 *           "desc": "您身边的服务专家",
 *           "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"
 *                    }
 *               }
 *           }
 *       }
 * }
 * [appInfo]中各字段的说明:
 * appId 小程序ID
 * appTitle 小程序名称
 * appAvatar 小程序头像
 * appType 小程序类型,其中trial表示体验版,temporary表示临时版,review表示审核版,release表示线上版,development表示开发版
 * userId 用户ID
 * cryptInfo 小程序加密信息
 * params 附带的其它参数,由小程序自己透传
 *
 * @param bitmap 小程序封面图片。如果[appInfo].params.imageUrl字段为http、https的链接地址,那么小程序封面图片
 * 就取[appInfo].params.imageUrl对应的图片,否则小程序的封面图片取[bitmap]。
 * @param callback 结果回调。
 */
fun onRegisteredMoreMenuItemClicked(appId: String, path: String, menuItemId: String, appInfo: String?, bitmap: Bitmap?, callback: IAppletCallback)

IAppletHandler实例需要通过调用IAppletApiManagersetAppletHandler(appletHandler: IAppletHandler)方法传入。

getRegisteredMoreMenuItems方法和onRegisteredMoreMenuItemClicked方法实现示例如下:

/**
 * {@link IAppletHandler}实现类,用于实现一些业务场景,例如注册"更多"菜单项,转发小程序等。
 */
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", "微信好朋友", MoreMenuType.ON_MINI_PROGRAM);
        items.add(item0);
        MoreMenuItem item1 = new MoreMenuItem("WXShareAPPMoments", "微信朋友圈", MoreMenuType.ON_MINI_PROGRAM, true);
        items.add(item1);
        MoreMenuItem item2 = new MoreMenuItem("ShareSinaWeibo", "新浪微博", 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", "标题以后端配置为准", 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, "小程序" + appId + "的" + path + "页面的菜单" + menuItemId + "被点击了,appInfo : " + appInfo + " bitmap : " + bitmap, Toast.LENGTH_SHORT).show();
        callback.onSuccess(null);
    }
}

MoreMenuItem为菜单条目数据类,如下:

/**
 * 更多菜单条目
 *
 * @param id 菜单条目ID
 * @param title 菜单菜单条目标题
 * @param image 菜单条目图标地址
 * @param icon 菜单条目图标对应的资源ID
 * @param type 菜单条目类型
 * @param isEnable 菜单条目是否可用
 */
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) {

    /**
     * 构造方法
     * @param id 菜单条目ID
     * @param title 菜单菜单条目标题
     * @param type 菜单条目类型[MoreMenuType.COMMON]或[MoreMenuType.ON_MINI_PROGRAM]
     */
    constructor(id: String, title: String, type: MoreMenuType) : this(id, title, "", -1, type, true)
}

MoreMenuType是一个枚举类,如下:

/**
 * 更多菜单类型
 * [COMMON]为普通菜单类型,不需要和小程序有交互
 * [ON_MINI_PROGRAM]为需要和小程序有交互的菜单类型,例如分享小程序按钮,点击按钮分享小程序时,可能需要获取到小程序的一些数据
 */
enum class MoreMenuType {
    COMMON, ON_MINI_PROGRAM
}
© 2021 凡泰极客
  • 免费试用
  • 编组
  • 编组 2