微信小程序入门6--利用POST提交控制开关
本帖最后由 湖畔科技 于 2020-3-10 18:33 编辑一、跳过域名校检为了更加方便的查看效果，可以在微信开发者工具中，可以临时开启开发环境不校验请求域名、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文件，将以下代码完全替换，用于时间戳的转换。const formatNumber = n => {
n = n.toString()
return n ? n : '0' + n
}
module.exports = {
formatTime: formatTime
}
function formatTime(number, format) {
var formateArr = ['Y', 'M', 'D', 'h', 'm', 's'];
var returnArr = [];
var date = new Date(number * 1000);
returnArr.push(date.getFullYear());
returnArr.push(formatNumber(date.getMonth() + 1));
returnArr.push(formatNumber(date.getDate()));
returnArr.push(formatNumber(date.getHours()));
returnArr.push(formatNumber(date.getMinutes()));
returnArr.push(formatNumber(date.getSeconds()));
for (var i in returnArr) {
format = format.replace(formateArr, returnArr);
}
return format;
}打开建立的wxml 文件将以下代码完全替换。<view>时间：{{times}}</view>
<view>控制操作(点击图标以改变状态)</view>
<view bindtap='bindtapimg'>
<image src="{{image}}" class="img"></image>
</view>打开建立的wxss 文件将以下代码完全替换。.img{
width: 80px;
height: 120px;
}打开建立的js文件将以下代码完全替换，注意替换您的u-apikey。
const time = require('../../utils/util.js'); //引用utils.js进行时间戳转换
Page({
data: {
'times': null, //初始值
'value': null,
'image': null,
'tjvalue': null,
},
tool: function () { //进行封装
var that = this; //把this对象复制到临时变量that
wx.request({
url: 'https://www.nnhpiot.com/v1/datapoints/device/86/sensor/85', //请求数据的链接
success: function (res) {
that.setData({
times: time.formatTime(parseInt(res.data.timestamp), 'Y/M/D h:m:s'), //时间戳转换
value: res.data.value
}); //和页面进行绑定可以动态的渲染到页面
if (that.data.value == 0) {
that.setData({'image': "../../img/close.png" })
} else {
that.setData({'image': "../../img/open.png" })
}
},
})
},
onLoad: function(options) {
this.tool()//进行调用
},
bindtapimg: function() {
var that = this;
if (that.data.value == 0) {
that.setData({ 'tjvalue': 1 })
} else {
that.setData({ 'tjvalue': 250})
}
wx.request({
url: "https://www.nnhpiot.com/v1/datapoints/device/86/sensor/85",
method: "POST",
data: {
"value": that.data.tjvalue//提交1或250改变状态
},
header: {
"Content-Type": "application/x-www-form-urlencoded;text/html; charset=UTF-8",
'u-apikey': '3b3f3cabd16293eff6901903648b767b'
},
success: function(res) {
if (res.data == 'success') {
that.tool()//进行调用
} else {
wx.showToast({title: '修改失败', })
}
},
})
}
})
完成后保存，微信小程序端的页面为：
点击图片改变状态：
刷新网页端，状态进行相应的改变。
以上就是利用POST提交控制开关的全部步骤，感谢观看！
页:
[1]