Tencent Cloud

Recent Pages

Custom Mini Program UI

Last updated: 2025-01-23 17:22:59

The mini program SDK now allows developers to customize certain native UI effects of mini programs. Follow the guidelines below to configure this feature.
To do this, you need to extend and implement AbsMiniUiProxy. Below is an example:
@ProxyService(proxy = IMiniUiProxy.class)
public class MiniUiProxyImpl extends AbsMiniUiProxy
Note:
You must use@ProxyService(proxy = IMiniUiProxy.class)annotation to customize the UI.
Customize the navigation bar button
1. Back button
The default style of the Back button is shown in the following figure:
﻿
The mini program SDK allows you to customize the Back button by overriding the navBarBackRes method of AbsMiniUiProxy.
The API is defined as follows:
Method parameter mode: The color of the navigation bar title. Valid values: 1 (black), 0 (white).
Method return value: The icon resource ID of the Back button.
/**
 * Customizes the navigation bar back button icon. The required size is 24 x 43 pixels.
 * Called in the subprocess.
 *
 * @param mode Navigation bar title color. Valid values: 1 (black), 0 (white).
 * @return
 */
@DrawableRes
int navBarBackRes(int mode);
Note:
The size of the Back button icon resource is required to be 24 x 43 pixels.
Example:
@Override public int navBarBackRes(int mode) { if(mode == 0) {//black return R.drawable.back_icon;//your black icon res }else {//white return R.drawable.white_icon;//your white icon res } }
2. Home button
The default style of the Home button is shown in the following figure:
﻿
The mini program SDK allows you to customize the Home button by overriding the homeButtonRes method of AbsMiniUiProxy.
The API is defined as follows:
Method parameter mode: The color of the navigation bar title. Valid values: 1 (black), 0 (white).
Method return value: The icon resource ID of the Home button.
/**
 * Customize the Home button icon on the navigation bar. The required size is 48 x 48 pixels.
 * Called in the subprocess.
 *
 * @param mode Navigation bar title color. Valid values: 1 (black), 0 (white).
 * @return
 */
@DrawableRes
int homeButtonRes(int mode);
Note:
The size of the Home icon on the navigation bar is required to be 48 x 48 pixels.
Example:
@Override public int homeButtonRes(int mode) { if(mode == 0) {//black return R.drawable.home_black_icon; }else { return R.drawable.home_white_icon; } }
3. More button
The default style of the More button is shown in the following figure:
﻿
﻿
﻿
The mini program SDK allows you to customize the More button by overriding the moreButtonRes method of AbsMiniUiProxy.
The API is defined as follows:
Method parameter mode: The color of the navigation bar title. Valid values: 1 (black), 0 (white).
Method return value: The icon resource ID of the More button.
/**
 * Customizes the More button icon on the navigation bar.The required size is 80 x 59 pixels.
 * Called in the subprocess.
 *
 * @param mode Navigation bar title color. Valid values: 1 (black), 0 (white).
 * @return
 */
@DrawableRes
int moreButtonRes(int mode);
Note:
The size of the More button icon on the navigation bar is required to be 80 x 59 pixels.
Example:
@Override public int moreButtonRes(int mode) { if(mode == 0) {//black return R.drawable.more_black_icon; }else { return R.drawable.more_white_icon; } }
4. Close button
The default style of the Close button is shown in the following figure:
﻿
The mini program SDK allows you to customize the Close button by the following method.
Customize the Close button:
Override the closeButtonRes method of AbsMiniUiProxy.
The API is defined as follows:
API description:
Method parameter mode: The color of the navigation bar title. Valid values: 1 (black), 0 (white).
Method return value: The icon resource ID of the Close button.
/**
 * Customize the Close button on the navigation bar. The required size is 80 x 59 pixels.
 * Called in the subprocess.
 *
 * @param mode Navigation bar title color. Valid values: 1 (black), 0 (white).
 * @return
 */
@DrawableRes
int closeButtonRes(int mode);
Note:
The size of the Close button icon on the navigation bar is required to be 80 x 59 pixels.
Example:
@Override public int closeButtonRes(int mode) { if(mode == 0) {//black return R.drawable.close_black_icon; }else { return R.drawable.close_white_icon; } }
5. The vertical bar in the middle of the capsule button
The default style of the vertical bar in the middle of the capsule button is shown in the following figure:
﻿
The mini program SDK allows you to customize the vertical bar in the middle of the capsule button by overriding the lineSplitBackgroundColor method of AbsMiniUiProxy.
The API is defined as follows:
Method return value:The background color of the vertical bar.
/**
 * The background color of the vertical bar in the middle of the capsule button.
 * Called in the subprocess.
 *
 * @return
 */
@DrawableRes
int lineSplitBackgroundColor();
Example:
@Override public int lineSplitBackgroundColor() {
return Color.RED; }
Custom authorization popup
When a mini program calls an API that requires authorization, the SDK provides a default authorization UI style.
﻿
Developers can also customize the authorization UI style using the following method.
Customize authorization popup:
Override the authView method of AbsMiniUiProxy.
The parameter Context indicates the context of the mini program process.
The parameter MiniAuthInfo contains the authorization information requested by the current mini program, see MiniAuthInfo for details.
The parameter IAuthView is used to set the custom popup view.
The API is defined as follows:
/**
 * Customizes the custom popup view.
 * Called in the subprocess.
 *
 * @param context
 * @param authInfo
 * @param authView
 * @return true: Use the custom authorization view; false: Use the default view.
 */
@Override
public boolean authView(Context context, MiniAuthInfo authInfo, IAuthView authView)
Notes:
The return value of the authView method indicates whether to use a custom authorization view. The false indicates using the default authorization view, while the true indicates using a custom authorization view.
The refuseListener and grantListener in MiniAuthInfo must be set, otherwise, the mini program authorization will fail.
Below is an example:
View layout file
<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:paddingLeft="16dp"
    android:paddingTop="16dp"
    android:paddingRight="16dp"
    android:paddingBottom="15dp"
    android:background="@android:color/white"> <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:text="custom auth view"
        android:layout_centerHorizontal="true"/> <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_marginTop="150dp"> <Button
            android:id="@+id/mini_auth_btn_refuse"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:text="@string/applet_mini_reject" /> <Button
            android:id="@+id/mini_auth_btn_grant"
            android:layout_width="match_parent"
            android:layout_height="wrap_content"
            android:layout_weight="1.0"
            android:text="@string/applet_mini_auth" /> </LinearLayout> </RelativeLayout>
Override the authView method (note that the return value is true):
@Override public boolean authView(Context context, MiniAuthInfo authInfo, IAuthView authView) { boolean isCustom = true; if (isCustom) { View view = LayoutInflater.from(context).inflate(R.layout.mini_auth_view, null); // Must be set
view.findViewById(R.id.mini_auth_btn_refuse).setOnClickListener(authInfo.refuseListener); // Must be set
view.findViewById(R.id.mini_auth_btn_grant).setOnClickListener(authInfo.grantListener); // Returns a custom view
authView.getView(view); } return isCustom; }
Custom authorization view:
﻿
Customize the mini program loading views
Mini programs have loading animations for checking updates and starting up, both of which can be customized.
1. Customize update loading view
The default update loading animation is shown below:
﻿
﻿
﻿
You can customize it by overriding the updateLoadingView method of AbsMiniUiProxy.
API description:
Notes:
The return value of the updateLoadingView method is an instance of the IMiniLoading.
IMiniLoading methods:
Create: Creates a loading view.
Show: Callback when showing the loading effect.
Stop: Callback when stopping the loading effect.
/**
 * Customizes the loading page for checking a mini program’s updates.
 * Called in the main process.
 *
 * @param context
 * @return
 */
public abstract IMiniLoading updateLoadingView(Context context);
Example:
@Override
public IMiniLoading updateLoadingView(Context context) {
    return new IMiniLoading() {
        @Override
        public View create() {
            return LayoutInflater.from(context).inflate(R.layout.applet_activity_custom_update_loading, null);
        }
﻿
        @Override
        public void show(View v) {
﻿
        }
﻿
        @Override
        public void stop(View v) {
﻿
        }
    };
}
2. Customize the startup loading view
﻿
You can customize the startup loading view for mini program by overriding the startLoadingView method of AbsMiniUiProxy.
API description:
Notes:
The return value of the startLoadingView method is an instance of the IMiniLoading.
IMiniLoading methods:
Create: Creates a loading view.
Show: Callback when showing the loading effect.
Stop: Callback when stopping the loading effect.
/**
 * Customizes the startup loading page for mini program.
 * Called in the subprocess.
 *
 * @param activityWeakRef Activity reference
 * @param app Mini program information
 * @return Returns the mini program loading UI
 */
public abstract IMiniLoading startLoadingView(WeakReference<Activity> activityWeakRef, MiniAppLoading app);
Example:
@Override
public IMiniLoading startLoadingView(Context context) {
    return new IMiniLoading() {
        @Override
        public View create() {
            return LayoutInflater.from(context).inflate(R.layout.applet_activity_custom_start_loading, null);
        }
﻿
        @Override
        public void show(View v) {
﻿
        }
﻿
        @Override
        public void stop(View v) {
﻿
        }
    };
}
Hide the capsule button on the loading page
A capsule button is shown in the upper right corner of the mini program loading page by default.You can choose to hide/show the capsule button by overriding the hideLoadingCapsule method of AbsMiniUiProxy.
The capsule button is shown in the following figure:
﻿
API description: The return value of true indicates that the capsule button on the loading page should be hidden, while false (the default) indicates that it should be shown.
/** * Whether to hide the capsule button in the upper right corner of the mini program loading page * * @return true: Hide; false: Show (the default) */ boolean hideLoadingCapsule();
Customize the web-view component progress bar
When loading a page, the web-view component displays a progress bar by default. 
﻿
﻿
﻿
The SDK provides customization options for this progress bar.
1. Hide the web-view component progress bar
Override the hideWebViewProgressBar method of AbsMiniUiProxy to set whether to hide the progress bar
/**
 * Whether to hide the web-view component progress bar
 * @return true: Hide; false: Show (the default)
 */
boolean hideWebViewProgressBar();
2. Set the color of the web-view component progress bar
Override the webviewProgressBarColor and webviewProgressBarBgColor methods of AbsMiniUiProxy to set the color of the progress bar
/**
 * Sets the color of the progress bar (color of the completed progress). Returns null to use the default value.
 * @return Progress bar color value, for example: Color.GREEN
 */
Integer webviewProgressBarColor();
﻿
/**
 * The background color of the progress bar (the color of unfinished progress). Returns null to use the default value. This takes effect when webviewProgressBarColor returns a non-null value.
 * @return Background color value of the progress bar. For example: Color.GREEN
 */
Integer webviewProgressBarBgColor();
﻿
﻿