Integrate real-device preview and debugging

1. Configure the debug path for the miniapp

2. Set the VHost and user whitelist for the miniapp

3. Add the miniapp QR code scanning component

4. Implement the real-device preview and debugging features for the miniapp

5. Use the miniapp preview feature

6. Use the miniapp real-device debugging feature

Procedure

Configure the debug path for the miniapp

1. Open the miniapp IDE configuration file that you downloaded from the mPaaS console. The following example shows a configuration file for a public cloud environment:

   {
    "login_url":"https://mpaas-mappcenter.aliyuncs.com/ide/login",
    "uuid_url":"http://cn-hangzhou-mproxy.cloud.alipay.com/switch/uuid",
    "debug_url":"wss://cn-hangzhou-mproxy.cloud.alipay.com",
    "appId":"ONEX0D29541291400",
    "sign":"674f12adf7205358108839eb79f8a487",
    "tenantId":"AUDQKVYH",
    "upload_url":"https://mpaas-mappcenter.aliyuncs.com/ide/mappcenter/mds",
    "applist_url":"https://mpaas-mappcenter.aliyuncs.com/ide/mappcenter/mds/miniProgram/getAppListByApi",
    "workspaceId":"default"
   }

2. Obtain the value of debug_url from the configuration file. For example: wss://cn-hangzhou-mproxy.cloud.alipay.com

3. In your Android project, open the custom_config.json file in the assets > config directory.

   For this value, "NO" disables miniapp signature verification, and "YES" enables it. If you do not specify a value, "YES" is used by default. You can disable signature verification for quick integration during development and debugging. Before you publish the application, you must enable signature verification. For more information about how to configure miniapp package signature verification, see Configure a miniapp package.

4. Append /host/ to the value of debug_url and add the result to the custom_config.json file. The following example shows the result:

Set the VHost and user whitelist for the miniapp

1. Open the MyApplication class and add the following code to the mPaaS initialization callback. This code sets the virtual domain name for the miniapp by calling `tinyHelper.setTinyAppVHost` before the application or the miniapp starts. The `VHost` value must be consistent with the Virtual Domain Name specified in the mPaaS console under Mini Program > Mini Program Publishing > Configuration Management > Domain Name Management.

2. Open the miniapp developer tools. Click the mPaaS Toolbox icon (), and then choose Settings > Whitelist Settings. Add users to the whitelist and click OK. A message appears indicating that the whitelist was modified successfully.

3. Open the MyApplication class and add the following code to the mPaaS init callback to set the whitelisted user IDs.

Add the miniapp QR code scanning component

1. In the Android Studio menu bar, choose mPaaS > Native AAR Integration.

2. Under Configure/Update Components, click Start Configuration.

3. Select the Miniapp QR Code Scanning component and click OK.

Implement the real-device preview and debugging features for the miniapp

1. In MainActivity, add a click event to TestView to start the miniapp QR code scanning and preview feature.

2. Click to run the program on a real device.

3. Click Hello World! to start the QR code scanning feature.

4. In the dialog box that appears, click Always allow.

Use the miniapp preview feature

1. In the miniapp developer tools navigation bar, click Preview. A QR code is generated.

2. Use the QR code scanning feature on your real device to scan the QR code. The miniapp then runs on your mobile phone.

Use the miniapp real-device debugging feature

1. In the miniapp developer tools navigation bar, click Real-device Debugging. A QR code is generated.

2. Use the QR code scanning feature on your real device to scan the QR code. A message appears on your mobile phone indicating that remote debugging is connected. You can then enter debugging mode.