腾讯云物联网开发平台为开发者提供一个 H5 自定义面板 Demo，开发者可以按本文档的指引流程部署并体验 H5 自定义面板 Demo。关于 Demo 的更多信息，请参见 H5 面板 Demo。
前提条件
注册腾讯云账号，并完成 实名认证。
步骤1：创建产品及设备
本步骤指导您通过物联网开发平台的快速入门功能，创建一个智能灯产品及设备，并将模拟设备连接平台进行数据上报。如需自行创建产品和设备，请参见 产品开发。
1. 登录腾讯云物联网开发平台控制台，选择公共实例或您购买的标准企业实例，进入产品开发。
2. 参考入门指引 创建产品和设备，并将设备成功接入物联网开发平台和上报数据。
步骤2：配置自定义 H5 面板
1. 下载 H5 面板的 JS 文件 和 CSS 文件。
2. 登录腾讯云物联网开发平台控制台，选择 步骤1中创建的项目，进入项目详情页面。
3. 从产品列表中选择 步骤1 中创建的产品，进入产品详情页面。
4. 选择交互开发 > 面板配置，单击配置，进入面板配置页面。
5. 在面板类型中，选择“H5自定义面板”。
6. 在“上传 JS”表单中，单击上传，选择 H5 面板的 JS 文件。上传完成后，页面显示 JS 文件的名称、大小和 MD5 信息。
7. 在“上传 CSS”表单中，单击上传，选择 H5 面板的 CSS 文件。上传完成后，页面显示 CSS 文件的名称、大小和 MD5 信息。
步骤3：添加连连用户到 H5 面板访问白名单
开发阶段，需要设置访问白名单才可使用腾讯连连调试 H5 自定义面板。设置访问白名单的操作步骤如下：
1. 打开腾讯连连小程序。
2. 单击我的，然后单击页面顶部的个人信息，进入个人信息页面。
3. 长按账号以复制腾讯连连用户 ID，复制成功后页面提示内容已复制。
4. 登录 物联网开发平台控制台，选择对应的项目中及产品。
5. 单击产品中的交互开发 > 配置小程序 > 面板配置 > 配置进入面板配置页。
6. 将“面板类型”选择为“H5自定义面板”，单击设置白名单，进入设置白名单页面。
7. 在白名单列表中，输入上述步骤复制的腾讯连连用户 ID。
8. 单击确定，页面提示保存成功。
9. 关闭“设置白名单”的弹窗后，单击配置页面的保存即可。
步骤4：在小程序绑定设备
虚拟设备
1. 在产品详情页面，选择设备调试 > 虚拟设备调试，进入虚拟设备调试页面，页面将展示虚拟设备调试的二维码。
2. 使用微信扫描该二维码，微信即跳转到腾讯连连小程序。授权完成后，腾讯连连小程序自动绑定该设备，页面提示添加设备成功。
真实设备
1. 在产品详情页面，单击设备调试，进入设备调试页面，页面展示设备列表。
2. 在设备列表中，选择 步骤1 中创建的设备，单击二维码，页面展示设备绑定二维码。
3. 使用微信扫描下方的小程序码，打开腾讯连连小程序。
4. 选择“+” > 扫一扫，扫描控制台页面展示的二维码。扫描成功后，腾讯连连小程序自动绑定该设备，页面提示添加设备成功。
步骤5：体验自定义 H5 面板
在腾讯连连小程序中，选择 步骤3 中绑定的设备，进入设备控制页面。页面展示自定义 H5 面板，可在该面板进行设备控制等操作。
