Enable real device preview and debugging for an Android miniapp

Add the `h5_remote_debug_host` value to the H5 container configuration file. This file is named custom_config.json in the sample project. This value is the server address for debugging communication.

1. Open the config.json miniapp IDE configuration file that you downloaded from the mPaaS console, and find the debug_url field. The following code is an example of the configuration file:

   {
   "login_url":"https://mappcenter.cloud.alipay.com/ide/login",
   "uuid_url":"http://cn-hangzhou-mproxy.cloud.alipay.com/switch/uuid",
   "debug_url":"wss://cn-hangzhou-mproxy.cloud.alipay.com",
   "sign":"3decfd66c2924489204b4b0f38a9c228",
   "upload_url":"https://mappcenter.cloud.alipay.com/ide/mappcenter/mds"
   }

2. Then, in your project's custom_config.json file, add h5_remote_debug_host. Set key to h5_remote_debug_host. Set value to the value of the debug_url field from the configuration file and append /host/ to it. The following code shows an example:

   [
   {
   "key": "h5_remote_debug_host",
   "value": "wss://cn-hangzhou-mproxy.cloud.alipay.com/host/"
   }
   ]

Set the virtual domain name.

1. In the mPaaS console, choose Mini Program > Mini Program Publish > Configuration Management. On the Domain Names tab, retrieve the virtual domain name that you previously entered.

2. In your project, open MyApplication. Before the application or miniapp starts, call the tinyHelper.setTinyAppVHost method to set the virtual domain name for the miniapp. The following code shows an example:

   Note

   Replace example.com in the following code with your virtual domain name.

   MPTinyHelper tinyHelper = MPTinyHelper.getInstance();
   tinyHelper.setTinyAppVHost("example.com");

Set up the whitelist. To use the real device preview and debugging feature, the client must be configured with a unique user ID. You must return a unique ID for the app, such as a username, phone number, or email address, in the `userId` method. Add the following code after the code for setting the virtual domain name. The value that you later enter in Configure Whitelist in the miniapp IDE plugin must be the same as the `userId` value configured here.

MPLogger.setUserId("your userId");

Integrate the code scanning component to parse the QR code for preview or debugging. The following code shows how to parse the QR code and start the miniapp:

• If you use baseline 10.1.68.6 or a later version, use the following code for parsing. You can find the exact baseline version number in the mPaaS plugin under the mPaaS > Component Management menu.

  // The first parameter is the URI of the QR code, and the second is for custom startup parameters. If you do not have custom startup parameters, enter new Bundle().
  MPTinyHelper.getInstance().launchIdeQRCode(uri, new Bundle());

• If you use a baseline version earlier than 10.1.68.6, use the following code for parsing.

  // uri is the content that corresponds to the QR code.
  String scheme = uri.getScheme();
  if ("mpaas".equals(scheme)) {
        Bundle params = new Bundle();
        String appId = uri.getQueryParameter("appId");
        for (String key : uri.getQueryParameterNames()) {
            if (!"appId".equalsIgnoreCase(key)) {
               params.putString(key, uri.getQueryParameter(key));
           }
        }
        LauncherApplicationAgent.getInstance().getMicroApplicationContext()
            startApp(null, appId, params);
  }