真机预览与调试

小程序 IDE 支持真机预览与调试,您可以在手机客户端上预览当前代码的实际效果或进行调试。本文对真机预览与调试的操作步骤,以及过程中使用的接口进行了说明。

前置条件

使用小程序 IDE 真机预览与调试功能之前,请确保您的 Android 小程序已接入真机预览与调试功能。详情请参考 MriverDebug 调试 API

操作步骤

  1. 打开您从 mPaaS 控制台 下载的名为 config.json的小程序 IDE 配置文件,找到 debug_url字段。

    配置文件示例如下:

    {
    "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. 通过 setWssHost 设置调试地址,并在末尾加上 /host/,示例如下。

    MriverDebug.setWssHost("wss://cn-hangzhou-mproxy.cloud.alipay.com/host/");
  3. 单击 IDE 右上方的 预览真机调试

    1. IDE 会将当前代码生成 .zip 包并上传至控制台。

    2. 控制台自动创建发布任务,生成二维码并返回至 IDE。

      说明

      未正确设置白名单可能会导致二维码构建和生成失败。更多信息请参见 白名单设置

  4. 使用手机客户端扫描 IDE 中显示的二维码。扫码之后,会触发控制台下发小程序包。

    二维码有效期为 15 分钟,超时后会显示 刷新 按钮。

  5. 待手机客户端收到小程序包后,即可在手机端进入预览或调试界面。

接口说明

下文对真机预览与调试操作过程中使用的接口以及参数进行了说明,并提供了对应的代码示例。

MriverDebug.debugAppByScan(Activity activity)

该接口用于预览与调试,使用 mPaaS 自带扫码,预览小程序。

代码示例

MriverDebug.debugAppByScan(MainActivity.this);

参数说明

名称

类型

描述

必填

activity

Activity

所在的 Activity。

MriverDebug.debugAppByUri(Activtiy activity,Uri uri)

该接口用于跳转到小程序,推荐跳转到启动小程序所在页面的 activity。使用自定义扫码,预览小程序。

代码示例

MriverDebug.debugAppByUri(MainActivity.this,intent.getData()); 

参数说明

名称

类型

描述

必填

activity

Activity

所在的 Activity。

否 (推荐填写)

uri

Uri

二维码扫描返回的数据。