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

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执行一次
 }
 })
相关推荐
毕设源码-钟学长1 小时前
【开题答辩全过程】以 基于微信小程序的美发服务系统的设计与实现为例,包含答辩的问题和答案
微信小程序·小程序
canglingyue2 小时前
微信小程序罗盘功能开发指南
微信小程序·小程序
三脚猫的喵4 小时前
微信小程序中实现AI对话、生成3D图像并使用xr-frame演示
前端·javascript·ai作画·微信小程序
2501_915106326 小时前
App Store 软件上架全流程详解,iOS 应用发布步骤、uni-app 打包上传与审核要点完整指南
android·ios·小程序·https·uni-app·iphone·webview
海绵宝宝不喜欢侬6 小时前
UniApp微信小程序-实现蓝牙功能
微信小程序·uni-app
开发加微信:hedian1168 小时前
微信推客小程序系统开发技术实践
微信·小程序
Python大数据分析8 小时前
uniapp微信小程序商品列表数据分页+本地缓存+下拉刷新+图片懒加载
缓存·微信小程序·uni-app
小白_ysf8 小时前
uniapp和vue3项目中引入echarts 、lime-echart(微信小程序、H5等)
微信小程序·uni-app·echarts·h5·lime-echart
imHere·8 小时前
UniApp 分包异步化配置及组件引用解决方案
微信小程序·uni-app·分包
说私域11 小时前
开源AI智能名片链动2+1模式S2B2C商城小程序在淘宝公域流量运营中的应用研究
人工智能·小程序·开源