8266模块和微信小程序进行UDP通信

这篇具有很好参考价值的文章主要介绍了8266模块和微信小程序进行UDP通信。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

微信小程序接入vant

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

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

8266模块和微信小程序进行UDP通信
部分属性又是有效的
8266模块和微信小程序进行UDP通信

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

8266模块和微信小程序进行UDP通信

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

8266模块和微信小程序进行UDP通信
8266模块和微信小程序进行UDP通信

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

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

8266模块和微信小程序进行UDP通信
硬件开发用的Arduino,如果没有esp8266的开发板环境可以在这里下载一键安装,用keil的大佬请绕过
8266模块和微信小程序进行UDP通信

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

8266模块和微信小程序进行UDP通信

提一句:别把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"//这里可以搞个变量来接用户输入,随便造
          });

贴个小程序运行图

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

到了这里,关于8266模块和微信小程序进行UDP通信的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于微信小程序使用UDP实现局域网通讯及UDP模块的封装

    距离我上一次发物联网类前端的教程好久了 前段时间刚刚实现了以下小程序使用UDP进行了局域网的控制 做的时候发现网上对应的教程比较少或者有的看着有点头晕 特此不要脸的发一篇教程,写得不好多多包涵。咱话不多说,直接开写!!! 首先,老规矩,先上图: 上图为

    2024年02月01日
    浏览(27)
  • 微信小程序和ros2进行通信

      ROS2做为一款优秀的机器人操作系统软件,其搭载了丰富的机器人平台,是目前机器人领域应用最多的软件。微信做为一个大型社交软件,应用非常广泛,其中的小程序直接通过扫二维码进行加载,使用起来非常方便快捷。为了让手机端能够对机器人进行操作,于是通过微

    2024年02月10日
    浏览(41)
  • vue网页实现与微信小程序进行数据通信

    我们是利用的微信小程序web-view引入的vue网页链接,所以我们先查看一下web-view的默认属性和方法 属性 类型 默认值 必填 说明 最低版本 src string 否 webview 指向网页的链接。可打开关联的公众号的文章,其它网页需登录小程序管理后台配置业务域名。 1.6.4 bindmessage eventhandler 否

    2024年02月16日
    浏览(28)
  • 微信小程序和微信H5有什么区别?

    前言:进入公司会发现会从最常见的PC端开发,慢慢将重心转移到H5开发,再到小程序开发,后面随着公司业务的发展还需要开发APP,也就是Android。也有可能顺序不一样,作为一个合格的后端甚至全栈,这些还是要会的。 在开发微信小程序功能的时候,发现微信小程序和微信

    2024年02月11日
    浏览(30)
  • uniapp和微信小程序去掉顶部标题

    今天刚开始做一个uniapp的项目,新建的项目带有默认顶部标题,要去掉。 找到配置文件pages.json,小程序在app.json 添加代码 完成。 最后这个项目会一直更新所遇到的问题,可能会比较慢,希望自己能够坚持完成。

    2024年02月13日
    浏览(28)
  • 【uniapp】多端(H5和微信小程序)

    目录 一、运行H5页面 二、去除H5顶部导航栏 三、区分H5页面和微信小程序的样式 四、H5页面下载视频、PDF 五、H5页面适配  打开网页后复制网页地址 然后打开微信开发者工具,点击公众号网页版,输入地址即可看到H5页面 无论是页面还是js还是css,都是一样的使用,样式如下

    2024年02月10日
    浏览(43)
  • Uniapp和微信小程序的区别2023(详细)

    UniApp和微信小程序有一些区别,尽管它们都是用于开发小程序的框架,但在一些方面有所不同。以下是它们的区别: 开发语言和技术栈: UniApp:使用Vue.js作为开发语言,结合UniApp提供的组件和API进行开发。支持Vue的响应式数据绑定、组件化开发,同时支持使用HTML、CSS和Jav

    2024年02月13日
    浏览(30)
  • 搭建flask后端和微信小程序前端

    目录 一、准备工作 (1)我的前端代码 (2)我的后端代码 (3)后端运行成功的截图 (4)前端运行成功的截图  (5)整体运行成功的截图 二、部署后端  (1)在腾讯云的学生入口处购买服务器(建议选择ubuntu系统),设置管理秘钥,方便在本地远程连接。 (2)在本地的

    2024年02月04日
    浏览(39)
  • H5和微信小程序实现文件预览功能

    提示:本文仅供参考: 最近新增了一个需求,要求在H5和微信小程序生成方案并查看ppt和excel功能。本项目是taro框架打包生成的H5和小程序,代码仅供参考。 代码如下(示例): 代码修改如下(示例): 代码如下(示例): 1:先把本地的微信开发者工具,不校验HTTPS关掉再

    2024年02月17日
    浏览(49)
  • 微信小程序错误码:“errcode“:40163和微信小程序-pad block corrupted 问题

    场景:服务端调用 auth.code2Session 接口 请求连接:https://api.weixin.qq.com/sns/jscode2session?appid=secret=js_code=grant_type=authorization_code 服务端报错,报错信息:\\\"pad block corrupted \\\",打印返回值为: {“errcode”:40163,“errmsg”:“code been used, hints: [ req_id: 0IbF07aLRa-KW5Oua ]”} 40163 :临时登录凭证重

    2024年02月09日
    浏览(245)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包