#微信小程序(按键控制)

1.IDE:微信开发者工具


2.实验:微信小程序设计两个按钮,对onenet平台数据流(旧版)来进行http post上传,下位机再http get得到控制信息


3.记录

(1)bind-tap(绑定函数)

(2)关键代码

javascript 复制代码
//按键1
 kai:function(){
  let data={
    "datastreams":[
      {"id":"button_ctrl","datapoints":[{"value":1}]},  //button_ctrl为数据流名称
    ]
  }
  //按钮发送命令控制硬件
  wx.request({
    url: 'https://api.heclouds.com/devices/1105985351/datapoints',
    header:{
      'content-type': 'application/json',
      'api-key':'AdbrV5kCRsKsRCfjboYOCVcF9FY='
    },
    method: 'POST',
    data: JSON.stringify(data),   //data数据转换成JSON格式
    success(res){console.log("成功",res.data)},
    fail(res){console.log("失败",res)}
  })
 },
/********************************************************************************/ 
 //按键0
 guan:function(){
  let data={
    "datastreams":[
      {"id":"button_ctrl","datapoints":[{"value":0}]},  //button_ctrl为数据流名称
    ]
  }
  //按钮发送命令控制硬件
  wx.request({
    url: 'https://api.heclouds.com/devices/1105985351/datapoints',
    header:{
      'content-type': 'application/json',
      'api-key':'AdbrV5kCRsKsRCfjboYOCVcF9FY='
    },
    method: 'POST',
    data: JSON.stringify(data),   //data数据转换成JSON格式
    success(res){console.log("成功",res.data)},
    fail(res){console.log("失败",res)}
  })
 },

(3)函数绑定

html 复制代码
 <button class="ctrl" bindtap="kai">按键1</button>

4.代码

index.js

javascript 复制代码
Page({
  data: {
     ppm:0
    },
 //事件处理函数
 getinfo(){            //javascript中函数与函数之间需要用逗号隔开
   var that =this
wx.request({
  url: "https://api.heclouds.com/devices/1105985351/datapoints",
  header:{
    "api-key": "AdbrV5kCRsKsRCfjboYOCVcF9FY="                      //自己的apikey
  },
  method: "GET",
  success: function(e){    //获取成功将所有数据传入e
    console.log("获取成功",e)  //控制台打印获取回来的数值
    that.setData({
      ppm:e.data.data.datastreams[0].datapoints[0].value
    })
    console.log("ppm=",that.data.ppm)  //打印从json返回数据中解码出来的数据ppm
  }
})
 },

//按键1
 kai:function(){
  let data={
    "datastreams":[
      {"id":"button_ctrl","datapoints":[{"value":1}]},  //button_ctrl为数据流名称
    ]
  }
  //按钮发送命令控制硬件
  wx.request({
    url: 'https://api.heclouds.com/devices/1105985351/datapoints',
    header:{
      'content-type': 'application/json',
      'api-key':'AdbrV5kCRsKsRCfjboYOCVcF9FY='
    },
    method: 'POST',
    data: JSON.stringify(data),   //data数据转换成JSON格式
    success(res){console.log("成功",res.data)},
    fail(res){console.log("失败",res)}
  })
 },
/********************************************************************************/ 
 //按键0
 guan:function(){
  let data={
    "datastreams":[
      {"id":"button_ctrl","datapoints":[{"value":0}]},  //button_ctrl为数据流名称
    ]
  }
  //按钮发送命令控制硬件
  wx.request({
    url: 'https://api.heclouds.com/devices/1105985351/datapoints',
    header:{
      'content-type': 'application/json',
      'api-key':'AdbrV5kCRsKsRCfjboYOCVcF9FY='
    },
    method: 'POST',
    data: JSON.stringify(data),   //data数据转换成JSON格式
    success(res){console.log("成功",res.data)},
    fail(res){console.log("失败",res)}
  })
 },
/***************************************************************************/  
 onLoad(){             //相当于主函数
   var that =this
  //  setInterval(function(){
  //   that.getinfo()   //获取一次数据
  //  },5000)    //3s执行一次

  // setInterval(function(){
  //   that.kai()   //获取一次数据
  //  },3000)    //3s执行一次
 }
 })
相关推荐
2501_915106321 小时前
HTTP和HTTPS协议工作原理及安全性全面解析
android·ios·小程序·https·uni-app·iphone·webview
禾高网络2 小时前
长护险智慧服务平台:科技赋能长期照护保障体系
大数据·人工智能·科技·小程序
笨笨狗吞噬者3 小时前
小程序包体积分析利器 -- vite-plugin-component-insight
前端·微信小程序·uni-app
杰建云1675 小时前
小程序转化率低的核心原因是什么?
小程序·小程序制作
中国胖子风清扬6 小时前
基于GPUI框架构建现代化待办事项应用:从架构设计到业务落地
java·spring boot·macos·小程序·rust·uni-app·web app
Greg_Zhong6 小时前
微信小程序中使用canvas中绘制的页面,切换字体的几种实践方式
微信小程序·腾讯云cos·canvas页面切换字体
weikecms7 小时前
外卖CPS小程序哪家系统比较完善
小程序
绝世唐门三哥1 天前
uniapp系列-uniappp都有哪些生命周期?
vue.js·小程序·uniapp
人还是要有梦想的1 天前
如何开发小程序介绍
小程序·notepad++
roamingcode1 天前
支付宝小程序数据可视化避坑指南:@antv/f2 踩坑与最佳实践
信息可视化·小程序·canvas·antv