uniapp 开发移动端对接巴法云物联网平台控制ESP8266开关灯
巴法云物联网平台的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开关灯相关推荐
- esp8266 TCP接入巴法云物联网云平台
文章目录 前言 (一)注册添加TCP设备 (1)注册巴法云账号 (2)创建主题 (二)订阅发布主题 (1)TCP设备相关指令 (2)调试 (三)ESP8266接入巴法云 前言 巴法云物联网云平台,就如 ...
- MQ-5 气体传感器对接巴法云发送微信消息
1. 巴法云配置 1–1. 进入巴法云控制台:https://cloud.bemfa.com/tcp/devicemqtt.html 选择MQTT设备云,新建主题,此处的主题是MQ5 ,也可以自定义, ...
- esp32对接阿里云生活物联网平台 天猫精灵控制 云智能APP远程控制 ali-sdk开发
一,提前搭建好Linux ESP-IDF开发环境,本博客不叙述具体搭建过程,请参考网上教程. ESP-IDF: 请切换到 release v4.2 tag 版本: git checkout v4.2 ...
- uni-app开发多端之钉钉小程序
经常有开发者咨询uni-app是否支持钉钉小程序? 答案当然是支持! 本文通过将hello uni-app发布到钉钉小程序,演示如何使用uni-app开发钉钉小程序. 扩展钉钉小程序平台 创建hell ...
- 平头哥RVB2601测评:对接阿里云物联网平台
作者:溪悦哦 一.AT介绍 AT 即Attention,AT指令集是从终端设备或数据终端设备向终端适配器或数据电路终端设备发送的命令. AT 是一个软件协议,不是物理连接,物理连接可以基于串口,也可以 ...
- 广和通l610二次开发|广和通l610 CAT.1模组opencpu开发《三》阿里云物联网平台mqtt动态注册
阿里云物联网平台动态注册 使用模组的IMEI作为设备的name,采用动态注册自动在案例云平台上注册设备 文章目录 阿里云物联网平台动态注册 参考文档 一.基本准备 二.平台产品创建 三.动态注册流程 ...
- 微信小程序配合物联网进行控制esp8266
系列文章目录 文章目录 系列文章目录 前言 一.准备材料: 二.三大配置 1.阿里云配置 2.数据转运 3.微信小程序 总结 前言 最近在做智能家居的项目,主要是通过esp8266接入云端实现远程控制 ...
- 手把手教你用Arduino接入阿里云物联网平台,ESP8266连接阿里云物联网平台必看教程...
使用Ardui no 的方式快速连接阿里云物联网平台. 文中提到的 AliyunIoTSDK 这个 Arduino 库,可以在 Arduino 库商店里搜索到(搜索 AliyunIoTSDK) Ali ...
- 生成基于STM32f103zet6的宠物自动投食机的代码,实现定时、定量、自动的投食,并可以通过Tlink物联网平台控制投食机投喂食物和查看投食机的投喂状态...
非常抱歉,由于我是一个语言模型,我没有办法为您生成完整的代码.但是,我可以为您提供一些有用的信息. 首先,生成基于STM32f103zet6的宠物自动投食机的代码需要一些基本的技能和知识,比如嵌入式系 ...
最新文章
- 在ATS 5.3.0上测试域名统计插件channel_stats
- C++ 类构造函数初始化列表介绍
- 开课吧python视频百度云-做摄影2年,工资5000,兼职2W...
- 【数据挖掘】卷积神经网络 ( 池化 | 丢弃 | 批量规范化 | 卷积神经网络完整流程示例 | 卷积 | 池化 | 全连接 | 输出 | 卷积神经网络总结 )
- Spring boot+Spring Security 4配置整合实例
- putty连虚拟机中Linux出现Access Denied
- python解压到指定文件夹_在Python中压缩和解压文件
- java中发红包案例之红包界面不出来的解决方案
- 为什么要进行特征归一化/标准化?
- 传统emmc所用的sdio接口_MMC/SD/SDIO介绍
- Windows快捷键PrtSc截图无法正常使用
- 使用mono构建c#脚本运行环境
- OA表单设计 案例展示
- 获取窗口 history数量_带你走进JavaScript世界系列——history 对象
- Jump视频实时抠图和语音降噪
- java 系统api_java实现-强智教务系统API文档-时间信息
- Tcl/Tk入门(中)
- SDNU_ACM_ICPC_2020_Winter_Practice_4th [Reproduced](新知识点:矩阵快速幂的应用)
- python从属关系编号_42:对象、类、以及从属关系
- postgrepSQL