记录一下微信小程序接入esp8266过程中的一些问题

太久没写了，你知道时间是遗忘一个人最好的东西，请记得我一直在

微信小程序接入vant

会不会有人问为什么引入vant?不会，好那不讲了，直接讲引入要注意的事项
微信小程序引入vant步骤，里面需要注意的地方，根目录在项目中这个位置,另外也可以右击子项目选择在外部终端中打开，要是找到到项目路径也可以直接到项目目录下去初始化npm
遇到的问题

想用layout组件做个布局，这里van-row的对齐属性均没有生效，重新引入vant也没用

部分属性又是有效的

进默认样式里面看了一下，基于float实现的

破案了，vant开发文档请看vant2.0版本，3.0的属性人2.0都没你给了也白给

其实上面的坑也不是啥坑，就是边做的时候边记录当时遇到的问题，这样挺好，防止以后有人犯同样的低级错误。之前我用uniapp开发过移动端接入ble蓝牙做过温湿度检测，但是蓝牙传输距离是真的短啊，而且uniapp官方的wifi接入文档也有点扎心，所以我个人比较推荐微信小程序来做wifi接入，接下来进入正题：

这是我所用到的模块，这个底座我之前也用来烧录esp32-cam模块，感觉没啥毛病，个人比较推荐这个，插上就能用，也不用自己接线，挺省事儿，模块也没啥好说的

硬件开发用的Arduino，如果没有esp8266的开发板环境可以在这里下载一键安装，用keil的大佬请绕过

烧录成功后，按一下置位按钮，拿到本地UDP服务监听的ip和端口

提一句：别把wifi模块和底座接反了，会短路，长时间高温可能烧坏模块
贴个代码

//程序如下：

//#include <ESP8266mDNS.h>
#include <ESP8266WiFi.h>
#include <WiFiUdp.h>
#define ssid      "xiaomi"       //WIFI名字最好别包含特殊符号 不然连接不上
#define password  "12345678"     //WIFI密码
WiFiUDP UDPInstance;//实例化WiFiUDP
unsigned int localUDPPort = 1234;  //本地监听端口
unsigned int remoteUDPPort = 4321;  //远程监听端口
char incomingPacket[255];  // 保存Udp工具发过来的消息

void setup()
{
  Serial.begin(9600);//打开串口，设置波特率
  Serial.println();
  Serial.printf("正在连接 %s ", ssid);
  WiFi.begin(ssid, password);//连接到wifi
  while (WiFi.status() != WL_CONNECTED)//等待连接
  {
    delay(600);
    Serial.print(".");
  }
   Serial.println("连接成功");
// if(WiFi.status() == WL_CONNECTED) //wifi连接成功后
//  {
//    if (MDNS.begin("esp8266")) {  //启动mdns功能
//      Serial.println("MDNS started");
//    }
//  }

  if (UDPInstance.begin(localUDPPort)) { //启动Udp监听服务
    Serial.println("监听成功");
    //wifi模块的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!=0)
   Serial.println(packetSize);//发送开1号灯
  if (packetSize) //解析包不为空
  {
    // 读取Udp数据包并存放在incomingPacket
    int len = Udp.read(incomingPacket, 255);//返回数据包字节数
    
    if (len > 0)
    {
      incomingPacket[len] = 0;//清空缓存
      //strcmp函数是string compare(字符串比较)的缩写，用于比较两个字符串并根据比较结果返回整数。
      //基本形式为strcmp(str1,str2)，若str1=str2，则返回零；若str1<str2，则返回负数；若str1>str2，则返回正数。
      if (strcmp(incomingPacket, "ON_NUM1") == 0) // 命令ON_NUM1
      {
       Serial.printf("收到的报文: %s\n", incomingPacket);
      //digitalWrite(针脚, 电平标识);//控制实际的设备
        sendCallBack("一号灯已打开");
      }
      else{
         Serial.printf("收到的报文: %s\n", incomingPacket);
          sendCallBack("未知命令");
        }
    }
  }
}

//向udp工具发送消息
void sendCallBack(const char *buffer)
{
  Udp.beginPacket(Udp.remoteIP(), remoteUdpPort);//配置远端ip地址和端口
  Udp.write(buffer); //把数据写入发送缓冲区
  Udp.endPacket(); //发送数据
}

接下来谈谈微信接入

UDP通信文档可以去看看

1. this.data.udpScoket = wx.createUDPSocket() =>先创建一个实例，我把数据绑定到data中的udpScoket属性上了，因为我需要在页面卸载时关闭这个连接，这里我没用setData({}),感兴趣可以试试
2. this.data.udpScoket.bind()=>绑定端口，参数为number类型，不传生成随机的，我是写死的，因为wifi模块连接wifi后被分配的地址是不确定的，UDP服务启动的端口写死的（后面会接入mDNS解决这个问题）
3. 发数据

   this.data.udpScoket.send({
   address: ‘这个地址写当前局域网里wifi模块被分配的地址，通常是由路由器分配的，你接手机热点也行，但是 要保证调用wifi模块的手机同时接入这个热点，不然网段不同无法通信’,
   port: 这个端口是number类型，可以在路由器管理界面查看，我是通过Arduino调试串口打印的，方便一些,
   message: ‘这里是要发送的数据’
   })

4. 然后是一些监听函数

 this.data.udpScoket.onListening(function (res) {
        console.log('监听中.....');
        console.log(res);
    })

    this.data.udpScoket.onError(function(err) {
        console.log(err);
      
    })
    this.data.udpScoket.onMessage(function(res) {
        console.log(res);
    
       let mess=that.arrayBufferToString(res.message);
       console.log(mess)
    })

贴块代码

//这里没啥好讲的，也就这块核心一点，页面卸载的时候记得调用一下 this.data.udpScoket.close();
this.data.udpScoket.send({
             address: "192.168.43.3",//这个是从wifi模块输出拿到的，强烈推荐接入mDNS不然是真废手
             port: 1234,//端口也是写死的
             message:"ON_NUM1"//这里可以搞个变量来接用户输入，随便造
          });

贴个小程序运行图

这里要注意，小程序真机调试使用自动真机测试时，bind方法会返回undfined,send方法会返回一个错误，onError可以捕获，建议用二维码真机调试，这样不会报错，然后就是注意一下开发环境基础库的版本。差不多就这些了，还有不明白的可以看看这些个大佬的博客，wifi芯片_ESP8266(wifi芯片)与微信小程序，微信小程序基于udp协议与esp8266进行通信，ESP8266 MDNS
持续更新中…