自有品牌项目支持开发者给IoT设备上传自定义控制面板，目前仅支持在云智能App下使用；本文介绍自定义面板上传的流程和上传的文件规范。

前提条件

需已在控制台创建产品，详见创建产品。

设备面板上传及预览

说明 目前该能力尚在内测中，需要使用该能力的用户请联系商务或客服沟通。

文件规范

  • 代码构建产物必须放在dist文件夹中，并将项目打包成zip文件进行上传，dist文件夹包含index.html文件。
  • 压缩包名长度不超过20，且仅由中文、英文、数字、下划线（_）构成。
  • 压缩文件大小不超过1M。

上传流程

  1. 登录生活物联网控制台。
  2. 在自有品牌项目下产品的人机交互页面，单击设备面板。设备面板
  3. 单击面板选择页对应的未设置或选择面板，打开面板选择页面，单击右下角的上传自定义面板。
    说明 自定义面板的开发可参考平台提供的模板，模板有以下：
    上传控制面板
  4. 在弹窗中单击上传自定义面板，上传自定义面板。上传自定义面板
  5. 上传完毕后，弹窗中出现二维码，使用云智能App进入开发模式后扫码预览自定义面板。
    说明 未审核的自定义面板只能用开发者模式预览。
    扫描预览

面板审核

为规范生活物联网平台自定义面板的使用，上传了自定义面板的产品需要完成面板审核流程后才能进行量产发布。

  1. 完成面板上传后，在批量投产界面，单击发起审核开始审核流程。未完成面板审核时产品无法发布。
    说明 发起流程后再上传面板将使审核状态重置为未发起。
    面板审核
  2. 审核失败时，会提示失败原因，可根据失败原因进行修复后重新上传，或重新发起审核。

自定义面板调试

如果希望在上传面板之前预先调试面板，可自行生成自定义面板的二维码，并使用云智能App进入开发者模式扫码预览。详细步骤如下：

  1. 获取设备参数。

    使用云智能App扫描下方二维码进入调试页面，并复制页面中的productKey和iotId。

    调试二维码

    调试页面的内容如下图：

    调试页面内容
  2. 拼接参数。

    将上一步骤中复制的设备参数拼接到下面的URL中。

    https://xx/index.html?_ali_status_bar_transparent_=true&_ali_disable_nav_=true&pk=上一步复制过来的productKey&devId=上一步复制过来的iotId
  3. 生成预览URL。
    1. 将上面步骤中拼接好参数的URL进行编码。URL编码
    2. 再拼接到下方的预览URL中，生成预览URL。
      ilop://hybrid?manifest=false&page=https%3A%2F%2Fxx%2Findex.html%3F_ali_status_bar_transparent_%3Dtrue%26_ali_disable_nav_%3Dtrue%26pk%3D%E4%B8%8A%E4%B8%80%E6%AD%A5%E5%A4%8D%E5%88%B6%E8%BF%87%E6%9D%A5%E7%9A%84productKey%26devId%3D%E4%B8%8A%E4%B8%80%E6%AD%A5%E5%A4%8D%E5%88%B6%E8%BF%87%E6%9D%A5%E7%9A%84iotId
  4. 生成预览的二维码。

    使用第三方工具将上述步骤中生成的预览URL转换成二维码。

  5. 使用云智能App扫码预览即可自行预先调试面板。