tencent cloud

Feedback

Customize Mini Program UI

Last updated: 2024-11-21 18:00:06
    Customized image previewThe mini program SDK allows developers to customize certain native UI elements of the mini program. Developers can configure these elements according to the following guidelines.

    Setting the Loading Page UI

    The TCMPP mini program engine allows the host app to redefine the loading page that appears when a mini program is loading, replacing the default SDK loading page. This is achieved by implementing the customLoadingViewWithAppInfo method in the TMFMiniAppSDKDelegate protocol. Sample code:
    - (UIView *)customLoadingViewWithAppInfo:(TMFMiniAppInfo *)appInfo frame:(CGRect)frame {
    UIView *view = [[UIView alloc] initWithFrame:frame];
    //todo Set specific view content here
    
    return view;
    }

    Setting mini program navigation bar resources

    The TCMPP mini program engine allows the host app to redefine the navigation bar resources to match its own style. This is done by implementing the stringWithConfigKey method in the TMFMiniAppSDKDelegate protocol. The following keys are supported:
    Key
    Description
    TMA_SK_MINIAPP_CloseButton
    Close button icon  
    TMA_SK_MINIAPP_CloseButtonDark
    Close button icon for dark theme
    TMA_SK_MINIAPP_HomeButton
    Home button icon
    TMA_SK_MINIAPP_HomeButtonDark
    Home button icon for dark theme
    TMA_SK_MINIAPP_BackButton
    Back button icon
    TMA_SK_MINIAPP_BackButtonDark
    Back button icon for ark theme
    TMA_SK_MINIAPP_MoreButton
    More button icon
    TMA_SK_MINIAPP_MoreButtonDark
    More Button icon for dark Theme
    TMA_SK_MINIAPP_RecordButton
    Record button icon
    TMA_SK_MINIAPP_RecordButtonDark
    Record button icon for dark Theme
    TMA_SK_MINIAPP_MoreBackground
    Capsule background image
    TMA_SK_MINIAPP_MoreBackgroundDark
    Capsule background image for dark theme
    Sample code:
    - (NSString *)stringWithConfigKey:(NSString *)key {
    //Set the close button in 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 more menu

    The TCMPP mini program engine allows the host app to redefine the more button menu in the navigation bar, including:
    1. Adding custom menu items in capsule
    Custom menu items can be added to the capsule view by implementing the `customizedConfigForShare` method in the TMFMiniAppSDKDelegate protocol. The added options are categorized as follows:
    MAUIDelegateShareViewTypeCustomizedShare: Share type, triggers the share logic within the mini program. The share operation is implemented by triggering shareMessageWithMod in TMFMiniAppSDKDelegate.
    MAUIDelegateShareViewTypeCustomizedAction: Custom action type, allows custom callback events.
    Sample code:
    - (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 Click");
    }];
    
    item2.icon = [UIImage imageNamed:@"icon_moreOperation_collect"];
    [arrays addObject:item2];
    
    return arrays;
    }
    2. Customizing the pop-up capsule view
    The capsule view can be customized by implementing the `showShareViewWithTitle` method in the TMFMiniAppSDKDelegate protocol.
    /// Sharing 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 response operations
    /// @param dismissBlock Operations to be executed after the panel is collapsed (be sure to call it so that the feature is normal)
    /// @param parentVC The VC that calls 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 animations

    The transition animation for mini program startup can be customized by implementing the getTMFSlideAnimationType method in the TMFMiniAppSDKDelegate protocol. Supported types include bottom-to-top, top-to-bottom, left-to-right, right-to-left, and default (bottom-to-bottom).
    //Set the transition animation to bottom-to-top when the mini program launches
    - (TMFSlideAnimationType)getTMFSlideAnimationType{
    return TMFSlideAnimationTypeBottomToTop;
    }

    Setting mini program permission dialogs

    Custom permission dialogs can be created by implementing the createAuthorizeAlertViewWithFrame method in the TMFMiniAppSDKDelegate protocol. This method includes parameters for the mini program and the required permissions.
    /**
     * @brief Create a customized authorization window
     *
     * @param frame Window size
     * @param scope Refer to WeChat authorization scope
     * @ param title Permission name
     * @ param desc Permission description information
     * @ param privacyApi Currently calling API
     * @ param appInfo Current mini program information
     * @ param allowBlock Allows callbacks
     * @ param denyBlock Rejects callbacks
     */
    
    - (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;
    

    Setting internal mini program UI

    The TCMPP engine also supports customizing internal mini program UI elements by implementing corresponding methods in the TMFMiniAppSDKDelegate protocol. Supported elements include:
    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 (actionSheetType = 0)
    - (void)showActionSheetWithTitle:(nullable NSString *)title
    cancelButtonTitle:(nullable NSString *)cancelButtonTitle cancelAction:(nullable dispatch_block_t)cancelAction otherButtonTitleAndActions:(nullable NSArray *)otherButtonTitleAndActions dismissBlock:(nullable dispatch_block_t)dismissBlock presentingViewController:(UIViewController *)presentingViewController;
    wx.showActionSheet (actionSheetType = 1)
    - (void)showShareViewWithTitle:(nullable NSString *)title cancelAction:(nullable dispatch_block_t)cancelAction otherButtonTitleAndActions:(nullable NSArray *)otherButtonTitleAndActions dismissBlock:(nullable dispatch_block_t)dismissBlock parentVC:(UIViewController *)parentVC;
    wx.showModal
    - (void)showAlertWithTitle:(nullable NSString *)title withMessage:(nullable NSString *)message actionBlocks:(nullable NSArray<AlertActionInfo*> *)actionTitleAndblocks presentingViewController:(UIViewController*)presentingViewController;

    Customizing capsule button features

    Customizing close button event listener

    The close button event can be customized to allow the host app to receive callback events when the close button is clicked.
    Close button diagram:
    
    API description:
    #pragma mark - exit retention - exit retention
    - (BOOL)shouldDetainUser:(TMFMiniAppInfo *)app;
    This API is triggered when the close button is clicked, if it returns YES, a pop-up window will appear to retain the user, if it returns NO, the mini program will be exited directly.

    Customise more button event listeners

    Customising the event listener of the More button allows the host application to listen to the callback event of the corresponding item when the More button is clicked.
    Diagram of the More button:
    
    
    
    API description:
    // Click the capsule button to call up the panel
    // If this method is not implemented, showActionSheetWithTitle:cancelButtonTitle:cancelAction:otherButtonTitleAndActions:dismissBlock:presentingViewController: will be called.
    // @param app Mini program information
    // @param cancelButtonTitle cancel title
    // @param cancelAction cancel the operation
    // @param otherButtonTitleAndActions other buttons and response operations
    // @param dismissBlock The operation that needs to be performed after the panel is closed (must be called to ensure correct functionality!!!) function!!!)
    // @param parentVC - calls up the vc of the panel
    
    - (void)showMoreButtonActionSheetWithApp:(TMFMiniAppInfo *)app
    cancelButtonTitle:(nullable NSString *)cancelButtonTitle
    cancelAction:(nullable dispatch_block_t)cancelAction
    otherButtonTitleAndActions:(nullable NSArray *)otherButtonTitleAndActions
    dismissBlock:(nullable dispatch_block_t)dismissBlock
    parentVC:(UIViewController *)parentVC;

    Customize more button display list

    When the user triggers more button click events, the following optional extended button list will pop up.
    By overriding the customizedConfigForShare method, you can customize the sharing path and determine the display order.
    API description:
    // The host App can customize the sharing channel and determine the display order. Currently, it is used in the ActionSheet called up by clicking the more button or button component (open-type="share")
    // 1. Default channels: QQ friends, QQ space, WeChat, Moments (see MAUIDelegateShareViewType for specific types), determined by the developer, the host App can only change the display order
    // 2. Custom sharing channels: Host App customization (type is filled in MAUIDelegateShareViewTypeCustomizedShare, custom MAShareTarget, it is recommended to be greater than 100, onShareAppMessage returns the shared content in the mini program page, and the host handles it separately according to ShareTarget through shareMessageWithModel)
    // 3. Custom event processing: Host App customization (type is filled in MAUIDelegateShareViewTypeCustomizedAction)
    // The display order of the above three channels supports mixed arrangement
    ///
    // The host App can customize the sharing path and determine the display order. It is currently used in the ActionSheet called up by clicking the more button or button component (open-type="share")
    // 1. Default channels: QQ Friends, QQ Space, WeChat, Moments (for specific types, see MAUIDelegateShareViewType), decided by the developer, the host App can only change the display order
    // 2. Customized sharing channel: Host App customization (type fills in MAUIDelegateShareViewTypeCustomizedShare, custom MAShareTarget, it is recommended to be greater than 100, in the mini program page, onShareAppMessage returns the sharing content, use shareMessageWithModel uniformly, and the host handles it separately according to ShareTarget)
    // 3. Custom event processing: Host App customization (type fills in MAUIDelegateShareViewTypeCustomizedAction)
    // The display order of the above three channels
    - (NSArray<TMASheetItemInfo *> *)customizedConfigForShare;
    Sample code:
    
    - (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 click");
    }];
    item2.icon = [UIImage imageNamed:@"icon_moreOperation_collect"];
    [arrays addObject:item2];
    return arrays;
    
    }
    
    The effect is as follows:
    
    
    

    Picture selection

    The mini program SDK provides a default image selection, which uses the Android system's built-in album selector by default, and is triggered by calling multimedia selection (wx.chooseImage) in the mini program.
    Customized image selection can be achieved by overriding the selectMediaFromPickerWithModel method.
    // Select media from the image picker - Select media from the image picker
    // @param model configuration - configuration
    // @param parentVC vc
    // @param completionBlock After the selection is completed, data needs to be returned. Accept TMAPickerImageModel TMAPickerVideoModel according to the selected type. - (void)selectMediaFromPickerWithModel:(TMAMediaChooseConfigModel *)model
    parentVC:(UIViewController *)parentVC
    completionBlock:(void(^)(NSArray * _Nullable medias, NSError * _Nullable error))completionBlock;
    
    // Shooting media - Shooting media
    // @param model configuration - configuration
    // @param parentVC vc
    // @param completionBlock After the selection is completed, data needs to be returned. Accept TMACameraImageModel according to the selected type. TMACameraVideoModel - After the selection is completed, data needs to be returned, and TMACameraImageModel TMACameraVideoModel is accepted according to the selected type.
    - (void)selectMediaFromCameraWithModel:(TMAMediaChooseConfigModel *)model
    parentVC:(UIViewController *)parentVC
    completionBlock:(void(^)(id _Nullable media, NSError * _Nullable error))completionBlock;
    
    // Get image data from PHAsset - Get image data from PHAsset
    // @param phAsset media object - media object
    // @param needCompress whether compression is required - whether compression is required
    - (NSData *)imageDataFromPhAsset:(PHAsset *)phAsset needCompress:(BOOL)needCompress;

    Customized image preview

    The Mini Program SDK provides a default image preview implementation, which is triggered when the Mini Program calls the multimedia selection (wx.previewImage).
    Customized image preview can be implemented by overriding the - (void)navigationController:(UINavigationController *)navigationController presentImageWithCurrentUrl:(NSString *)currentAbsoluteUrl imageUrlArray:(NSArray *)absUrlsInPreviewArray method.
    // Image Preview
    // @param navigationController calls up the navigation bar for image preview
    // @param currentAbsoluteUrl current page address
    // @param absUrlsInPreviewArray pictures to be previewed
    - (void)navigationController:(UINavigationController *)navigationController
    presentImageWithCurrentUrl:(NSString *)currentAbsoluteUrl
    imageUrlArray:(NSArray *)absUrlsInPreviewArray;

    Customize document preview

    iOS SDK provides a default document preview function. If you want to implement the document preview function yourself, please rewrite the following interface:
    // Open document preview - Open document preview
    // @param filePath document path - document path
    // @param titleName title - title
    // @param appInfo Mini program appinfo - Mini program appinfo
    - (void)openDocument:(NSString *)filePath
    title:(NSString *)titleName
    appInfo:(TMFMiniAppInfo *_Nonnull)appInfo;
    
    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