Mobile Platform as a Service:Customize startup loading page

When you start up the mini program, if the mini program has not been downloaded to the device, the mini program container will launch a loading page to prompt the user to wait untill the mini program is installed on the device. After that, the loading page will be closed and the mini program will appear. This article guides you to customize the startup loading page of a mini program.

Procedure

1. Right click layout > New > XML > Layout XML File under res.

2. Enter the layout name in Layout File Name, click Finish.

3. Set loading layout in activity_loading_page.xml, the code is as follows:

   <?xml version="1.0" encoding="utf-8"?>
   <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent">
    <com.alipay.mobile.antui.basic.AUTitleBar
        android:id="@+id/title"
        android:layout_width="match_parent"
        android:layout_height="wrap_content" />
    <RelativeLayout
        android:background="@android:color/white"
        android:layout_width="match_parent"
        android:layout_height="match_parent">
        <LinearLayout
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:orientation="vertical"
            android:layout_centerInParent="true">
            <TextView
                android:id="@+id/tv_app"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"/>
            <com.alipay.mobile.antui.basic.AUProgressBar
                android:id="@+id/progress"
                style="?android:attr/progressBarStyleSmall"
                android:layout_gravity="center"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
            <TextView
                android:id="@+id/tv_tips"
                android:visibility="gone"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content" />
        </LinearLayout>
    </RelativeLayout>
   </LinearLayout>

4. Create TinyStartupLoadingView class and make it inherit MPTinyBaseIntermediateLoadingView to realize interface initialization and set the listening event of the back button.

   public class TinyStartupLoadingView extends MPTinyBaseIntermediateLoadingView {
   
    private TextView tvAppName;
   
    private View progressBar;
   
    private TextView tvTips;
   
    public TinyStartupLoadingView(Context context) {
        super(context);
        init();
    }
   
    public TinyStartupLoadingView(Context context, AttributeSet attrs) {
        super(context, attrs);
        init();
    }
   
    public TinyStartupLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
        super(context, attrs, defStyleAttr);
        init();
    }
   
    private void init() {
        LayoutInflater.from(getContext()).inflate(R.layout.activity_loading_page, this, true);
        tvAppName = (TextView) findViewById(R.id.tv_app);
        progressBar =  findViewById(R.id.progress);
        tvTips = (TextView) findViewById(R.id.tv_tips);
        ((AUTitleBar)findViewById(R.id.title)).getBackButton().setOnClickListener(new OnClickListener() {
            @Override
            public void onClick(View v) {
                Activity host = getLoadingActivity();
                if (host != null) {
                    host.finish();
                }
            }
        });
    }
   
    /**
     * Called upon initialization, the appid of the mini program will be passed in. Other information, such as name, icon, and version, may be empty.
     */
    @Override
    public void initView(AppInfo info) {
        tvAppName.setText(info.appName);
    }
   
    /**
     * Called when it fails to obtain the mini program
     */
    @Override
    public void onError() {
        tvTips.setText("fail");
        tvTips.setVisibility(VISIBLE);
        progressBar.setVisibility(GONE);
    }
   
    /**
     * Called when the mini program information is obtained, including appid, name, icon, and version.
     */
    @Override
    public void update(AppInfo info) {
        tvAppName.setText(info.appName);
    }
   }

5. Before starting up the mini program, enable the custom configuration. Add the following code to the click event listening of MainActivity:

   MPTinyHelper.getInstance().setLoadingViewClass(TinyStartupLoadingView.class);

6. Click to run the application on real device.

7. Tap Hello World! to start up the mini program. The loading page after starting up the mini program will be shown.