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

这篇具有很好参考价值的文章主要介绍了#微信小程序(按键控制)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

1.IDE:微信开发者工具


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


3.记录

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

(2)关键代码

//按键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)函数绑定

 <button class="ctrl" bindtap="kai">按键1</button>

4.代码

index.js文章来源地址https://www.toymoban.com/news/detail-838100.html

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执行一次
 }
 })

到了这里,关于#微信小程序(按键控制)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序 蓝牙设备连接,控制开关灯

    微信小程序中连接蓝牙设备,信息写入流程 1 、检测当前使用设备(如自己的手机)是否支持蓝牙/蓝牙开启状态 wx:openBluetoothAdapter({}) 2 、如蓝牙已开启状态,检查蓝牙适配器的状态 wx.getBluetoothAdapterState({}) 3 、添加监听蓝牙适配器状态变化 wx.onBluetoothAdapterStateChange({}) 4 、搜

    2024年02月12日
    浏览(52)
  • 微信小程序 主包与分包的控制小程序大小

    为了让用户有更好的体验,小程序于是限制包的大小为2M,在开发中,我们经常会出现内容过大的问题,于是要进行包的大小控制,分包就是一个很好的方式,小程序分包 的好处,分包及将代码进新分块,有点微服务的概念, 为了让用户有更好的体验,小程序于是限制包的大

    2024年02月16日
    浏览(42)
  • 微信小程序通过点击按钮控制元素隐藏与显示

    一、效果图: 二、代码 js: wxml: 一、效果图: js: wxml:

    2024年02月12日
    浏览(52)
  • stm32智能家居+微信小程序接收控制

    本项目芯片使用STM32F103ZET6,微信小程序开发使用微信开发者工具。 stm32作为下位机,功能是每过一段时间上传温湿度以及光照度给mqtt服务器,然后微信小程序从mqtt服务器订阅对应的主题来接收下位机发过来的数据并进行处理,并在微信小程序中设置LED开关,以及蜂鸣器开关。

    2024年01月21日
    浏览(103)
  • 如何用微信小程序实现远程控制墙壁插座

    如何用微信小程序实现远程控制墙壁插座呢? 本文描述了使用微信小程序调用HTTP接口,实现控制墙壁插座,替换原有插座,安装智能插座后,即可实现远程控制。 可选用产品:可根据实际场景需求,选择对应的规格 序号 设备名称 厂商 1 智能WiFi墙壁插座10A 统软云物联 2 智

    2024年04月25日
    浏览(38)
  • 微信小程序 通过响应式数据控制元素class属性

    我想大家照这个和我最初的目的一样 希望有和vue中v-bind:class一样方便的指令 但答案不太尽人意 这里 我们只能采用 三元运算符的形式 参考代码如下 这里 我们判断 如果当前item中的userId如果和我们响应式数据中的userId相同 则给与isThisUser 否则 赋值为空字符串 也能实现效果

    2024年02月10日
    浏览(53)
  • 微信小程序动态控制tabbar的数量,uniApp动态控制tabbar的数量

    需求分析 :         小程序登录进来有2种身份,每种身份看到的页面不一样,而且tabbar的数量也不一样,这个时候就需要用到微信小程序的自定义tabbar, 自定义tabbar和原生tabbar在用户体验上差不多,几乎看不出有什么区别,废话不多说直接上代码 创建一个文件夹 custom-ta

    2024年02月13日
    浏览(45)
  • 如何用微信小程序实现远程控制无人售货柜

    如何用微信小程序实现远程控制无人售货柜呢? 本文描述了使用微信小程序调用HTTP接口,实现控制无人售货柜,独立控制售货柜、格子柜的柜门。 可选用产品:可根据实际场景需求,选择对应的规格 序号 设备名称 厂商 1 智能WiFi控制器8路[直流电压版] 统软云物联 2 智能W

    2024年04月27日
    浏览(33)
  • 微信小程序通过蓝牙连接ESP32控制LED灯

    本文主要基于网上已有的代码以及官方给定示例代码进行修改。如有不妥请指出,谢谢啦。 据我了解,微信小程序只能通过低功耗蓝牙(BLE)进行控制。 BLE蓝牙部分设置流程(通过该程序就能让esp32广播蓝牙,同时手机也可搜索到蓝牙设备): // 获取蓝牙接收的数据与处理

    2024年02月04日
    浏览(77)
  • 微信小程序如何循环控制一行显示几个wx:for

    正如上图所显示的一样,我们改如何控制一行显示几个图形呢? 首先第一种方法,数量少的可以自己一行一行的写,但是当数据很多的时候呢? 这时候就需要我们区使用循环进行代码的编写。废话不多数,直接写代码。 .demo-item{ width: 40%; } .demo-item .screen-data{ padding: 10rpx; te

    2024年02月09日
    浏览(52)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包