微信小程序之传感器设备综合使用

LCIOT

一、在百度地图开发平台申请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页面得到以下效果。

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

智涅

佩服电工还能搞这么多软件的

LCIOT

智涅 发表于 2022-7-16 10:22
佩服电工还能搞这么多软件的
(引用自2楼)

不学多一点，都没有人要了

nine1999

帮人开通过微信小程序，没想到还能控制硬件

LCIOT

nine1999 发表于 2022-10-14 12:30
帮人开通过微信小程序，没想到还能控制硬件
(引用自4楼)

肯定可以的，物联网里面，小程序还是挺方便的