Tencent Cloud

Recent Pages

Custom Mini Program UI

Last updated: 2024-11-21 17:30:42
The mini program SDK allows developers to customize certain native UI elements. Follow the guidelines below to configure this customization.
To customize the mini program UI, developers need to extend and implement AbsMiniUiProxy. Sample code: 
@ProxyService(proxy = IMiniUiProxy.class)
public class MiniUiProxyImpl extends AbsMiniUiProxy
Note：
You must use the @ProxyService(proxy = IMiniUiProxy.class) annotation to customize the UI.
Customizing navigation bar buttons
1. Back button
The figure of back button is as follows:
﻿
The mini program SDK provides the function of back button customisation, which can be achieved by customizing the back button and overriding the navBarBackRes method of AbsMiniUiProxy.
The API definition is as follows:
Method parameter mode: indicates the navBar title colour, 1 means black title, 0 means white title;
Method return value: the icon resource ID of the back button.
/**
 * Custom navigation bar return icon, aspect ratio = 24x43.
 * Call environment: subprocess
 /*** * @param mode navigation bar title.
 * @param mode navigation bar title colour, 1:black 0:white
 * @return
 */
@DrawableRes
int navBarBackRes(int mode);
Note：
The aspect ratio required for the Back button icon resource is: 24x43.
Sample code: 
@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 figure of the home button is as follows:
﻿
The mini program SDK provides home button customisation, which can be achieved by overriding AbsMiniUiProxy's homeButtonRes to customize the home button method.
The API definition is as follows:
Method parameter mode: indicates the title colour of the navigation bar, 1 means black title, 0 means white title;
Method return value: the icon resource ID of the returned button.
/**
 * Navigation bar back to home page icon, aspect ratio requirement = 48x48
 * Calling environment: subprocess
 * @param mode navigation bar title colour, 1:black 0:white
 * @param mode navigation bar title colour, 1:black 0:white
 * @return
 */
@DrawableRes
int homeButtonRes(int mode);
Note：
Size requirement: navigation bar home icon, aspect ratio = 48x48.
Sample code: 
@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 buttons
More buttons are shown below:
﻿
﻿
﻿
The mini program SDK provides more button customisation, which can be achieved by overriding AbsMiniUiProxy's moreButtonRes to customize the home button method.
The API definition is as follows:
Method parameter mode: indicates the title colour of the navigation bar, 1 means black title, 0 means white title;
Method return value: the icon resource ID of the returned button.
/**
 * Navbar return home icon, aspect ratio = 48x48.
 * Call environment: subprocess
 *
 * @param mode navigation bar title colour, 1:black 0:white
 * @return
 */
@DrawableRes
int moreButtonRes(int mode);
Note：
Size requirements: navigation bar home icon, aspect ratio = 80x59.
Sample code: 
@Override
public int moreButtonRes(int mode) {

    if(mode == 0) {//black
        return R.drawable.more_black_icon;
    }else {
        return R.drawable.more_white_icon;
    }
}
4. Mini Program Close Button
The mini program close button is shown with the following intention:
﻿
The mini program SDK provides the function of close button customisation, which can be achieved in the following ways:
Customise the home button:
Override the closeButtonRes method of AbsMiniUiProxy.
API definition is as follows:
API Description:
Method parameter mode: means the title colour of the navigation bar, 1 means black title, 0 means white title.
Method return value: the icon resource ID of the returned button.
/**
 * Navigation bar return to home page icon icon, aspect ratio requirement = 48x48
 * Call environment: subprocess
 /* @param mode
 * @param mode navigation bar title colour, 1:black 0:white
 * @return
 */
