本文主要介绍在微信小程序结合湖畔云控制开发板上的LED灯。
主要从以下四个方面进行介绍:
1 、在湖畔云复制开关状态URL
2 、GET查询状态
3 、POST改变状态
4 、编写代码
1 、在湖畔云复制开关状态URL
首先为了更加方便的查看效果,可以在微信开发者工具中,可以临时开启开发环境不校验请求域名、TLS版本及HTTPS证书 选项,跳过服务器域名的校验。
在湖畔云进入个人管理中心,链接: https://nnhpiot.com/Customdevice/devicedetails/86.html,在管理设备中查看设备。
在许多的设备中,往下拉,找到控制LED的开关,将其URL复制备用,完整的链接为:https://www.nnhpiot.com/v1/datapoints/device/86/sensor/85。
2 、GET查询状态
小程序调用wx.request(Object object)方法发起网络请求,域名必须使用HTTPS/WSS协议。默认超时时间和最大超时时间都是60S。GET请求类似于浏览器的URL请求。
在tool方法中采用GET请求查询开关的状态。请求成功之后采用IF语句进行判断,若value的值为0,则将图片显示为关的图片,反之则显示为开的图片。
onLoad函数可以在页面第一次加载时触发,在onLoad函数中调用tool方法。
3 、POST改变状态
小程序调用wx.request(Object object)方法发起网络请求,域名必须使用HTTPS/WSS协议。默认超时时间和最大超时时间都是60S。
POST方法的header[‘content-type’] 为 application/x-www-form-urlencoded 的数据,method:为POST。
采用点击图片以改变开关的状态,对图片外的VIEW添加bindtap方法。在bindtap方法中进行post提交。若当前的状态为开(value为1),则改变状态时,状态变为关(value为0)。需要将状态变为开(value为1),则需要提交1,状态变为关(value为0),则需要提交250.
若是post提交成功,则更新页面显示,重新进行上述的get查询状态,调用tool方法。
4 、编写代码
打开utils文件的utils.js文件,将以下代码完全替换,用于时间戳的转换。
const formatNumber = n => {
2. n = n.toString()
3. return n[1] ? n : '0' + n
4. }
5.
6. module.exports = {
7. formatTime: formatTime
8. }
9.
10. function formatTime(number, format) {
11. var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
12. var returnArr = [];
13.
14. var date = new Date(number * 1000);
15. returnArr.push(date.getFullYear());
16. returnArr.push(formatNumber(date.getMonth() + 1));
17. returnArr.push(formatNumber(date.getDate()));
18.
19. returnArr.push(formatNumber(date.getHours()));
20. returnArr.push(formatNumber(date.getMinutes()));
21. returnArr.push(formatNumber(date.getSeconds()));
22.
23. for (var i in returnArr) {
24. format = format.replace(formateArr[i], returnArr[i]);
25. }
26.
27. return format;
28. }
打开建立的wxml 文件将以下代码完全替换。
1. <view>时间:{{times}}</view>
2. <view>控制操作(点击图标以改变状态)</view>
3. <view bindtap='bindtapimg'>
4. <image src="{{image}}" class="img"></image>
5. </view>
打开建立的wxss 文件将以下代码完全替换。
6. .img{
7. width: 80px;
8. height: 120px;
9. }
打开建立的js文件将以下代码完全替换,注意替换您的u-apikey。
1. const time = require('../../utils/util.js'); //引用utils.js进行时间戳转换
2. Page({
3. data: {
4. 'times': null, //初始值
5. 'value': null,
6. 'image': null,
7. 'tjvalue': null,
8. },
9.
10. tool: function () { //进行封装
11. var that = this; //把this对象复制到临时变量that
12. wx.request({
13. url: 'https://www.nnhpiot.com/v1/datapoints/device/86/sensor/85', //请求数据的链接
14. success: function (res) {
15. that.setData({
16. times: time.formatTime(parseInt(res.data.timestamp), 'Y/M/D h:m:s'), //时间戳转换
17. value: res.data.value
18. }); //和页面进行绑定可以动态的渲染到页面
19. if (that.data.value == 0) {
20. that.setData({ 'image': "../../img/close.png" })
21. } else {
22. that.setData({ 'image': "../../img/open.png" })
23. }
24. },
25. })
26. },
27. onLoad: function(options) {
28. this.tool() //进行调用
29. },
30.
31. bindtapimg: function() {
32. var that = this;
33. if (that.data.value == 0) {
34. that.setData({ 'tjvalue': 1 })
35. } else {
36. that.setData({ 'tjvalue': 250 })
37. }
38. wx.request({
39. url: "https://www.nnhpiot.com/v1/datapoints/device/86/sensor/85",
40. method: "POST",
41. data: {
42. "value": that.data.tjvalue //提交1或250改变状态
43. },
44. header: {
45. "Content-Type": "application/x-www-form-urlencoded;text/html; charset=UTF-8",
46. 'u-apikey': '您的u-apikey'
47. },
48. success: function(res) {
49. if (res.data == 'success') {
50. that.tool() //进行调用
51. } else {
52. wx.showToast({ title: '修改失败', })
53. }
54. },
55. })
56. }
57. })
完成后保存,微信小程序端的页面为开,说明开发板上的LED灯处于亮灯状态。
在微信小程序上点击图片使LED灯变关的状态。
刷新网页端,状态发生相应的改变,因此实现微信小程序端和网页端同步完成LED灯开关的功能。
以上就是利用POST提交控制开关的全部步骤,感谢您的观看!