All Products
Search
Document Center

Access real-device preview and debugging

Last Updated: Mar 23, 2021

This article guides you to use the real-device preview and debugging functions of the mini program. The process mainly falls into the following 6 steps:

  1. Configure the debugging path of the mini program
  2. Set the VHost and user whitelist of the mini program
  3. Add mini program code scanning component
  4. Realize the real-device preview and debugging function of the mini program
  5. Use the preview function of the mini program
  6. Use real-device debugging function of the mini program
Note: Only available in mPaaS 10.1.60 and later versions.

Procedure

Configure the debugging path of the mini program

  1. Open the Mini program IDE configuration file downloaded form the mPaaS console. The following is an example of configuration file in the public cloud.
    1. {
    2. "login_url":"https://mpaas-mappcenter.aliyuncs.com/ide/login",
    3. "uuid_url":"http://cn-hangzhou-mproxy.cloud.alipay.com/switch/uuid",
    4. "debug_url":"wss://cn-hangzhou-mproxy.cloud.alipay.com",
    5. "appId":"ONEX0D29541291400",
    6. "sign":"674f12adf7205358108839eb79f8a487",
    7. "tenantId":"AUDQKVYH",
    8. "upload_url":"https://mpaas-mappcenter.aliyuncs.com/ide/mappcenter/mds",
    9. "applist_url":"https://mpaas-mappcenter.aliyuncs.com/ide/mappcenter/mds/miniProgram/getAppListByApi",
    10. "workspaceId":"default"
    11. }
  2. Obtain the value of debug_url in the configuration file. Shown as below:
    wss://cn-hangzhou-mproxy.cloud.alipay.com
  3. Open the custom_config.json file in assets > config of the Android project.
    32
    value: “NO” indicates that the mini program signature verification is disabled, while “YES” indicates that the it is enabled (it defaults to “YES” if you do not fill in). In the development and debugging stage, you can turn off the signature verification for quick access; before going online, it is recommended to turn on the signature verification. For the specific operation of the mini program package verification configuration, please refer to Configure mini program package.
  4. Splice the obtained value of debug_url with /host/ and fill it in the value of the custom_config.json file, as shown below:
    33

Set the VHost and user whitelist of the mini program

  1. Open the MyApplication class, and add the following code to the mPaaS initialization callback. Call tinyHelper.setTinyAppVHost method before starting the application or mini program to set the virtual domain name used by the mini program. The value of VHost is consistent with the Virtual domain name in mPaaS console > Mini program > Release mini program > Configuration management > Manage domain name.
    set VHost
  2. Open the mini program development tool, click mPaaS toolbox (toolbox) > Settings > Whitelist to add user whitelist, click OK, a pop-up window indicating setting success appears.
    Whitelist
    Whitelist modified
  3. Open MyApplication class, and add the following code to the mPaaS initialization callback to set the user ID of whitelist.
    set whitelist

Add mini program code scanning component

  1. In Android Studio, choose mPaaS > Native AAR Access.

  2. Click Configure in Configure/Update Component step.

  3. Check Mini program - scan component, and click OK.

    Realize the real-device preview and debugging function of the mini program

  4. Add and click event to start the preview and debugging function of the mini program in the TestView of MainActivity.
    click event
  5. Click Run to run the application in the real device.
  6. Tap Hello World! to activate code scanning function.
  7. Tap Always allow in the pop-up menu.

Use the preview function of the mini program

  1. Click Preview in the navigation bar of mini program development tool to generate a QR code.
    QR code
  2. Use the code scanning function of the real device to scan this QR code to run the mini program in the mobile device.

Use real-device debugging function of the mini program

  1. Click Debug in the navigation bar of mini program development tool to generate a QR code.
    Real-device debugging
  2. Use the code scanning function of the real device to scan this QR code. On the mobile device, you can see the remote debugging is connected and ready to enter the debugging mode.