onenet连接微信小程序(mqtt协议)

一、关于mqtt协议

mqtt协议常用于物联网,是一种轻量级的消息推送协议。

其中有三个角色,Publisher设备(客户端)发布主题到服务器,其他的设备通过订阅主题,获取该主题下的消息,Publisher可以发布消息到主题下,从而推送消息给其他设备。

选择MQTT协议的原因是其轻量化并且可以离线缓存消息在主题中,适合我们的移动低功耗低处理的设备。

二、使用微信小程序连接onenet

1.GET获取平台信息

javascript 复制代码
authInfo: "version=2018-10-31&res=products%2F69lP2GPJQV%2Fdevices%2Fwenshi&et=2014049634&method=md5&sign=KiQMG9fabKZC5sQtd354Bg%3D%3D",

在小程序里,借助authInfo这个变量存放授权信息,它包含了版本、资源路径、过期时间以及签名等内容。在后续发起的 HTTP 请求的请求头中,会携带此授权信息,从而实现对平台资源的访问授权。

javascript 复制代码
wx.request({
  url: "https://iot-api.heclouds.com/thingmodel/query-device-property?product_id=60KP2GPJQV&device_name=wenshi",
  header: {
    "authorization": that.data.authInfo
  },
  method: "GET",
  // 后续处理逻辑
});

小程序运用wx.request这个 API 来发送 HTTP 请求。这里是向平台的设备属性查询接口发送 GET 请求,在请求头中携带了之前提到的授权信息。平台返回的数据里包含了设备的温湿度和水位信息,成功获取后会更新到小程序的界面上。

javascript 复制代码
onLoad() {
  var that = this;
  setInterval(
    function () {
      that.getinfo();
    }, 3000
  );
}

再在循环中循环去调用getinfo去循环获取平台数据。

2.POST下发数据置平台

javascript 复制代码
openclick: function () {
  var that = this;
  wx.showToast({ title: 'xx', duration: 1000 }); // 显示提示
  
  wx.request({
    url: 'https://iot-api.heclouds.com/thingmodel/set-device-property?product_id=xxxxxx&device_name=xxxx',
    method: "POST",
    header: { "Authorization": that.data.authInfo }, // 身份认证信息
    data: {
      product_id: 'xxxxxxxx',
      device_name: 'xxxxx',
      params: { "key": true } // 控制参数:打开设备
    },
    success: function (res) {
      console.log('控制请求成功', res);
    },
    fail: function (err) {
      console.log('控制请求失败', err.errMsg);
    }
  });
},

将该函数绑定在按钮上,当按下按钮时执行一次该函数

3.echarts图形化显示

javascript 复制代码
import * as echarts from '../../ec-canvas/echarts.min';

let chart = null;

function initChart(canvas, width, height, dpr) {
    chart = echarts.init(canvas, null, {
        width: width,
        height: height,
        devicePixelRatio: dpr
    });
    canvas.setChart(chart);
    return chart;
}

相关推荐
2501_915918419 小时前
iOS 上架注意事项有哪些?Appuploader 的四个阶段自查清单
android·ios·小程序·https·uni-app·iphone·webview
Autumn_ing10 小时前
AI原型设计工具怎么选?可编辑原型与可运行前端适合什么场景
前端·小程序·产品经理·代码·codex·墨刀ai客户端·ai原型
fengGer的bugs10 小时前
微信小程序实战:本地存储的新生儿喂养记录(原生 + 四套主题 + 疫苗日程)
微信小程序·小程序
Ai-_Man11 小时前
我需要批量导出Poe左边栏所有对话,而不是一条具体的对话内容,你们AI导出鸭可以吗?
开发语言·前端·javascript·人工智能·小程序
青企通11 小时前
二手交易小程序的担保交易:资金托管、状态机与争议处理
小程序
andrsted1 天前
练题簿免费刷题小程序:和学习搭子共用一份题库,一起刷题复习
学习·面试·微信小程序·小程序·学习方法·刷题
万岳科技程序员小金1 天前
教育机构如何搭建在线教学平台?网校系统、小程序与APP开发指南
小程序·在线教育系统源码·教育平台搭建·教育app开发·教育软件开发·教育小程序开发
计算机毕设定制辅导-无忧学长1 天前
《基于微信小程序的个人智能刷题助手的设计与实现》
java·spring boot·mysql·微信小程序·uniapp·个人智能刷题助手系统
百慕大三角1 天前
为了在 Linux CI 里跑小程序 E2E,我把微信官方基础库搬进了浏览器:wxa-runner 开源实践
微信小程序·agent·测试
小小王app小程序开发1 天前
淘宝扭蛋机小程序玩法开发分析
小程序