微信小程序入门7--传感器设备综合使用

本文内容主要为在微信小程序查询湖畔云中个人账号下的所有设备及对应设备的传感器,并对相应传感器进行操作。
本文主要从以下四个部分进行说明:
一、在百度地图开发平台申请AK
二、下载API模块
三、在湖畔云获取设备URL
四、编写代码
4.1 跳过域名校检
4.2 设备网络请求
4.3 GPS网络请求
4.4 温度网络请求
4.5 开关网络请求
4.6 最终效果

本文的第一第二部分在以往的文章中已有说明,如需了解,请移步:https://blog.csdn.net/hao1__/article/details/113961963。
第一第二部分主要用于将经纬度信息代入到百度地图开放平台进行逆地理编码。

三、在湖畔云获取设备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
86是设备ID,82、83、85是传感器ID,不同设备对应的设备ID、传感器ID不同。
在这里插入图片描述
四、编写代码
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 温度网络请求
当请求传感器数据的URL时,判断URL返回的data,若data的type=1时,进行请求温度数据。用方法tool_wendu进行封装。
在这里插入图片描述
4.5 开关网络请求
当请求传感器数据的URL时,判断URL返回的data,若data的type=2时,进行开关网络请求。用方法tool进行封装。
在这里插入图片描述
4.6 最终效果
在完成以上的操作之后,all/index页面得到以下最终效果,与网页端页面相似。
在这里插入图片描述
点击某一设备,展示对应设备的传感器信息,例如点击设备GPSTest,little/index详情页得到以下效果。
在这里插入图片描述
在小程序对开关进行更改,网页上也会相应进行改变,开发板呈现相应的状态。
对着温湿度传感器哈气快速升温,网页端及小程序端的温湿度数据实时发生改变。
在这里插入图片描述
以上就是传感器设备的综合使用的全部步骤,感谢观看!

  • 3
    点赞
  • 17
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值