AI 助理
备案控制台
文档
输入文档关键字查找
首页

自定义面板开发教程

更新时间：
产品详情
我的收藏

平台支持开发者给IoT设备开发并上传自定义控制面板，本文介绍自定义面板快速开发流程和上传步骤，以及上传的文件规范。

前提条件

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

设备面板上传及预览

说明

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

文件规范

  • 代码构建产物必须放在dist文件夹中，然后新建一个项目文件夹，将dist文件夹放在该项目文件夹中，并将项目打包成zip文件进行上传，dist文件夹包含index.html文件。

  • 压缩包名长度不超过20，且仅由英文、数字、下划线（_）构成。

  • 压缩文件大小不超过1M。

上传流程

  1. 登录生活物联网控制台。

  2. 在产品的人机交互>设备面板页面，单击选择面板。

  3. 在选择面板页面，单击上传自定义面板。

    重要

    上传自定义面板前需要将自定义面板开发完毕并打包，详细开发流程参见下文自定义面板开发与调试。

    image.png

  4. 在弹窗中单击上传自定义面板，在文件夹中选择自定义面板上传。image.png

  5. 上传完毕面板后，可预览面板。

    1. 云智能App预览，

      使用云智能App进入开发者模式后，扫描弹窗中的二维码进行预览。

      说明

      云智能App未审核的自定义面板只能用开发者模式预览，进入开发者模式的方法请参见如何进入云智能App开发者模式。

    2. 天猫精灵App预览

      使用天猫精灵App扫描下方的二维码进入调试设备列表，然后单击对应的设备进行预览。image.png

      image.png

面板审核

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

  1. 完成面板上传后，在批量投产界面，单击发起审核开始审核流程。未完成面板审核时产品无法发布。

    说明

    发起流程后再上传面板将使审核状态重置为未发起。

    image.png

  2. 审核失败时，会提示失败原因，可根据失败原因进行修复后重新上传，或重新发起审核。

自定义面板开发与调试

面板开发脚手架

脚手架安装

npm i aliyun-livinglink-panel-cli -g

项目初始化

device-panel init

  1. 填入项目相关信息。

    image.png

  2. 选择要生成的模板品类。image.png

  3. 选择开发框架。image.png

  4. 安装依赖。image.png

  5. cd到项目目录，执行 npm start 启动项目。

项目打包

device-panel pack
说明

虽然打包命令在没有构建产物的情况下会自动执行构建，但是在打包之前建议先执行 npm run build 本地构建一下，防止出现构建错误。

image.png

自定义面板调试

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

  1. 获取设备参数。

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

    1. 云智能Appimage.png

    2. 天猫精灵Appimage.png调试页面的内容如下图：image.png

  2. 拼接参数。

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

    https://xx/index.html?_ali_status_bar_transparent_=true&_ali_disable_nav_=true&pk=上一步复制过来的productKey&devId=上一步复制过来的iotId

    说明

    1. xx代表本地应用启动服务的局域网ip，不要直接使用xx.xx.xx；

    2.天猫精灵App的URL参数需要增加skillId。

  3. 生成预览URL。

    1. 将上面步骤中拼接好参数的URL进行编码。image.png

    2. 再拼接到下方的预览URL中，生成预览URL。

      • 云智能App

        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

      • 天猫精灵App

        assistant://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或天猫精灵App扫码预览即可自行预先调试面板。