All Products
Search
Document Center

Access real-device preview and debugging function

Last Updated: Mar 11, 2021
Note: The real-device preview and debugging function is only supported in mPaaS 10.1.60 and above.

The procedure of accessing the real-device preview and debugging function is as follows:

  1. Add the value of h5_remote_debug_host in HTML5 container configuration file (for example, custom_config.json in the demo project). The value is the server address for communication debugging.

    1. Open the Mini program IDE configuration file (config.json) downloaded from the mPaaS console, and find the field debug_url. An example of the configuration file is as follows:

           
      1. {
      2. "login_url":"https://mappcenter.cloud.alipay.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. "sign":"3decfd66c2924489204b4b0f38a9c228",
      6. "upload_url":"https://mappcenter.cloud.alipay.com/ide/mappcenter/mds"
      7. }
    2. Add h5_remote_debug_host in the custom_config.json file, setting key as h5_remote_debug_host while value as debug_url, and adding /host/ to the end. An example is as follows:
           
      1. [
      2. {
      3. "key": "h5_remote_debug_host",
      4. "value": "wss://cn-hangzhou-mproxy.cloud.alipay.com/host/"
      5. }
      6. ]
  2. Set the virtual domain name used by the Mini program.

    1. On the mPaaS console, go to the Mini Program > Release Mini Program > Manage configuration page, and then obtain the domain name that you previously entered.

      vhost

    2. Open MyApplication in the project, and call the method tinyHelper.setTinyAppVHost before you start the mini program or the App starts to set the virtual domain name used by the mini program.

      Note: You should replace demo.com in the code sample with the actual virtual domain name.
           
      1. MPTinyHelper tinyHelper = MPTinyHelper.getInstance();
      2. tinyHelper.setTinyAppVHost("demo.com");
  3. Set the whitelist.

    When using the real-device preview and debugging function, you should configure the user ID on the client. Namely, the client will return the unique identifier of the App in the userId method according to the actual situation.

    Then, add the following code below the code block for setting the virtual domain name. The value you input in Configure Whitelist in the Mini Program IDE subsequently must be consistent with the userId configured here.

       
    1. MPLogger.setUserId("your userId");
  4. Access Code Scanner and parse the QR code for preview or debugging. Code sample of parsing the QR code and starting the mini program is as follows:

    • If your baseline version is 10.1.68.6 or higher, please use the following code to parse the QR code. You can view the baseline version in the mPaaS > Component Management menu.

           
      1. //The first parameter refers to the uri of the QR code; the second one refers to the custom startup parameter. If no custom startup parameter is available, just fill new Bundle().
      2. MPTinyHelper.getInstance().launchIdeQRCode(uri, new Bundle());
    • If your baseline version is earlier than 10.1.68.6, please use the following code to parse the QR code.
           
      1. // uri corresponds to the content of QR code
      2. String scheme = uri.getScheme();
      3. if ("mpaas".equals(scheme)) {
      4. Bundle params = new Bundle();
      5. String appId = uri.getQueryParameter("appId");
      6. for (String key : uri.getQueryParameterNames()) {
      7. if (!"appId".equalsIgnoreCase(key)) {
      8. params.putString(key, uri.getQueryParameter(key));
      9. }
      10. }
      11. LauncherApplicationAgent.getInstance().getMicroApplicationContext()
      12. startApp(null, appId, params);
      13. }