前言

OneNET提供了内部的数据可视化展示，然而样式与格式比较固定，配置比较复杂，最主要是好多的功能不开通VIP会员无法使用；所以本文使用OneNET的API开放接口实现数据的网页前端展示，展示效果如下图所示。

 一、视频教程

二、环境准备

网页空间

网页空间需要支持PHP文件的运行，一般网页空间都支持PHP的运行

域名

需要准备一个可用的域名

三、功能简介

本网页程序实现了与 OneNET API 的数据对接，使使用OneNET MQTT协议设备上传的数据（温度、湿度）可以直观的展示在网页上，并且可以监测到设备的实时在线状态；您可以对网页上的阈值进行设置，当温度/湿度超过阈值时网页会通过背景闪烁、指针变红和声音报警（手动开启）。当您第一次访问时会要求您填写设备的OneNET信息，如下图所示，填写后即可正常使用！

 

四、OneNET配置方法

1.登录 OneNET 平台

OneNET 物联网平台免费物联网开放平台https://open.iot.10086.cn/console

2.创建产品 

①产品开发

②创建产品

③配置信息

④创建完成

3.添加设备

①设备管理

②添加设备

③设备信息

④添加完成

4.信息获取

①设备详情

②信息获取

5.Token生成

下载 OneNET 官方提供的 Token生成工具：点击下载

 

参数配置：
res：products/{产品id}/devices/{设备名}
et：1893427200    //时间戳（当前时间：2030-01-01 00:00:00） 
                  //时间戳转换网站：https://tool.chinaz.com/tools/unixtime.aspx
key：设备密钥

对应到我们的产品：
res：products/7v59QJTl1T/devices/test1
et：1893427200
key：NE5tdHZ5NkRoblhZb1J3ejRBdmhZV3hSb25xRWJtWXc=

生成信息：
Token生成：version=2018-10-31&res=products%2F7v59QJTl1T%2Fdevices%2Ftest1&et=1893427200&method=md5&sign=ToUauGiwKgtH7S%2BU27CeXA%3D%3D

6.配置物理模型

①产品开发

②设置物理模型

③添加自定义功能点 

④温/湿度设置

 

⑤保存配置

五、服务器配置方法

1.上传文件

①在管理页面点击文件管理器

②在网站目录上传文件并解压

 一般情况下，网站的目录都是在wwwroot下，若没有可以看虚拟主机的说明

2.域名绑定

①在管理页面点击域名绑定

②根据说明绑定域名

③域名添加记录

在域名的DNS管理中添加解析记录

④添加绑定域名

⑤绑定完成测试使用

⑥填写信息 

 分别填写上面获取的 Token、产品ID、设备名称 三个信息即可完成配置

项目部署

部署地址：https://cloud.tao-space.top/2025/06/16/onenet%e7%89%a9%e8%81%94%e7%bd%91%e6%b8%a9%e6%b9%bf%e5%ba%a6%e7%bd%91%e9%a1%b5%e6%95%b0%e6%8d%ae%e5%b1%95%e7%a4%ba/