@DrawableRes
int closeButtonRes(int mode);
Note：
The size of the icon is the same as the home icon in the navigation bar:
Size requirement: navigation bar home icon, aspect ratio = 80x59.
Sample code: 
@Override
public int closeButtonRes(int mode) {

    if(mode == 0) {//black
        return R.drawable.close_black_icon;
    }else {
        return R.drawable.close_white_icon;
    }
}
5. Capsule Button Dividing Line
The intention of the mini program capsule button split line display is as follows:
﻿
The mini program SDK provides the function of custom capsule button split line, which can be achieved by overriding AbsMiniUiProxy's lineSplitBackgroundColor and customising the home button method.
The API definition is as follows:
Method return value: the background colour of the split line.
/**
 * Capsule button middle split line background colour
 * Calling environment: child process
 * @return
 * @return
 */
@DrawableRes
int lineSplitBackgroundColor();
Sample code: 
@Override
public int lineSplitBackgroundColor() {
return Color.RED;
}
Customised authorisation pop-ups
When the API called by the mini program requires authorisation, the SDK provides the following default authorisation UI style:
﻿
Developers can also customise the authorisation UI style by using the following method.
Customise the authorisation popup window:
Override the authView method of AbsMiniUiProxy;
The parameter Context represents the context of the mini program process;
The parameter MiniAuthInfo contains the authorisation information requested by the current mini program, see MiniAuthInfo for details;
The parameter IAuthView is used to set the custom popup view.
The API definition is as follows:
/**
 * Custom authorisation popup view
 * Call environment: subprocess
 *
 * @param context
 * @param authInfo
 * @param authView
 * @return true:custom authView;false:use built-in
 */
@Override
public boolean authView(Context context, MiniAuthInfo authInfo, IAuthView authView)
Note：
The return value of authView method indicates whether to use the custom authorisation view or not, the return value is false to use the default built-in authorisation view, the return value is true to use the custom authorisation view.
RefuseListener and grantListener in MiniAuthInfo are the listeners for the authorisation popup window, must be set, otherwise it will cause the mini program authorisation exception.
Sample code: 
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 method returns 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);

        //Return to Custom View
        authView.getView(view);
    }

    return isCustom;
}
Custom effects:
﻿
Customising the mini program Loading view
During the opening process of mini program, there are check update and start loading loading animations, both of which support customisation.
1. Customise the mini program check update Loading view
The default loading animation for checking update is shown in the following figure:
﻿
﻿
﻿
You can customise the check update animation by overriding the updateLoadingView method of AbsMiniUiProxy.
The API description is as follows:
Note：
The return value of updateLoadingView method is an instance of IMiniLoading type.
IMiniLoading method description:
create Creates a Loading view;
show The callback to show the Loading effect;
stop Callback to stop the Loading effect.
/**
 * Custom mini program to check and update the loading page.
 * Call environment: main process
 * @param context
 * @param context
 * @return
 */
public abstract IMiniLoading updateLoadingView(Context context);
Sample code: 
@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. Custom Mini Program Loading View
﻿
The customisation of the update animation can be checked by overriding the startLoadingView method of AbsMiniUiProxy.
The API description is as follows:
Note：
The return value of the updateLoadingView method is an instance of type IMiniLoading.
IMiniLoading method description:
create Creates a Loading view;
show Callback to show the Loading effect;
stop Callback to stop the Loading effec
/**
 * Custom mini program loading loading page
 * Calling environment: child process
 *
 * @param activityWeakRef Activity reference
 * @param app mini program information
 * @return return mini program loading UI
 */
public abstract IMiniLoading startLoadingView(WeakReference<Activity> activityWeakRef, MiniAppLoading app);
Sample code: 
@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 Capsule Button on Loading Page
By default, there will be a capsule button on the top right corner of the mini program loading page, you can control the hide and show of the capsule button by overriding the hideLoadingCapsule method of AbsMiniUiProxy.
Capsule button schematic:：
﻿
API description: true means hide the capsule button on the Loading page, false means don't hide it (default value).
/**
 * Whether to hide the capsule in the upper right corner of the loading page of the mini program.
 /* @return true:Hide the capsule on the top right corner of the loading page.
 * @return true:hide;false:don't hide (default value)
 */
boolean hideLoadingCapsule();
﻿