微信小程序UDP通信

前言

这是为了实现微信小程序通过UDP协议与ESP32或者任何下位机通信做的demo实验，本人也是第一次学习微信小程序，代码也是网上找来拼凑的，我发现网上关于微信小程序UDP通信的完整例程几乎没有，因此来纪录一下，算是一个小总结。废话不多说，直接上代码，这些代码都是我测试成功过的，如果对你有帮助或启发请点一个赞吧！

微信小程序效果图

说明：首先要打开这个开关进行UDP连接，连接成功会弹出那个灰色的提示框，然后点UDP发送即可发送数据到手机端。这里的IP地址简单起见是写死的。具体流程是在js中写死手机的ip地址还有端口号（因为是在家里，所以手机和电脑都是连的同一个路由器，即局域网通信，网关就是路由器，查看手机里的wifi连接信息就可以知道你手机的ip），手机上下载一个网络调试助手，这里我使用的是 卓岚物联 （因为我百度的时候第一个弹出来的就是这个广告，然后下载了感觉还不错，没有广告），然后手机设置一下ip（电脑端的）和端口号就可以正常通信了。

wxml代码

<view class="container">
  <button type="primary" class="button" bindtap="send">UDP发送 </button>
  <view class='container_switch'>
    <switch type='switch' bindchange='type_switch'></switch>
  </view>
  <text>{{udpResData}}</text>
</view>

js代码

Page({
  data: {
    udpResData: '',
    type_switch: '',
  },
  type_switch(e) {
    var sw = e.detail.value
    this.setData({
      type_switch: sw
    })
    if (sw) {
      // 新建udp实例
      this.udp = wx.createUDPSocket()
      // udp绑定本机
      this.udp.bind(2233)
      //打开开关后就开始进行消息的接收
      this.udp.onMessage(this.onUdpMessage)
      //一个灰色的信息弹窗 
      wx.showToast({
        title: '连接成功',
        icon: 'none',
        duration: 2000 //持续的时间
      })
    } else {
      //关闭UDP连接
      this.udp.close()
      wx.showToast({
        title: '关闭连接',
        icon: 'none',
        duration: 2000 //持续的时间
      })
    }
  },
  // 页面加载完成事件由系统调用,一个页面只会调用一次
  onLoad: function () {
  },
  // 点击处理事件,send是wxml中的按鈕事件的名稱
  send: function (e) {
    //获取键值
    var sw = this.data.type_switch
    //判断是否连接了UDP
    if (!sw) //如果没有连接就弹出消息对话框
    {
      wx.showToast({
        title: '没有连接UDP！',
        icon: 'none',
        duration: 2000 //持续的时间
      })
    } else {
      // 向指定的 IP 和 port 发送消息
      this.udp.send({
        address: '192.168.31.115', //192.168.31.169，第一个是手机的IP，第二个是电脑端的ip
        port: '2233',
        message: '你好'
      })
      
    }
  },
  //将监听到的消息转换为字符串，必须要转换才能正常显示，因为监听到的消息都是些二进制的数组
  newAb2Str:function (arrayBuffer) {
    let unit8Arr = new Uint8Array(arrayBuffer);
    let encodedString = String.fromCharCode.apply(null, unit8Arr),
      decodedString = decodeURIComponent(escape((encodedString)));//没有这一步中文会乱码
    return decodedString;
  },
  // UDP 接收到数据的事件处理函数，参数res={message,remoteInfo}
  onUdpMessage: function(res) {
    let receive_message=this.newAb2Str(res.message)
    this.setData({
      udpResData:receive_message
    })
  },
})

消息的监听是打开开关就开始监听了。

总结

大概就是这个样子，看不懂的话推荐去搜 微信小程序javascript 入门，微信小程序的官方社区有人讲，我觉得写得挺好的，很容易入门，我也才学习小程序两天，所以难免会有错误，如果有错的话请提醒！