自定义启动加载页

当启动小程序时,如果小程序未下载到设备,小程序容器会启动加载页提示用户等待,待小程序安装到设备上,加载页关闭并跳转至小程序。本文将引导您使用小程序自定义启动加载页的功能。

操作步骤

  1. 右键单击 res 下的 layout > New > XML > Layout XML File
    1
  2. Layout File Name 输入框中输入布局名称,单击 Finish
    2
  3. activity_loading_page.xml 中设置加载页布局,代码如下。
    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. 创建 TinyStartupLoadingView 类,让其继承 MPTinyBaseIntermediateLoadingView。实现界面的初始化并设置返回按钮的监听事件。

    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. * 初始化时调用,会传入小程序的应用ID,其他信息如名称、应用图标、版本,可能为空
    34. */
    35. @Override
    36. public void initView(AppInfo info) {
    37. tvAppName.setText(info.appName);
    38. }
    39. /**
    40. * 获取小程序失败时调用
    41. */
    42. @Override
    43. public void onError() {
    44. tvTips.setText("fail");
    45. tvTips.setVisibility(VISIBLE);
    46. progressBar.setVisibility(GONE);
    47. }
    48. /**
    49. * 拉取到小程序应用信息时调用,可获取应用ID,名称、图标和版本信息
    50. */
    51. @Override
    52. public void update(AppInfo info) {
    53. tvAppName.setText(info.appName);
    54. }
    55. }
  5. 在小程序启动前,开启自定义配置。在 MainActivity 的点击事件监听中添加如下代码:
    1. MPTinyHelper.getInstance().setLoadingViewClass(TinyStartupLoadingView.class);
  6. 单击 Run 运行程序到真机上。
  7. 单击 Hello World! 启动小程序。打开应用后在小程序加载时界面如下: