[嵌入式]uniapp 开发移动端对接巴法云物联网平台控制ESP8266开关灯

巴法云物联网平台的MQTT接入只有说明文档，没有移动端实例。经过多次连接测试，使用uniapp开发的移动端终于成功连接服务器。

uniapp 代码：

<template>
	<view class="content">
		<!-- <image class="logo" src="/static/logo.png" ></image> -->
		<image class="logo" :src="state=='on' ? imgurlon : imgurloff"></image>
		<view class="text-area">
			<view class="title">{{title}}</view>
		</view>
		<view class="btn">
			<button type="default" @click="btnon()">开</button>
			<button type="default" @click="btnoff()">关</button>
		</view>

	</view>
</template>

<script>
	// mqtt库下载地址 https://unpkg.com/mqtt@4.2.8/dist/mqtt.min.js
	var mqtt = require('../../mqtt.min.js')  //引入mqtt库	

	export default {
		data() {
			return {
				title: '网络连接中...',							
				state:'off',  //图标状态
				imgurloff:'/static/off.png',
				imgurlon:'/static/on.png',				
				client: null,				
				// mqtt协议在app端和小程序端必须用【 wx:// 或者 wxs:// 】							
				url: 'wxs://bemfa.com:9504/wss',								
				options: {
					clientId: '***************',  //巴法云平台用户私钥，替换成自己的
					keepalive: 60, //心跳时间
				}
			}
		},
		
		onLoad() {						
			this.mqttconnect()			        
		},
		
		methods: {
			mqttconnect() {
				this.client = mqtt.connect(this.url,this.options)
				
				//连接服务器
				this.client.on('connect', () => {
					this.title = '服务器连接成功!'
					// 订阅主题
					this.client.subscribe('light002',{qos: 1}, (err) => {
						console.log(err || '订阅主题成功')
					})
				})
				
				//收取消息
				this.client.on('message', (topic, message) => {
					let msg = message.toString()
					this.title = '设备在线'					
					this.state = msg
					console.log('收到来自'+ topic + '的消息:' + message.toString())					
				})	
			},

			btnon() {
				//发布开灯指令
				this.client.publish('light002', 'on',{
						qos: 1,  	   //至少传输一次
						retain: true  //保留消息，当订阅主题时发布最后那条消息（在此程序的作用是打开app就知道是关灯还是开灯状态）
					},(err) => {
						console.log(err || '发送信息成功')
					}
				)					
			},

			btnoff() {
				//发布关灯指令
				this.client.publish('light002', 'off',{
						qos: 1,			//至少传输一次
						retain: true 	//保留消息，当订阅主题时发布最后那条消息（在此程序的作用是打开app就知道是关灯还是开灯状态）
					},(err) => {
						console.log(err || '发送信息成功')
					}
				)					
			}

		}
	}
</script>

<style>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 200rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 36rpx;
		color: #8f8f94;
	}
	.btn{
		display: flex;
		flex-direction: row;
		margin: 20rpx;
	}
	button{
		margin: 20rpx;
		border-radius: 5rpx;
		color: #0055ff;
		background-color: #909090;
	}
</style>

ESP8266 模块代码
在官方代码的基础上加入了自动配网，当wifi环境改变后，可以使用手机连接esp8266热点进行网络配置。
详见官方文档：https://cloud.bemfa.com/docs/#/?id=_151-%e6%8e%a7%e5%88%b6led%e7%81%af

/*
* 智能语言控制控制，支持同时天猫、小爱、小度、google Assistent控制
* 也同时支持web控制、小程序控制、app控制，定时控制等
* QQ群：566565915
* 项目示例：通过发送on或off控制开关
* 官网：bemfa.com
*/

#include <ESP8266WiFi.h>               //默认，加载WIFI头文件
#include "PubSubClient.h"              //默认，加载MQTT库文件         
#include <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h> 

//********************需要修改的部分*******************//
#define ID_MQTT  "6888888888888888888887"     //用户私钥，控制台获取
const char*  topic = "light002";        //主题名字，可在巴法云控制台自行创建，名称随意
const int B_led = D1;       //单片机LED引脚值，D系列是NodeMcu引脚命名方式，其他esp8266型号将D2改为自己的引脚
//**************************************************//

const char* mqtt_server = "bemfa.com"; //默认，MQTT服务器
const int mqtt_server_port = 9501;      //默认，MQTT服务器
WiFiClient espClient;
PubSubClient client(espClient);


//灯光函数及引脚定义
void turnOnLed();
void turnOffLed();

void setup() {
  pinMode(B_led, OUTPUT); //设置引脚为输出模式
  digitalWrite(B_led, LOW);//默认引脚上电低电平
  Serial.begin(9600);     //设置波特率9600
  
  //********************自动配置网络************************  
  // 建立WiFiManager对象
  WiFiManager wifiManager;  
  // 自动连接WiFi。以下语句的参数是连接ESP8266时的WiFi名称
  wifiManager.autoConnect("AutoConnectAP");  
  // 如果您希望该WiFi添加密码，可以使用以下语句：
  // wifiManager.autoConnect("AutoConnectAP", "12345678"); 
  // WiFi连接成功后将通过串口监视器输出连接成功信息 
  Serial.println(""); 
  Serial.print("ESP8266 Connected to ");
  Serial.println(WiFi.SSID());              // WiFi名称
  Serial.print("IP address:\t");
  Serial.println(WiFi.localIP());           // IP
  //*******************************************************
    
  client.setServer(mqtt_server, mqtt_server_port);//设置mqtt服务器
  client.setCallback(callback); //mqtt消息处理  
}

void loop() {
  if (!client.connected()) {
    reconnect();
  }
  client.loop();  
}


void callback(char* topic, byte* payload, unsigned int length) {
  Serial.print("Topic:");
  Serial.println(topic);
  String msg = "";
  for (int i = 0; i < length; i++) {
    msg += (char)payload[i];
  }
  Serial.print("Msg:");
  Serial.println(msg);
  if (msg == "on") {//如果接收字符on，亮灯
    turnOnLed();//开灯函数
  } else if (msg == "off") {//如果接收字符off，亮灯
    turnOffLed();//关灯函数
  }
  msg = "";  
}

void reconnect() {
  // Loop until we're reconnected
  while (!client.connected()) {
    Serial.print("Attempting MQTT connection...");
    // Attempt to connect
    if (client.connect(ID_MQTT)) {
      Serial.println("connected");
      Serial.print("subscribe:");
      Serial.println(topic);
      //订阅主题，如果需要订阅多个主题，可发送多条订阅指令client.subscribe(topic2);client.subscribe(topic3);
      client.subscribe(topic);
    } else {
      Serial.print("failed, rc=");
      Serial.print(client.state());
      Serial.println(" try again in 5 seconds");
      // Wait 5 seconds before retrying
      delay(5000);
    }
  }
}

//打开灯泡
void turnOnLed() {
  Serial.println("turn on light");
  digitalWrite(B_led, HIGH);
}

//关闭灯泡
void turnOffLed() {
  Serial.println("turn off light");
  digitalWrite(B_led, LOW);
}