真机预览与调试

更新时间:
复制 MD 格式

小程序 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

二维码扫描返回的数据。

否