接入真机预览与调试

本文将引导您使用小程序的真机预览与调试功能。该过程主要分为以下六个步骤:

  1. 配置小程序的调试路径

  2. 设置小程序的 VHost 和用户白名单

  3. 添加小程序扫码组件

  4. 实现小程序的真机预览和调试功能

  5. 使用小程序的预览功能

  6. 使用小程序的真机调试功能

说明

仅在 mPaaS 10.1.60 及以上版本中支持。

操作步骤

配置小程序的调试路径

  1. 打开在 mPaaS 控制台下载的 小程序 IDE 配置文件 。此处以公有云环境下的配置文件为例:

    {
     "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. 获取配置文件中 debug_url 对应的 value。如下所示:wss://cn-hangzhou-mproxy.cloud.alipay.com

  3. 打开 Android 工程的 assets > config 下的 custom_config.json 文件。image.png

    对于 value,“NO” 表示关闭小程序验签;“YES” 表示开启小程序验签(不填则默认为 “YES”)。在开发调试阶段,可以关闭验签来快速接入;在上线前,建议开启验签。有关小程序包验签配置的具体操作可参考 配置小程序包

  4. 将获取到的 debug_url 的值中跟上 /host/ 后添加到 custom_config.json 文件中,如下所示:image.png

设置小程序的 VHost 和用户白名单

  1. 打开 MyApplication 类,在 mPaaS 的初始化回调中添加如下代码。在应用启动或启动小程序前调用 tinyHelper.setTinyAppVHost 方法来设置小程序所使用的虚拟域名。其中 VHost 的值与 mPaaS 控制台上 小程序 > 小程序发布 > 配置管理 > 域名管理 中的 虚拟域名 保持一致。image.png

  2. 打开小程序开发者工具,单击 mPaaS 工具箱(工具箱)> 设置 > 白名单设置 中添加用户白名单,单击 确定,会弹出 修改白名单成功! 的弹窗。image.png

  3. 打开 MyApplication 类,在 mPaaS 的初始化回调中添加如下代码,设置白名单用户 ID。image.png

添加小程序扫码组件

  1. 单击 Android Studio 菜单栏的 mPaaS > 原生 AAR 接入image.png

  2. 单击 配置/更新组件 下的 开始配置image.png

  3. 勾选 小程序扫码 组件,单击 OKimage.png

实现小程序的真机预览和调试功能

  1. MainActivity 中的 TestView 的点击事件中添加点击事件启动小程序扫码预览功能。image.png

  2. 单击 Run 运行程序到真机上。

  3. 单击 Hello World! 就可以启动扫码功能。image.png

  4. 单击弹窗中的 始终允许image.png

使用小程序的预览功能

  1. 单击 小程序开发者工具 导航栏中的 预览,会生成一个二维码。image.png

  2. 使用真机的扫码功能扫码该二维码,手机端即可以运行小程序。image.png

使用小程序的真机调试功能

  1. 单击 小程序开发者工具 导航栏中的 真机调试,也会生成一个二维码。image.png

  2. 使用真机的扫码功能扫码该二维码,手机端可以看到远程调试已连接,即可进入到调试模式。image.png