本帖最后由 湖畔科技 于 2020-3-26 01:52 编辑
一、在百度地图开发平台申请AK
1.1 注册账号
进入百度开放平台官网,点击右上角“API控制台”,注册成为百度地图开发者。如果未登录百度账号,会引导登录百度账号。如果账号未注册,请根据提示填写正确的邮箱及手机号完成开发者注册流程。
1.2创建应用
再次点击进入控制台,创建一个新应用。
应用名称自定义、 应用类型选择微信小程序、 启用服务建议全部勾选、 APPID(小程序的APPID)通过微信小程序微信认证获得,完善小程序信息后,AppID已经生成,在小程序发布流程下小程序信息中,查看详情页,一直往后滑即可看到。 完成后即可提交。
1.3获取密钥(AK)
创建好应用后,即可在应用页面看到申请成功的密钥(AK)。
二、下载API模块
在百度地图开放平台下载百度地图微信小程序JavaScript API。
解压后在wxapp-jsapi-master文件夹下的src中又两个JS文件,bmap-wx.js为常规没压缩的,bmap-wx.min.js是压缩过的,由于微信小程序项目文件大小有限制,建议使用压缩的。
在项目中新建一个文件夹libs,将bmap-wx.min.js文件拷贝到libs下。
三、获取设备URL
在许多的设备中,将其URL复制备用,完整的链接为:
四、编写代码
4.1 跳过域名校检
在编写代码之前,可以临时开启开发环境不校验请求域名、TLS版本及HTTPS证书选项,跳过服务器域名的校验。
4.2 设备网络请求
编写代码时,首先要弄清楚设备和传感器之间的关系,一个设备可以有多个相同或不同的传感器,每个传感器只能从属于一个设备。
小程序调用wx.request(Object object)方法发起网络请求,域名必须使用HTTPS/WSS协议。默认超时时间和最大超时时间都是60S。GET请求类似于浏览器的URL请求。
4.3 GPS网络请求
通过设备请求之后,可以得到三个设备,并得到设备相应的设备ID,新建little项目文件用于显示设备中的传感器。当前介绍设备中的GPS网络请求。
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项目文件用于显示设备中的传感器。当前介绍设备中的温度网络请求。
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页面得到以下效果。
在小程序对开关进行更改,网页上也会相应进行改变。
完整小程序代码请联系作者!!!
以上就是传感器设备的综合使用的全部步骤,感谢观看!
|