文章目录

• 前言
• 1.理论基础
• 2.远程控制led
• • 2.1 实验材料
• 2.2 实验步骤
• 3.配置微信小程序
• • 3.1理论基础
  • 3.2 实验步骤
  • • 3.2.1 找到对应的api文档
    • 3.2.2 撸微信小程序代码
    • 3.2.3 代码
    • 3.2.4 真机调试
    • 坑点

前言

我先向大家推荐一个学习的博主吧!!
这就是博哥-------我入门esp8266的领头人
很感谢他!!!

1.理论基础

• esp8266mqtt库
• 微信小程序初步了解
• 对onenet平台有一定了解

2.远程控制led

2.1 实验材料

• node MCU
• 微信小程序开发者工具
• onenet平台

2.2 实验步骤

这是由onenet平台控制的步骤具体请看博哥的
玩转OneNET物联网平台之MQTT服务② —— 远程控制LED

如果以上步骤你已经完成,并测试好了.再看接下来的步骤

3.配置微信小程序

3.1理论基础

• onenet平台对mqtt的API的调用
• 注册号微信小程序

3.2 实验步骤

3.2.1 找到对应的api文档

api文档

发送命令看你的硬件是怎么设置的!!

3.2.2 撸微信小程序代码

小程序代码并不难,基本上如果不谈页面只谈控制,基本上了解一部分就够了!

这两部分会了,基本上任务就完成一大半了.

3.2.3 代码

demo.js

const app = getApp()
const apikey = 'TBDFy67p2H0GWIYnk4OjEjFk3gQ='
const deviceid = '646275345'


var temp=1;
var deviceConnected = false

const deviceInfoURL = "https://api.heclouds.com/devices/" + deviceid
const getDataStreamURL = "https://api.heclouds.com/devices/" + deviceid + "/datastreams"
const sendCommandURL = "https://api.heclouds.com/cmds"

var led = 0

function getDeviceInfo(that) { 
  //查看设备连接状态，并刷新按钮状态
  wx.request({ 
    url: deviceInfoURL,
    header: { 
      'content-type': 'application/json',
      "api-key": apikey,
      "topic":"esp8266led"
    },
    data: { 

    },
    success(res) { 
      // console.log(res)
      if (res.data.data.online) { 
        console.log("设备已经连接")
       // deviceInit(that)//初始化按钮
        deviceConnected = true
      } else { 
        console.log("设备还未连接")
        deviceConnected = false
      }
    },
    fail(res) { 
      console.log("请求失败")
      deviceConnected = false
    },
    complete() { 
      if (deviceConnected) { 
        that.setData({  deviceConnected: true })
      } else { 
        that.setData({  deviceConnected: false })
      }
    }
  })
}

function deviceInit(that) { 
  console.log("开始初始化按钮")
  //初始化各个硬件的状态
  wx.request({ 
    url: getDataStreamURL,
    header: { 
      'content-type': 'application/json',
      "api-key": apikey,
    },
    data: { 
      
    },
    success(res) { 
      for(var i=0; i<res.data.data.length; i++) { 
        var info = res.data.data[i]
        
        if(info.current_value == 1) { 
          that.setData({  led_checked : true})
        } else { 
          that.setData({  led_checked : false})
        }
      }
    }
  })
}

function controlLED(hardware_id ,switch_value) { 
  // console.log("发送命令：" + hardware_id + ":{" + switch_value + "}")
  console.log("发送命令：" + hardware_id + ":" +switch_value )
  //按钮发送命令控制硬件
  wx.request({ 
    url: sendCommandURL + "?device_id=" + deviceid,
    method: 'POST',
    header: { 
      'content-type': 'application/json',
      "api-key": apikey
    },
    // data: hardware_id + ":{" + switch_value + "}", //TODO 设计自定义语言 blueled:{V}, 预感这边可能会有问题
    data: switch_value ,
    success(res) { 
      console.log("控制成功")
      console.log(res)
     console.log(res.data);
    }
  })
}




Page({ 
  
  onLoad: function () { 
    //加载时完成1.检查设备是否连接2.连接成功将数据显示在界面
    var that = this //将当前对象赋值
    getDeviceInfo(that)
    temp=1
  },
  onShow: function() { 
    //TODO依旧有问题
    var that = this
    
    var timer = setInterval(function(){ 
      getDeviceInfo(that)
    }, 3000)
  },
  change: function (event) { 
    var cmdData = event.detail.value == true ? 1 : 0 //修改为约定的数据
    if(cmdData==1)
    { 
      led=1;
      controlLED("led",1);
      
    }
    else  
    { 
      led=0;
      controlLED("led",0);
    }
  }
})

3.2.4 真机调试

步骤

• 确认esp8266和onenet平台连接上了
• 真机调试(这里有个坑)
• 实现控制

写完代码后点击这个

会弹出一个二维码来,手机去扫那个二维码,在手机端进行调试

页面简单

接下来你就可以玩微信小程序去控制灯了

坑点

1. 因为微信小程序的安全机制,导致你的api必须在他的白名单,不然你虽然能在开发者工具里能调用但是到了真机就不行
   需要添加域名在白名单里
   

基本上以上你都能做到,那么恭喜你可以通过微信小程序控制esp8266了

大家好我是大一小菜鸡,又菜瘾还大