微信小程序基于udp协议与esp8266进行通信

1、概述
微信小程序有关于UDP协议的API，具体内容可前往官网查看；整体实现的思路就是利用路由组一个局域网，手机、路由器和esp8266，手机和esp8266连接路由器，登录路由器查看esp8266的ip，微信小程序利用udp协议可以往esp8266发送数据，进而实现微信小程序与esp8266通信，也就实现了与单片机通信。
2、硬件准备
路由器、手机、esp8266
3、实现思路
（1）组局域网
路由器、手机和esp8266组局域网；手机和esp8266连接路由器
（2）查看ip
登录路由的后台查看esp8266的ip，微信小程序udp协议用ip（这里仅仅查看esp8266即可）
4、微信小程序发送命令到esp8266
下面以控制灯光为例
wxml


<view class="scan"><view class="time-section"><view class="time"><view class="hourminuts"><text>{{hours}}:{{minutes}}</text></view><view class="seconds"><text>{{seconds}}</text></view></view><view class="date"><text>{{month}}月{{day}}日  {{week}}</text></view></view>
</view><view class="section"><view class="section-title">灯1</view><view class="section-form"><view class="form-group"><label>灯1的控制</label><switch   color="#007aff" checked bindchange="light"  ></switch></view></view>
</view>
<view class="section"><view class="section-title">灯2</view><view class="section-form"><view class="form-group"><label>灯2的控制</label><switch   color="#007aff" checked bindchange="wind"  ></switch></view></view>
</view>
<view class="section"><view class="section-title">灯3</view><view class="section-form"><view class="form-group"><label>灯3的控制</label><switch   color="#007aff" checked bindchange="buzzer"  ></switch></view></view>
</view>

wxss

