前提条件
步骤1:创建产品及设备
1. 登录腾讯云 物联网开发平台控制台,选择公共实例或您购买的标准企业实例,进入产品开发。
2. 参考 入门指引 创建产品和设备,并将设备成功接入物联网开发平台和上报数据。
步骤2:配置自定义 H5 面板
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. 选择“+” > 扫一扫,扫描控制台页面展示的二维码。扫描成功后,腾讯连连小程序自动绑定该设备,页面提示添加设备成功。