uniapp+vue3编译微信小程序，解决mqtt真机无法链接的问题

记录一下最近遇到的问题：就是uniapp编译到微信小程序后，mqtt编译器可以链接，但是真机调试时无法链接，查了很久，有说换mqtt版本，其实我个人觉得和版本没有太大的关系，当然如果有完全解决的大佬，可以评论解答一下，同时服务器等配置问题自己百度，这边只解决前端问题

真机无法连接主要出现如下如图问题：自行对比，connected:只有为true时才算连接成功，才可进行之后的订阅等操作

我使用的是mqtt的2.18.8版本，可以选择npm install mqtt@2.18.8 之后通过import mqtt from 'mqtt/dist/mqtt.js'引入 ，当然https://unpkg.com/browse/mqtt/可以去这个网站进行对应版本下载最后放到文件夹下面进行引入

最后实现代码：

<template>
	<button @click="conents">链接</button>
</template>

<script setup>
	import mqtt from 'mqtt/dist/mqtt.js'
	import {
		ref
	} from 'vue'

	//MQTT
	// const host = ref('broker.emqx.io')//自己的地址
	const client = ref(null)
	const reconnectCounts = ref(0)
	const options = ref({
        //port:8084,是否需要配置端口根据nginx来的
		clientId: +new Date() + 'test02',
		clean: false,
		password: '',//密码
		username: '',//用户名
		reconnectPeriod: 1000, //1000毫秒，两次重新连接之间的间隔
		connectTimeout: 30 * 1000, //1000毫秒，两次重新连接之间的间隔
		resubscribe: true //如果连接断开并重新连接，则会再次自动订阅已订阅的主题（默认true）
	})
	const conents = () => {
		client.value = mqtt.connect(`wxs://${host.value}/mqtt`, options.value)
		console.log('client.value', client.value)
		client.value.on('connect', () => {
			wx.showToast({
				title: '连接成功'
			})
		})
	}
</script>

<style lang="scss" scoped>
</style>

注意：可以尝试使用broker.emqx.io地址，如果能进行连接则前端代码没有问题，但是记住在真机运行的适合记得勾选一下这项，否则无法连接

如果用自己的地址，则需要前往微信公众号平台，在开发管理中配置wss

最终成功后：

订阅等问题就不在这里写了，百度一堆