tencent cloud

Feedback

Mini Program UI Customization

Last updated: 2024-03-04 22:47:50
    Through the following configurations, the host can customize certain features of the Mini Program UI.
    @ProxyService(proxy = IMiniUiProxy.class)
    public class MiniUiProxyImpl extends AbsMiniUiProxy
    Define an implementation class and inherit AbsMiniUiProxy, and decorate it with the aforementioned annotations.

    Capsule UI

    /**
    * Customize the navigation bar return icon, with a required aspect ratio of 24x43.
    * Invocation Environment: Subprocess
    *
    * @param mode Navigation bar title color, 1: black, 0: white
    * @return
    */
    @DrawableRes
    int navBarBackRes(int mode);
    
    /**
    * Navigation bar's "Home" icon, with a required aspect ratio of 48x48.
    * Invocation Environment: Subprocess
    *
    * @param mode Navigation bar title color, 1: black, 0: white
    * @return
    */
    @DrawableRes
    int homeButtonRes(int mode);
    
    /**
    * Capsule's "More" icon, with a required aspect ratio of 80x59.
    * Invocation Environment: Subprocess
    *
    * @param mode Navigation bar title color, 1: black, 0: white
    * @return
    */
    @DrawableRes
    int moreButtonRes(int mode);
    
    /**
    * Capsule's "More" icon, with a required aspect ratio of 80x59.
    * Invocation Environment: Subprocess
    *
    * @param mode Navigation bar title color, 1: black, 0: white
    * @return
    */
    @DrawableRes
    int closeButtonRes(int mode);
    
    /**
    * Background color of the dividing lines in the capsule button.
    * Invocation Environment: Subprocess
    *
    * @return
    */
    @DrawableRes
    int lineSplitBackgroundColor();

    Mini Program Authorization UI

    When the Mini Program API requires authorization, the SDK provides the following authorization UI style by default. Developers can also customize the authorization UI style using the following methods.
    /**
    * Customize the authorization pop-up view.
    * Invocation Environment: Subprocess
    *
    * @param context
    * @param authInfo
    * @param authView
    * @return true: Customized authorization view; false: Use the built-in feature.
    */
    @Override
    public boolean authView(Context context, MiniAuthInfo authInfo, IAuthView authView) {
    return true;
    }

    UI of Authorized User Information

    You can customize user nickname and avatar in user authorization information.
    
    /**
    * Obtain scope.userInfo for user authorization information.
    * Invocation Environment: Subprocess
    *
    * @param appId
    * @param result
    */
    @Override
    public void getUserInfo(String appId, AsyncResult result) {
    JSONObject jsonObject = new JSONObject();
    try {
    //Return nickname.
    jsonObject.put("nickName", "userInfo Test");
    //Return avatar URL.
    jsonObject.put("avatarUrl", "https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.daimg.com%2Fuploads%2Fallimg%2F210114%2F1-210114151951.jpg&refer=http%3A%2F%2Fimg.daimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1673852149&t=e2a830d9fabd7e0818059d92c3883017");
    result.onReceiveResult(true, jsonObject);
    } catch (JSONException e) {
    e.printStackTrace();
    }
    }
    To load the avatar, it is also necessary to implement the following method in BaseMiniAppProxyImpl (refer to Customization by the Mini Program Host).
    public Drawable getDrawable(Context context, String source, int width, int hight, Drawable defaultDrawable)

    Mini Program Loading

    During the opening process of the Mini Program, there are update checks and startup loading. The loading can be customized in the following manner.
    /**
    * Customizing the Mini Program update check loading page.
    * Invocation environment: Main process.
    *
    * @param context
    * @return
    */
    public abstract IMiniLoading updateLoadingView(Context context);
    
    /**
    * Customizing the Mini Program loading page.
    * Invocation Environment: Subprocess
    *
    * @param activityWeakRef: Activity reference
    * @param app: Mini Program information.
    * @return: Return the Mini Program loading UI.
    */
    public abstract IMiniLoading startLoadingView(WeakReference<Activity> activityWeakRef, MiniAppLoading app);
    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) {
    
    }
    };
    }

    Mini program loading capsule in the upper right corner of the loading page

    /**
    * Whether to hide the capsule in the upper right corner of the loading page of the mini program
    *
    * @return true: hidden; false: not hidden (default value)
    */
    boolean hideLoadingCapsule();
    
    
    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