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


手机端效果图

uniapp 代码(app, 小程序):

<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.jsvar mqtt = require('../../mqtt.min.js')  //引入mqtt库 var ntime = 0  //计时初始值export default {data() {return {title: '网络连接中...',                         state:'off',  //图标状态imgurloff:'/static/off.png',imgurlon:'/static/on.png',timer: null,client: null,               // mqtt协议在app端和小程序端必须用【 wx:// 或者 wxs:// 】// 开发文档见 https://cloud.bemfa.com/docs/#/?id=_43-mqtt%e8%ae%be%e5%a4%87%e4%ba%91               url: 'wxs://bemfa.com:9504/wss',                              options: {clientId: '88888888888888888888888',  //巴法云平台用户私钥keepalive: 60, //心跳时间}}},onLoad() {                        this.mqttconnect()                  },onShow() {// esp8266每10秒发布一次消息,ntime清零一次,如果20秒后变量ntime还没有清零,判断设备离线了         //建立定时器10秒运行一次this.timer = setInterval( () => {                ntime = ntime + 10if(ntime >= 20 ){this.title = '设备离线,请检查! 'this.state = 'off'}               }, 1000*10) },onHide() {// 清除定时器            if(this.timer) {  clearInterval(this.timer);  this.timer = null;  } },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 = msgntime = 0console.log('收到来自'+ topic + '的消息:' + msg)                 })  },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>

uniapp 代码(H5):
由于使用H5方式存在跨域问题,需要修改部分代码。

