湖畔科技 发表于 2020-3-26 01:50:21

传感器设备的综合使用

本帖最后由 湖畔科技 于 2020-3-26 01:52 编辑

一、在百度地图开发平台申请AK
1.1 注册账号
搜索http://lbsyun.baidu.com/进入百度地图开放平台首页,在首页的开发文档下的微信小程序JavaScript API,进入小程序js API的开发,展开左侧的开发指南找到账号与密钥。
也可以直接搜索http://lbsyun.baidu.com/index.php?title=wxjsapi/guide/key进入。
进入百度开放平台官网,点击右上角“API控制台”,注册成为百度地图开发者。如果未登录百度账号,会引导登录百度账号。如果账号未注册,请根据提示填写正确的邮箱及手机号完成开发者注册流程。






1.2创建应用   
再次点击进入控制台,创建一个新应用。

应用名称自定义、 应用类型选择微信小程序、 启用服务建议全部勾选、 APPID(小程序的APPID)通过微信小程序微信认证获得,完善小程序信息后,AppID已经生成,在小程序发布流程下小程序信息中,查看详情页,一直往后滑即可看到。 完成后即可提交。


1.3获取密钥(AK)
创建好应用后,即可在应用页面看到申请成功的密钥(AK)。

二、下载API模块
在百度地图开放平台下载百度地图微信小程序JavaScript API。
搜索http://lbs.baidu.com/index.php?title=wxjsapi/wxjs-download进行下载。
解压后在wxapp-jsapi-master文件夹下的src中又两个JS文件,bmap-wx.js为常规没压缩的,bmap-wx.min.js是压缩过的,由于微信小程序项目文件大小有限制,建议使用压缩的。



在项目中新建一个文件夹libs,将bmap-wx.min.js文件拷贝到libs下。

三、获取设备URL
进入个人管理中心,链接: https://nnhpiot.com/Customdevice/devicedetails/86.html,在管理设备中查看设备。

在许多的设备中,将其URL复制备用,完整的链接为:
https://www.nnhpiot.com /v1/datapoints/device/86/sensor/82
https://www.nnhpiot.com /v1/datapoints/device/86/sensor/83
https://www.nnhpiot.com/v1/datapoints/device/86/sensor/85

四、编写代码
4.1 跳过域名校检
在编写代码之前,可以临时开启开发环境不校验请求域名、TLS版本及HTTPS证书选项,跳过服务器域名的校验。

4.2 设备网络请求
编写代码时,首先要弄清楚设备和传感器之间的关系,一个设备可以有多个相同或不同的传感器,每个传感器只能从属于一个设备。
小程序调用wx.request(Object object)方法发起网络请求,域名必须使用HTTPS/WSS协议。默认超时时间和最大超时时间都是60S。GET请求类似于浏览器的URL请求。
新建all文件,在all/index.js调用接口请求所有设备。例如:https://www.nnhpiot.com/v1/Devices。将header下的u-apikey改成自己的u-apikey。完成后在wxml进行调用循环显示。

4.3 GPS网络请求
通过设备请求之后,可以得到三个设备,并得到设备相应的设备ID,新建little项目文件用于显示设备中的传感器。当前介绍设备中的GPS网络请求。
通过在all/index上点击某一设备,在little/index.wxml上显示该设备的传感器数据。在跳转到little/index时,将该设备的设备ID进行传值,已便于进行相应设备的接口的调用显示,例如:https://www.nnhpiot.com/v1/sensors/86。86就是设备ID,get请求在加上u-apikey就可以获取到该设备所有传感器。

由于每个设备的传感器不同,得到的传感器数据也不尽相同,因此请求传感器接口的时候,需要两个变量数据:设备ID、传感器ID。例如:https://www.nnhpiot.com/v1/datapoints/device/86/sensor/83。
86是设备ID,83是传感器ID。因此需要for循环请求接口。
当请求传感器数据的URL时,判断URL返回的data,若data的type=3时,进行请求GPS。用方法tool_gps进行封装。

将经纬度信息代入百度地图API进行逆地址转换。
请求返回的GPS经纬度信息存入jokeList数组和marker数组。进行页面地图的显示。

4.4 温度网络请求
首先引用utils文件的utils.js文件,用于时间戳的转换。
通过设备请求之后,可以得到三个设备,并得到设备相应的设备ID,新建little项目文件用于显示设备中的传感器。当前介绍设备中的温度网络请求。
通过在all/index上点击某一设备,在little/index.wxml上显示该设备的传感器数据。在跳转到little/index时,将该设备的设备ID进行传值,已便于进行相应设备的接口的调用显示,例如:https://www.nnhpiot.com/v1/sensors/86。86就是设备ID,get请求在加上u-apikey就可以获取到该设备所有传感器。

由于每个设备的传感器不同,得到的传感器数据也不尽相同,因此请求传感器接口的时候,需要两个变量数据:设备ID、传感器ID。例如:https://www.nnhpiot.com/v1/datapoints/device/86/sensor/83。
86是设备ID,83是传感器ID。因此需要for循环请求接口。
当请求传感器数据的URL时,判断URL返回的data,若data的type=1时,进行请求温度数据。用方法tool_wendu进行封装。

将返回的时间戳进行转换,进行页面温度的显示。

4.5 开关网络请求
当请求传感器数据的URL时,判断URL返回的data,若data的type=2时,进行开关网络请求。用方法tool进行封装。

采用点击图片以改变开关的状态,对图片外的VIEW添加bindtap方法。在bindtap方法中进行post提交。若当前的状态为开(value为1),则改变状态时,状态变为关(value为0)。需要将状态变为开(value为1),则需要提交1,状态变为关(value为0),则需要提交250.
若是post提交成功,则更新页面显示,重新进行上述的get查询状态,重新调用tool方法。


4.6 最终效果
在完成以上的操作之后,all/index页面得到以下最终效果。

点击设备iot-1601,little/index页面得到以下效果。

点击设备GPSTest,little/index页面得到以下效果。

在小程序对开关进行更改,网页上也会相应进行改变。

点击设备微信小程序测试,little/index页面得到以下效果。

在小程序对开关进行更改,网页上也会相应进行改变。

完整小程序代码请联系作者!!!
以上就是传感器设备的综合使用的全部步骤,感谢观看!


页: [1]
查看完整版本: 传感器设备的综合使用