uniapp,微信小程序中使用 MQTT的问题

使用 MQTT 在 uniapp 和微信小程序中进行通信，需要使用到一个 MQTT 的客户端库。下面将为大家提供一份详细的攻略，以帮助读者解决这个问题。在本攻略中，我们选择使用基于 Paho MQTT 的客户端库，该库支持在多种平台和语言中使用。

1. 准备工作

在使用 MQTT 客户端库之前，需要先在项目中安装该库。我们以 uniapp 项目为例，在项目根目录下运行以下命令进行安装：

npm install paho-mqtt --save

安装完成后，我们就可以在项目中使用该库了。

2. MQTT 客户端的基本使用

下面是一个基本的 MQTT 客户端的使用示例：

import Paho from 'paho-mqtt'

const client = new Paho.Client('localhost', 61614, 'clientId')
client.onConnectionLost = onConnectionLost
client.onMessageArrived = onMessageArrived

client.connect({ onSuccess: onConnect })

function onConnect() {
  console.log('Connected to MQTT')
  // 订阅主题
  client.subscribe('/test')
  // 发送消息
  const message = new Paho.Message('Hello World')
  message.destinationName = '/test'
  client.send(message)
}

function onConnectionLost(responseObject) {
  if (responseObject.errorCode !== 0) {
    console.log('Connection lost: ' + responseObject.errorMessage)
  }
}

function onMessageArrived(message) {
  console.log('Received message: ' + message.payloadString)
}

在上述示例中，我们首先导入 Paho MQTT 客户端库，并创建一个 MQTT 客户端实例。然后，我们设置连接断开和收到消息时的回调函数，然后调用客户端的 connect 方法连接到 MQTT 服务端。在连接成功后，我们可以开始订阅和发送消息。在示例中，我们订阅了主题 /test，并向该主题发送了一条消息。

3. 在 uniapp 中使用 MQTT 客户端实例

在 uniapp 中使用 MQTT 客户端实例，需要将其挂载在 App.vue 中。下面是一个示例代码：

import Paho from 'paho-mqtt'

export default {
  onLaunch: function () {
    const client = new Paho.Client('localhost', 61614, 'clientId')
    client.onConnectionLost = this.onConnectionLost
    client.onMessageArrived = this.onMessageArrived

    client.connect({ onSuccess: this.onConnect })
  },

  methods: {
    onConnect: function () {
      console.log('Connected to MQTT')
      this.client.subscribe('/test')
      const message = new Paho.Message('Hello World')
      message.destinationName = '/test'
      this.client.send(message)
    },

    onConnectionLost: function (responseObject) {
      if (responseObject.errorCode !== 0) {
        console.log('Connection lost: ' + responseObject.errorMessage)
      }
    },

    onMessageArrived: function (message) {
      console.log('Received message: ' + message.payloadString)
    }
  }
}

在上述示例中，我们在 onLaunch 生命周期中创建了一个 MQTT 客户端实例，并设置了连接断开和收到消息时的回调函数。然后，我们在 onConnect 方法中订阅主题并发送消息。需要注意的是，我们需要将 MQTT 客户端实例挂载在 App.vue 的 data 中，以便在组件中使用。

4. 在微信小程序中使用 MQTT 客户端实例

在微信小程序中使用 MQTT 客户端实例，需要使用到微信小程序提供的 MQTT 插件。首先，我们需要在小程序的 app.json 中声明插件：

{
  "plugins": {
    "mqtt": {
      "version": "1.0.2",
      "provider": "wx50804ff7d31a0405"
    }
  }
}

然后，在需要使用 MQTT 的页面中，我们可以使用该插件提供的 wx.connectMqtt 方法进行连接。下面是一个示例代码：

const mqtt = requirePlugin('mqtt')

Page({
  onLoad: function () {
    const client = mqtt.connect({url: 'mqtt://localhost:61614', clientId: 'clientId'})
    client.on('connect', this.onConnect)
    client.on('message', this.onMessage)
  },

  onConnect: function () {
    console.log('Connected to MQTT')
    this.client.subscribe('/test')
    const message = 'Hello World'
    this.client.publish('/test', message)
  },

  onMessage: function (topic, message) {
    console.log('Received message: ' + message)
  }
})

在上述示例中，我们在 onLoad 生命周期中通过插件提供的 connect 方法创建了一个 MQTT 客户端实例，并设置了连接成功和收到消息的回调函数。然后，我们在 onConnect 方法中订阅主题并发送消息。需要注意的是，我们使用了该插件提供的 publish、subscribe 方法，而不是 Paho MQTT 客户端库提供的方法。

至此，我们已经为大家提供了 uniapp 和微信小程序中使用 MQTT 的详细攻略，并提供了两个示例代码。通过上述攻略，读者可以快速地将 MQTT 集成到自己的 uniapp 和微信小程序项目中。