微信小程序入门6--利用POST提交控制开关

本文主要介绍在微信小程序结合湖畔云控制开发板上的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提交控制开关的全部步骤，感谢您的观看！