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

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_933907212 小时前
宁波小程序开发服务与技术团队专业支持
科技·微信小程序·小程序
sheji341611 小时前
【开题答辩全过程】以 基于微信小程序的少儿编程学习平台为例,包含答辩的问题和答案
学习·微信小程序·小程序
const_qiu13 小时前
微信小程序自动化测试100%通过率实践
微信小程序·小程序
Greg_Zhong16 小时前
小程序中登出/切换/重置页面状态的使用
小程序
一字白首17 小时前
微信小程序进阶实战:从 UI 组件库到全局状态管理全解DAY05
ui·微信小程序·小程序
海石1 天前
微信小程序开发02:原始人也能看懂的着色器与视频处理
前端·微信小程序·视频编码
li9056632801 天前
hanzi-writer-miniprogram Path2D问题以及Bug修复
微信小程序·bug
土土哥V_araolin1 天前
双迪大健康新零售系统开发要点
小程序·个人开发·零售
2501_915909062 天前
不用越狱就看不到 iOS App 内部文件?使用 Keymob 查看和导出应用数据目录
android·ios·小程序·https·uni-app·iphone·webview
CHU7290352 天前
扭蛋机盲盒小程序前端功能设计及核心玩法介绍
前端·小程序