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

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执行一次
 }
 })
相关推荐
weixin_lynhgworld7 小时前
从闲置到珍宝:旧物回收小程序系统重塑物品价值
小程序·旧物回收
2501_9160074711 小时前
iOS App 上架实战 从内测到应用商店发布的全周期流程解析
android·ios·小程序·https·uni-app·iphone·webview
小小怪下士_---_17 小时前
uniapp开发微信小程序自定义导航栏
前端·vue.js·微信小程序·小程序·uni-app
摸着石头过河的石头18 小时前
小程序调试全攻略:微信/支付宝避坑指南,小白也能一次通关
前端·微信小程序
黑客飓风1 天前
当GitHub宕机时,我们如何协作?
github·notepad++
fakaifa1 天前
点大餐饮独立版系统源码v1.0.3+uniapp前端+搭建教程
小程序·uni-app·php·源码下载·点大餐饮·扫码点单
Dignity_呱2 天前
如何在不发版时,实现小程序的 AB 测试?
前端·面试·微信小程序
说私域2 天前
基于开源 AI 大模型 AI 智能名片 S2B2C 商城小程序视角下的企业组织能力建设与破圈升级
人工智能·小程序
fakaifa2 天前
【最新版】CRMEB Pro版v3.4系统源码全开源+PC端+uniapp前端+搭建教程
人工智能·小程序·uni-app·php·crmeb·源码下载·crmebpro
2501_915918412 天前
iOS 应用上架全流程实践,从开发内测到正式发布的多工具组合方案
android·ios·小程序·https·uni-app·iphone·webview