tencent cloud

Feedback

Custom UIs

Last updated: 2024-03-08 14:19:29

    Configuring the Loading Page UI

    The TCMPP Mini Program Engine allows the host App to redefine the loading page during the mini program's loading process, replacing the default loading page within the SDK. This is achieved by implementing the customLoadingViewWithAppInfo in the TMFMiniAppSDKDelegate protocol. The reference code is as follows:
    - (UIView *)customLoadingViewWithAppInfo:(TMFMiniAppInfo *)appInfo frame:(CGRect)frame {
        UIView *view = [[UIView alloc] initWithFrame:frame];
        //todo: Set specific view-related content
    
        return view;
    }

    Setting Mini Program Navigation Bar Resources

    The TCMPP Mini Program Engine allows the host App to redefine the mini program's navigation bar resources, replacing the default resources to achieve its own style. This is achieved by implementing the stringWithConfigKey in the TMFMiniAppSDKDelegate protocol. Currently, the following settings are supported:
    Key
    Description
    TMA_SK_MINIAPP_CloseButton
    Close Button Icon
    TMA_SK_MINIAPP_CloseButtonDark
    Close Button Icon in dark theme
    TMA_SK_MINIAPP_HomeButton
    Home Button Icon
    TMA_SK_MINIAPP_HomeButtonDark
    Home Button Icon in dark theme
    TMA_SK_MINIAPP_BackButton
    Return Button Icon
    TMA_SK_MINIAPP_BackButtonDark
    Return Button Icon in dark theme
    TMA_SK_MINIAPP_MoreButton
    More Button Icon
    TMA_SK_MINIAPP_MoreButtonDark
    More Button Icon in dark theme
    TMA_SK_MINIAPP_RecordButton
    Recording Button Icon
    TMA_SK_MINIAPP_RecordButtonDark
    Recording Button Icon in dark theme
    TMA_SK_MINIAPP_MoreBackground
    Capsule Section's Background Image
    TMA_SK_MINIAPP_MoreBackgroundDark
    Capsule Section's Background Image in dark theme
    The reference code is as follows:
    - (NSString *)stringWithConfigKey:(NSString *)key {
    // Set the close button for light mode
        if([key isEqualToString:TMA_SK_MINIAPP_CloseButton]) {
            return [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"white_close-circle.png"];
        } else if([key isEqualToString:TMA_SK_MINIAPP_CloseButtonDark]) {
            return [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"dark_close-circle.png"];
        }
    
        return nil;
    }

    Setting the Mini Program's "More" menu

    The TCMPP Mini Program Engine supports the host App to redefine the handling of the capsule popped up by the "More" button on the Mini Program navigation bar, including:
    1. Add custom menu items to the capsule page
    Through the customizedConfigForShare in the TMFMiniAppSDKDelegate protocol, content can be added to the capsule view. The added options are divided into two categories:
    MAUIDelegateShareViewTypeCustomizedShare: This share type will follow the sharing logic within the mini program, triggering the share operation implemented by shareMessageWithMod in TMFMiniAppSDKDelegate.
    MAUIDelegateShareViewTypeCustomizedAction: A custom operation type that allows for the customization of callback events.
    The reference code is as follows:
    - (NSArray<TMASheetItemInfo *> *)customizedConfigForShare {
        NSMutableArray *arrays = [[NSMutableArray alloc] init];
        TMASheetItemInfo *item1 = [[TMASheetItemInfo alloc] initWithTitle:@"More sharing" type:MAUIDelegateShareViewTypeCustomizedShare shareTarget:100 shareKey:@"my"];
        item1.icon = [UIImage imageNamed:@"icon_moreOperation_shareChat"];
        [arrays addObject:item1];
    
        TMASheetItemInfo *item2 = [[TMASheetItemInfo alloc] initWithTitle:@"click" type:MAUIDelegateShareViewTypeCustomizedAction action:^(TMASheetActionParams * _Nullable params) {
            NSLog(@"click");
        }];
    
        item2.icon = [UIImage imageNamed:@"icon_moreOperation_collect"];
        [arrays addObject:item2];
    
        return arrays;
    }
    2. Customize the capsule popup view
    Through the showShareViewWithTitle in the TMFMiniAppSDKDelegate protocol, the custom display of the capsule view can be implemented.
    /// Share Panel
    /// If this method is not implemented, "showActionSheetWithTitle:cancelButtonTitle:cancelAction:otherButtonTitleAndActions:dismissBlock:presentingViewController:" will be called.
    /// @param title: Title
    /// @param cancelAction: Cancel operation
    /// @param otherButtonTitleAndActions: Other buttons and corresponding actions
    /// @param dismissBlock: Actions to be executed after the panel is dismissed (must be called to ensure correct functionality.)
    /// @param parentVC: ViewController initiating the panel
    - (void)showShareViewWithTitle:(nullable NSString *)title
                      cancelAction:(nullable dispatch_block_t)cancelAction
        otherButtonTitleAndActions:(nullable NSArray *)otherButtonTitleAndActions
                      dismissBlock:(nullable dispatch_block_t)dismissBlock
                          parentVC:(UIViewController *)parentVC;

    Setting Mini Program Transition Animation

    Through the getTMFSlideAnimationType in the TMFMiniAppSDKDelegate protocol, you can implement the transition animation when the Mini Program starts. Currently, it supports the following types: Enter from Bottom, Exit from Top; Enter from Top, Exit from Bottom; Enter from Left, Exit from Right; Enter from Right, Exit from Left; and the Default Type (Enter and Exit from Bottom).
    // Set the transition animation at the start of the Mini Program to "Enter from Bottom, Exit from Top".
    - (TMFSlideAnimationType)getTMFSlideAnimationType{
        return TMFSlideAnimationTypeBottomToTop;
    }

    Setting Mini Program Permission Dialog Box

    Through the createAuthorizeAlertViewWithFrame in the TMFMiniAppSDKDelegate protocol, you can customize the mini program's authorization window. The parameters include the mini program and the permissions that need to be applied for. The host can implement the corresponding view in their own style and return it.
    /**
     * @brief Create a Custom Authorization Window
     *
     * @param frame Window Size
     * @param scope Refer to WeChat Authorization Scope
     * @param title Permission Name
     * @param desc Permission Description Information
     * @param privacyApi The API Currently Being Called
     * @param appInfo Current mini-program information
     * @param allowBlock Allow callback
     * @param denyBlock Denial callback
     */
    
    - (UIView *)createAuthorizeAlertViewWithFrame:(CGRect)frame
                              scope:(NSString *)scope
                              title:(NSString *)title
                              desc:(NSString *)desc
                              privacyApi:(NSString *)privacyApi
                             appInfo:(TMFMiniAppInfo *_Nullable)appInfo
                              allowBlock:(void (^)(void))allowBlock
                               denyBlock:(void (^)(void))denyBlock;
    

    Set internal UI of Mini Program

    TCMPP also supports the customization of the UI used internally in the mini program. This can be achieved by implementing the corresponding methods in TMFMiniAppSDKDelegate. The currently supported content is as follows:
    Mini Program API
    TMFMiniAppSDKDelegate Method
    wx.showLoading
    - (void)showLoading:(TMALoadingInfo * _Nullable)infos;
    wx.hideLoading
    - (void)hideLoading;
    wx.showToast
    - (void)showToast:(TMAToastInfo *)infos;
    wx.hideToast
    - (void)hideToast;
    wx.showActionSheet
    -
    wx.showModal
    - (void)showAlertWithTitle:(nullable NSString *)title withMessage:(nullable NSString *)message        actionBlocks:(nullable NSArray<AlertActionInfo*> *)actionTitleAndblocks presentingViewController:(UIViewController*)presentingViewController;
    
    Contact Us

    Contact our sales team or business advisors to help your business.

    Technical Support

    Open a ticket if you're looking for further assistance. Our Ticket is 7x24 avaliable.

    7x24 Phone Support