<template><view class="content"><image class="logo" @click="btnclose()" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text></view><button type="default" @click="btnopen()">打开</button><button type="default" @click="btnclose()">关闭</button></view>
</template><script>export default {data() {return {title: '远程开关灯',uid: '888888888888', //巴法云平台用户私钥topic: "light002",device_status: "离线", //默认离线powerstatus: "已关闭" //默认关闭}},onLoad() {this.getmsg()            setInterval(()=> { //定时器this.getmsg()},30000)           },methods: {btnclose() {var that = this                uni.request({url: '/dev', //调用manifest.json文件中的 H5 代理接口method: "POST",data: { //请求字段,详见巴法云接入文档,http接口uid: that.uid,topic: that.topic,msg: "off" //发送消息为off的消息},header: {'content-type': "application/x-www-form-urlencoded"},success(res) {console.log(res.data)uni.showToast({title: '关闭成功',icon: 'success',duration: 1000})}})},btnopen() {var that = this               uni.request({//url: 'https://api.bemfa.com/api/device/v1/data/1/', //api接口,详见接入文档url: '/dev', //调用maifest.json文件中的 H5 代理接口method: "POST",data: { //请求字段,详见巴法云接入文档,http接口uid: that.uid,topic: that.topic,msg: "on" //发送消息为off的消息},header: {'content-type': "application/x-www-form-urlencoded"},success(res) {console.log(res.data)uni.showToast({title: '打开成功',icon: 'success',duration: 1000})}})},getmsg() {var that = this             uni.request({//url: 'https://api.bemfa.com/api/device/v1/data/1/', //api接口,详见接入文档url: '/dev', //调用maifest.json文件中的 H5 代理接口method: "GET",data: { //请求字段,详见巴法云接入文档,http接口uid: that.uid,topic: 'wendu' //订阅主题             },header: {'content-type': "application/x-www-form-urlencoded"},success(res) {console.log(res.data)that.title = res.data.msg}})}}}
</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;}button {margin: 20rpx;}
</style>

manifest.json 在H5选项内添加代理,解决跨域问题

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 <DNSServer.h>
#include <ESP8266WebServer.h>
#include <WiFiManager.h>
#include <Ticker.h>
//#include <PubSubClient.h>
#include "PubSubClient.h"              //默认,加载MQTT库文件         WiFiClient espClient;  //wifi客户端模式
PubSubClient client(espClient);
Ticker ticker;  //定时器对象//********************需要修改的部分*******************//
#define ID_MQTT  "888888888888888888888888"     //用户私钥,控制台获取
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服务器端口
int count;    // Ticker计数用的变量//灯光函数及引脚定义
void turnOnLed();
void turnOffLed();//计数
void tickerCount(){count++;
}// 连接MQTT服务器
void reconnect() {// Loop until we're reconnectedwhile (!client.connected()) {Serial.print("Attempting MQTT connection...");// Attempt to connectif (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 retryingdelay(5000);}}
}// 收到信息后的回调函数
void receiveCallback(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 turnOnLed() {Serial.println("turn on light");digitalWrite(B_led, HIGH);
}//关闭灯泡
void turnOffLed() {Serial.println("turn off light");digitalWrite(B_led, LOW);
}// 发布信息
void pubMQTTmsg(){   // 建立发布主题//巴法云个性设置,推送消息时:主题名后加/set推送消息,表示向所有订阅这个主题的设备们推送消息,//假如推送者自己也订阅了这个主题,消息不会被推送给它自己,以防止自己推送的消息被自己接收。String topicString = "light002/set" ;char publishTopic[topicString.length() + 1];  //转换成字符数组strcpy(publishTopic, topicString.c_str());// 建立发布信息,当前D1引脚状态String messageString;if(digitalRead(B_led)){messageString = "on"; } else {messageString = "off"; }       char publishMsg[messageString.length() + 1];   //转换成字符数组strcpy(publishMsg, messageString.c_str());// 实现ESP8266向主题发布信息,并在串口监视器显示出来if(client.publish(publishTopic, publishMsg)){Serial.println("Publish Topic:");Serial.println(publishTopic);Serial.println("Publish message:");Serial.println(publishMsg);    } else {Serial.println("Message Publish Failed."); }
}//程序入口
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(receiveCallback); //mqtt消息处理  ticker.attach(1, tickerCount); // Ticker定时对象}//循环执行
void loop() {if (!client.connected()) {reconnect();}else{client.loop();    // 保持心跳if (count >= 10){ // 每隔10秒钟发布一次信息pubMQTTmsg();count = 0;}}
}

uniapp 开发移动端对接巴法云物联网平台控制ESP8266开关灯相关推荐

  1. esp8266 TCP接入巴法云物联网云平台

    文章目录 前言 (一)注册添加TCP设备 (1)注册巴法云账号 (2)创建主题 (二)订阅发布主题 (1)TCP设备相关指令 (2)调试 (三)ESP8266接入巴法云 前言 巴法云物联网云平台,就如 ...

  2. MQ-5 气体传感器对接巴法云发送微信消息

    1. 巴法云配置 1–1. 进入巴法云控制台:https://cloud.bemfa.com/tcp/devicemqtt.html 选择MQTT设备云,新建主题,此处的主题是MQ5 ,也可以自定义, ...

  3. esp32对接阿里云生活物联网平台 天猫精灵控制 云智能APP远程控制 ali-sdk开发

    一,提前搭建好Linux ESP-IDF开发环境,本博客不叙述具体搭建过程,请参考网上教程. ESP-IDF: 请切换到 release v4.2 tag 版本: git checkout v4.2 ...

  4. uni-app开发多端之钉钉小程序

    经常有开发者咨询uni-app是否支持钉钉小程序? 答案当然是支持! 本文通过将hello uni-app发布到钉钉小程序,演示如何使用uni-app开发钉钉小程序. 扩展钉钉小程序平台 创建hell ...

  5. 平头哥RVB2601测评:对接阿里云物联网平台

    作者:溪悦哦 一.AT介绍 AT 即Attention,AT指令集是从终端设备或数据终端设备向终端适配器或数据电路终端设备发送的命令. AT 是一个软件协议,不是物理连接,物理连接可以基于串口,也可以 ...

  6. 广和通l610二次开发|广和通l610 CAT.1模组opencpu开发《三》阿里云物联网平台mqtt动态注册

    阿里云物联网平台动态注册 使用模组的IMEI作为设备的name,采用动态注册自动在案例云平台上注册设备 文章目录 阿里云物联网平台动态注册 参考文档 一.基本准备 二.平台产品创建 三.动态注册流程 ...

  7. 微信小程序配合物联网进行控制esp8266

    系列文章目录 文章目录 系列文章目录 前言 一.准备材料: 二.三大配置 1.阿里云配置 2.数据转运 3.微信小程序 总结 前言 最近在做智能家居的项目,主要是通过esp8266接入云端实现远程控制 ...

  8. 手把手教你用Arduino接入阿里云物联网平台,ESP8266连接阿里云物联网平台必看教程...

    使用Ardui no 的方式快速连接阿里云物联网平台. 文中提到的 AliyunIoTSDK 这个 Arduino 库,可以在 Arduino 库商店里搜索到(搜索 AliyunIoTSDK) Ali ...

  9. 生成基于STM32f103zet6的宠物自动投食机的代码,实现定时、定量、自动的投食,并可以通过Tlink物联网平台控制投食机投喂食物和查看投食机的投喂状态...

    非常抱歉,由于我是一个语言模型,我没有办法为您生成完整的代码.但是,我可以为您提供一些有用的信息. 首先,生成基于STM32f103zet6的宠物自动投食机的代码需要一些基本的技能和知识,比如嵌入式系 ...

最新文章

  1. GitHUb 代码提交遇到的问题以及解决办法
  2. 参加java培训,要避免这几个误区!
  3. SingleCellExperiment类使用
  4. 项目实践精解:ASP.NET应用开发
  5. 昔日“宅男最爱”、视频播放器之王破产清算:4.5万元商标拍到950万元
  6. 【IDEA】Error:java: Compilation failed: internal java compiler error
  7. VMware 禁用虚拟内存文件,提升虚拟机响应速度 .
  8. chrome查看网站字符集编码的方法(不需要安装charset)
  9. datatable java排序,JSF数据表(h:dataTable)DataModel排序数据
  10. MySQL 基数的定义
  11. 金融评分卡项目—5.神经网络模型在银行业客户流失预警模型中的应用—MLP
  12. 羊皮卷的故事-第十七章-羊皮卷之十
  13. 编译easymule 1.1.5
  14. 蜀海供应链数仓平台建设实践
  15. 时间管理-番茄工作法
  16. 第十一届蓝桥杯 2020年省赛真题 (C/C++ 大学A组) 第一场
  17. python 实现省全称和省的简称互相转换
  18. 可以看计算机专业书籍的app,分享两个好用的读书APP
  19. 在线影音页面的制作方法
  20. EMAC和PHY层之间的关系以及在通信架构划分情况

热门文章

  1. 通过ROS控制真实机械臂(8)---延时时间精确控制
  2. 养生指南 4 : 睡眠 与 外因
  3. 讥讽梅西?本泽马澄清没有不服气梅西,世界杯自愿退出
  4. JVE非我全“芯”出击,多款越级新品即将发布
  5. 全民直播时代,如何才能杀出重围成为一个优质主播?
  6. 期货开户公司底蕴深厚实力强大
  7. openlayers加载本地arcgis切片(explodes)的两种方式,利用geowebcache进行发布和直接读取本地切片
  8. php 汉字转拼音类,完善的汉字转拼音php转换类
  9. 基于深度学习的三维重建(一):三维重建简介、patchmatchNet环境部署、用colmap如何测试自己的数据集
  10. spring 配置sqlite的方式