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

湖畔科技

一、跳过域名校检

为了更加方便的查看效果，可以在微信开发者工具中，可以临时开启开发环境不校验请求域名、TLS版本及HTTPS证书 选项，跳过服务器域名的校验。

二、编写代码

2.1 复制开关状态URL

进入个人管理中心，链接: https://nnhpiot.com/Customdevice/devicedetails/86.html,在管理设备中查看设备。

在许多的设备中，往下拉，找到控制LED的开关，将其URL复制备用，完整的链接为：https://www.nnhpiot.com/v1/datapoints/device/86/sensor/85。

2.2 GET查询状态

小程序调用wx.request(Objectobject)方法发起网络请求，域名必须使用HTTPS/WSS协议。默认超时时间和最大超时时间都是60S。GET请求类似于浏览器的URL请求。在tool方法中采用GET请求查询开关的状态。请求成功之后采用IF语句进行判断，若value的值为0，则将图片显示为关的图片，反之则显示为开的图片。onLoad函数可以在页面第一次加载时触发，在onLoad函数中调用tool方法。

2.3 POST改变状态

小程序调用wx.request(Objectobject)方法发起网络请求，域名必须使用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方法。

2.4 编写代码

打开utils文件的utils.js文件，将以下代码完全替换，用于时间戳的转换。

1. 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 文件将以下代码完全替换。

1. .img{
   
2.   width: 80px;
   
3.   height: 120px;
   
4. }

复制代码

打开建立的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': '3b3f3cabd16293eff6901903648b767b'
    
47.       },
    
48.       success: function(res) {
    
49.         if (res.data == 'success') {
    
50.           that.tool()  //进行调用
    
51.         } else {
    
52.           wx.showToast({  title: '修改失败',    })
    
53.         }
    
54.       },
    
55.     })
    
56.   }
    
57. })

复制代码

完成后保存，微信小程序端的页面为：

点击图片改变状态：

刷新网页端，状态进行相应的改变。

以上就是利用POST提交控制开关的全部步骤，感谢观看！