Wechat applet communicates with esp8266 based on UDP protocol

1、 summary
Wechat applet is about UDP Agreed API, The specific contents can be viewed on the official website ; The idea of the overall implementation is to use the routing group to build a LAN , mobile phone 、 Routers and esp8266, Mobile phones and esp8266 Connect the router , Log in to the router to view esp8266 Of ip, Wechat applets use udp The agreement can go to esp8266 send data , Then realize wechat applet and esp8266 signal communication , It also realizes the communication with MCU .
2、 Hardware preparation
Router 、 mobile phone 、esp8266
3、 Realize the idea
（1） Group lan
Router 、 Mobile phones and esp8266 Group lan ; Mobile phones and esp8266 Connect the router
（2） see ip
Log in to the background view of routing esp8266 Of ip, Wechat applet udp For agreement ip（ Here's just a look at esp8266 that will do ）
4、 Wechat applet sends commands to esp8266
Let's take light control as an example
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}} month {
   {day}} Japan   {
   {week}}</text>
        </view>
    </view>
</view>


<view class="section">
    <view class="section-title"> The lamp 1</view>
      <view class="section-form">
        <view class="form-group">
          <label> The lamp 1 The control of </label>
          <switch   color="#007aff" checked bindchange="light"  ></switch>
        </view>
      </view>      
</view>
<view class="section">
    <view class="section-title"> The lamp 2</view>
      <view class="section-form">
        <view class="form-group">
          <label> The lamp 2 The control of </label>
          <switch   color="#007aff" checked bindchange="wind"  ></switch>
        </view>
      </view>      
</view>
<view class="section">
    <view class="section-title"> The lamp 3</view>
      <view class="section-form">
        <view class="form-group">
          <label> The lamp 3 The control of </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
With lamp 1 Column , Core code

  // The lamp   26  high1 low1
  light(e){
      var iip=wx.getStorageSync('ip')// Here is the manual input binding ip   Access to the cache    You can also write dead here 
      console.log("iip"+iip)
      var that=this
      var status=e.detail.value
       if(status==true){
            console.log(" turn on the light ")
            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(" Turn off the lights ")
            var mess="off"
            var ip2 = iip;
            var port = "";
            const udp = wx.createUDPSocket();
            udp.bind();
            udp.send({
               address: ip2,
               port: port,
               message: mess
            });
       }
  },

5、esp8266 Accept the data transmitted by wechat applet