All Products
Search
Document Center

Customize startup loading page

Last Updated: Mar 11, 2021

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.
    1
  2. Enter the layout name in Layout File Name, click Finish.
    2
  3. Set loading layout in activity_loading_page.xml, the code is as follows:
       
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    3. android:orientation="vertical" android:layout_width="match_parent"
    4. android:layout_height="match_parent">
    5. <com.alipay.mobile.antui.basic.AUTitleBar
    6. android:id="@+id/title"
    7. android:layout_width="match_parent"
    8. android:layout_height="wrap_content" />
    9. <RelativeLayout
    10. android:background="@android:color/white"
    11. android:layout_width="match_parent"
    12. android:layout_height="match_parent">
    13. <LinearLayout
    14. android:layout_width="wrap_content"
    15. android:layout_height="wrap_content"
    16. android:orientation="vertical"
    17. android:layout_centerInParent="true">
    18. <TextView
    19. android:id="@+id/tv_app"
    20. android:layout_width="wrap_content"
    21. android:layout_height="wrap_content"/>
    22. <com.alipay.mobile.antui.basic.AUProgressBar
    23. android:id="@+id/progress"
    24. style="?android:attr/progressBarStyleSmall"
    25. android:layout_gravity="center"
    26. android:layout_width="wrap_content"
    27. android:layout_height="wrap_content" />
    28. <TextView
    29. android:id="@+id/tv_tips"
    30. android:visibility="gone"
    31. android:layout_width="wrap_content"
    32. android:layout_height="wrap_content" />
    33. </LinearLayout>
    34. </RelativeLayout>
    35. </LinearLayout>
  4. Create TinyStartupLoadingView class and make it inherit MPTinyBaseIntermediateLoadingView to realize interface initialization and set the listening event of the back button.

       
    1. public class TinyStartupLoadingView extends MPTinyBaseIntermediateLoadingView {
    2. private TextView tvAppName;
    3. private View progressBar;
    4. private TextView tvTips;
    5. public TinyStartupLoadingView(Context context) {
    6. super(context);
    7. init();
    8. }
    9. public TinyStartupLoadingView(Context context, AttributeSet attrs) {
    10. super(context, attrs);
    11. init();
    12. }
    13. public TinyStartupLoadingView(Context context, AttributeSet attrs, int defStyleAttr) {
    14. super(context, attrs, defStyleAttr);
    15. init();
    16. }
    17. private void init() {
    18. LayoutInflater.from(getContext()).inflate(R.layout.activity_loading_page, this, true);
    19. tvAppName = (TextView) findViewById(R.id.tv_app);
    20. progressBar = findViewById(R.id.progress);
    21. tvTips = (TextView) findViewById(R.id.tv_tips);
    22. ((AUTitleBar)findViewById(R.id.title)).getBackButton().setOnClickListener(new OnClickListener() {
    23. @Override
    24. public void onClick(View v) {
    25. Activity host = getLoadingActivity();
    26. if (host != null) {
    27. host.finish();
    28. }
    29. }
    30. });
    31. }
    32. /**
    33. * Called upon initialization, the appid of the mini program will be passed in. Other information, such as name, icon, and version, may be empty.
    34. */
    35. @Override
    36. public void initView(AppInfo info) {
    37. tvAppName.setText(info.appName);
    38. }
    39. /**
    40. * Called when it fails to obtain the mini program
    41. */
    42. @Override
    43. public void onError() {
    44. tvTips.setText("fail");
    45. tvTips.setVisibility(VISIBLE);
    46. progressBar.setVisibility(GONE);
    47. }
    48. /**
    49. * Called when the mini program information is obtained, including appid, name, icon, and version.
    50. */
    51. @Override
    52. public void update(AppInfo info) {
    53. tvAppName.setText(info.appName);
    54. }
    55. }
  5. Before starting up the mini program, enable the custom configuration. Add the following code to the click event listening of MainActivity:
       
    1. MPTinyHelper.getInstance().setLoadingViewClass(TinyStartupLoadingView.class);
  6. Click Run 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 is as follows: