[网络协议]微信小程序基于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 low1
  light(e){
      var iip=wx.getStorageSync('ip')//这里是手动输入绑定ip  获取缓存  也可以在这里写死
      console.log("iip"+iip)
      var that=this
      var status=e.detail.value
       if(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接受微信小程序传输过来的数据

阅读世界，共赴山海

423全民读书节，邀你共读