/* pages/scan/scan.wxss */page {background-color: #fafafa;}.name {margin-top: 20rpx; margin-bottom: 40rpx;line-height: 32px;font-size: 17.25pt;color: #000000;}.time-section {margin-top: 110rpx;}.time {display: flex;flex-direction: row;justify-content: center;}.hourminuts {line-height: 154rpx;font-size: 41.25pt;color: rgba(0, 0, 0, 0.87);}.seconds {line-height: 72rpx;font-size: 18.75pt;color: #f5a623;margin: auto 0rpx 20rpx 0rpx;}.date {margin-top: 12rpx;text-align: center;font-weight: 500;line-height: 22px;font-size: 12pt;color: rgba(0, 0, 0, 0.54);margin-bottom: 60rpx; }.footer {/*display: flex;flex-direction: column;justify-content: center;*//*align-items: center;*/margin: 0 auto;width: 80%;}.to-clock {background-color: #22a1e0;color: #ffffff;margin-bottom: 40rpx; }.hover-to-clock {opacity: 0.7;}.to-list {color: rgba(0, 0, 0, 0.54);margin-bottom: 40rpx;}.hover-to-list {opacity: 0.7;}.main-body {display: flex;flex-direction: column;width: 100%;height: 100%;}.section {width: 100%;padding: 20rpx;}.section-title {font-size: 35rpx;width: 300rpx;height: 80rpx;line-height: 80rpx;padding-left: 20rpx;border-bottom: 4rpx solid #000;}.section-form {display: flex;flex-direction: column;padding: 10rpx 20rpx;}.form-group {display: flex;flex-direction: row;width: 100%;height: 80rpx;line-height: 80rpx;font-size: 32rpx;}.form-group label {width: 75%;  }.form-group input,.form-group switch {height: 80rpx;  width: 60rpx;line-height: 80rpx;text-align: center;}.form-group input {border-bottom: 2rpx solid #000;height: 60rpx;line-height: 60rpx;}

js
以灯1为列，核心代码

  //灯  26  high1 low1light(e){var iip=wx.getStorageSync('ip')//这里是手动输入绑定ip  获取缓存  也可以在这里写死console.log("iip"+iip)var that=thisvar status=e.detail.valueif(status==true){console.log("开灯")var mess="on"var ip1 = iip;var port = "";const udp = wx.createUDPSocket();udp.bind();udp.send({address: ip1,port: port,message: mess});}else{console.log("关灯")var mess="off"var ip2 = iip;var port = "";const udp = wx.createUDPSocket();udp.bind();udp.send({address: ip2,port: port,message: mess});}},

5、esp8266与微信小程序互动

在本项目中采用esp8266-01s WiFi模块作为局域网内的数据传输。进入太极创客网站上找到相应的udp程序，在某宝上花几块钱就可以购买到这个下载器，多花点的话，有配套的esp8266-01s。在购买esp8266时要注意是esp8266-01s还是esp8266-01，采用Arduino IDE对其进行下载，需要找到对应的器件库，否则是下载不了的。

程序如下：
#include <ESP8266WiFi.h>
#include <WiFiUdp.h>
#define ssid      "ChinaNet-igM7"       //这里改成你的设备当前环境下WIFI名字
#define password  "ph9awgjd"     //这里改成你的设备当前环境下WIFI密码
WiFiUDP Udp;//实例化WiFiUDP对象
unsigned int localUdpPort = 1234;  // 自定义本地监听端口
unsigned int remoteUdpPort = 4321;  // 自定义远程监听端口
char incomingPacket[255];  // 保存Udp工具发过来的消息void setup()
{pinMode(LED_BUILTIN,OUTPUT);digitalWrite(LED_BUILTIN, HIGH); // 熄灭LED Serial.begin(9600);//打开串口Serial.println();Serial.printf("正在连接 %s ", ssid);WiFi.begin(ssid, password);//连接到wifiwhile (WiFi.status() != WL_CONNECTED)//等待连接{delay(500);Serial.print(".");}Serial.println("连接成功");if(Udp.begin(localUdpPort)){//启动Udp监听服务Serial.println("监听成功");//打印本地的ip地址，在UDP工具中会使用到//WiFi.localIP().toString().c_str()用于将获取的本地IP地址转化为字符串    Serial.printf("现在收听IP：%s, UDP端口：%d\n", WiFi.localIP().toString().c_str(), localUdpPort);}else{Serial.println("监听失败");}
}
void loop()
{
delay(10);//解析Udp数据包int packetSize = Udp.parsePacket();//获得解析包if (packetSize)//解析包不为空{//收到Udp数据包//Udp.remoteIP().toString().c_str()用于将获取的远端IP地址转化为字符串
//    Serial.printf("收到来自远程IP：%s（远程端口：%d）的数据包字节数：%d\n", Udp.remoteIP().toString().c_str(), Udp.remotePort(), packetSize);// 读取Udp数据包并存放在incomingPacketint len = Udp.read(incomingPacket, 255);//返回数据包字节数if (len > 0){ incomingPacket[len] = 0;//清空缓存
//      Serial.printf("UDP数据包内容为: %s\n", incomingPacket);//向串口打印信息//strcmp函数是string compare(字符串比较)的缩写，用于比较两个字符串并根据比较结果返回整数。//基本形式为strcmp(str1,str2)，若str1=str2，则返回零；若str1<str2，则返回负数；若str1>str2，则返回正数。if (strcmp(incomingPacket, "LED_OFF1") == 0) // 命令LED_OFF1  {  Serial.println("X1X");//发送开1号灯sendCallBack("L1");}  else if (strcmp(incomingPacket, "LED_ON1") == 0) //如果收到LED_ON1  {  Serial.println("X2X");//发送开1号灯sendCallBack("L2");}
if (strcmp(incomingPacket, "LED_OFF2") == 0) // 命令LED_OFF2  {  Serial.println("X3X");//发送开1号灯sendCallBack("L3");}  else if (strcmp(incomingPacket, "LED_ON2") == 0) //如果收到LED_ON2  {  Serial.println("X4X");//发送开1号灯sendCallBack("L4");}
if (strcmp(incomingPacket, "LED_OFF3") == 0) // 命令LED_OFF 3 {  Serial.println("X5X");//发送开1号灯sendCallBack("L5");}else if (strcmp(incomingPacket, "LED_ON3") == 0) //如果收到LED_ON 3 {  Serial.println("X6X");//发送开1号灯sendCallBack("L6");}  }}
}//向udp工具发送消息
void sendCallBack(const char *buffer)
{  Udp.beginPacket(Udp.remoteIP(), remoteUdpPort);//配置远端ip地址和端口Udp.write(buffer); //把数据写入发送缓冲区Udp.endPacket(); //发送数据
}
当我们在小程序端连接连接到该模块的端口号和ip地址后。就可以对其进行操控，如下
if (strcmp(incomingPacket, "LED_OFF3") == 0) // 命令LED_OFF 3
{  Serial.println("X5X");//发送开1号灯sendCallBack("L5");
}

当在小程序连接后，单击按键就可以接收到“LED_OFF3”这个命令，即可利用esp8266-01s通过串口接收到“X5X”这个数据，并且会将“L5”发送到小程序端，进行判断。
只要利用带有标准串口的设备都可以接收到这个数据，就可以在局域网下控制其他设备了，可以在小程序端设置较多的按键，按下后，向esp端发送出来，在esp端进行判读就好了。
在此非常感谢太极创客的开源平台，
更多资料及源代码可以关注公众号：小白XBIT

微信小程序基于udp协议与esp8266进行通信相关推荐

微信小程序用udp协议与服务器通信（一）：连接服务器，将数据传输给服务器
在微信小程序中udp通信传送的message支持两种格式: ArrayBuffer和string,可按服务器要接受的格式传送 ArrayBuffer格式传送要使用ArrayBuffer格式传送,就需 ...
8266模块和微信小程序进行UDP通信
记录一下微信小程序接入esp8266过程中的一些问题太久没写了,你知道时间是遗忘一个人最好的东西,请记得我一直在微信小程序接入vant 会不会有人问为什么引入vant?不会,好那不讲了,直接讲引入 ...
微信小程序勾选协议与提交按钮联动
微信小程序勾选协议与提交按钮联动在一些小程序的开发中有时会实现,未勾选相关协议,提交按钮是禁用状态,勾选相关协议,提交按钮变成可用状态.如下图所示: 主要用到开发文档按钮组件的一个属性: 代码: w ...
微信小程序-基于canvas画画涂鸦
代码地址如下: http://www.demodashi.com/demo/14461.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序基于swiper组件的tab切换
代码地址如下: http://www.demodashi.com/demo/14010.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序基于scroll-view实现锚点定位
代码地址如下: http://www.demodashi.com/demo/14009.html 一.前期准备工作软件环境:微信开发者工具官方下载地址:https://mp.weixin.qq.c ...
微信小程序基于云数据库简单实现帖子点赞功能。
思路: 1·用云函数或者app.js获取用户openid,在每个帖子里面like_people数组里添加点赞过该帖子的用户openid.获取帖子云数据存放到suju:[]里. 2·点击点赞按钮图标变换 ...
微信小程序基于云数据库实现点赞功能
微信小程序基于云数据库实现点赞功能微信小程序基于云数据库实现点赞功能小Tips 2022.04.27 更新微信小程序基于云数据库实现点赞功能首先你要开通云开发,然后点击数据库创建集合(这里我的 ...
开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等
在上篇随笔<基于微信小程序的系统开发准备工作>介绍了开发微信小程序的一些前期的架构设计.技术路线 .工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及 ...

微信小程序基于udp协议与esp8266进行通信

微信小程序基于udp协议与esp8266进行通信相关推荐

最新文章

热门文章