1. 程式人生 > 程式設計 >微信小程式連線伺服器展示MQTT資料資訊的實現

微信小程式連線伺服器展示MQTT資料資訊的實現

一、 實現工具——微信開發者工具

為何使用微信小程式作為展示?
(1)範圍廣且能跨平臺訪問;
(2)小而快能夠快速的訪問;

二、 實現步驟

1、總體大概:

(1)介面設計:資料直觀展示+歷史資料+物聯網除錯資訊
(2)連線伺服器與回撥
利用wx.request(Object object)發起 HTTPS 網路請求。

引數:

  • url:開發者伺服器介面地址;
  • data:請求的引數;
  • header:設定請求的 header,header 中不能設定 Referer。

微信小程式連線伺服器展示MQTT資料資訊的實現

成功連線將會呼叫success: function (res) {}函式,我們可以利用console.log(res.data)

打印出伺服器傳來的資料Var一個that新的this變數將我們傳來的資料以列表儲存。

微信小程式連線伺服器展示MQTT資料資訊的實現

伺服器連線失敗會呼叫fail: function (err)函式,並通過{console.log(err)}打印出錯誤資訊。

2、細節展示

A、資料展示介面

微信小程式連線伺服器展示MQTT資料資訊的實現

狀態:

微信小程式連線伺服器展示MQTT資料資訊的實現

此處利用條件渲染繫結伺服器傳來的開關值,利用圖片直觀展示開關情況。

溫溼度:

微信小程式連線伺服器展示MQTT資料資訊的實現

微信小程式連線伺服器展示MQTT資料資訊的實現

溫度和溼度通過對列表遍歷得到最新的值顯示在自己設定的view。

B、歷史記錄展示介面

微信小程式連線伺服器展示MQTT資料資訊的實現

利用迴圈渲染將每次獲取到的列表展示。同時呼叫伺服器接受傳來的時間準確直觀展示每一次的歷史資料。

C、物聯網除錯資訊介面

我們如果使用lot除錯裝置將會在此介面展示除錯資訊:

微信小程式連線伺服器展示MQTT資料資訊的實現

步驟:

a、建立物聯網平臺

選擇物聯網平臺

點選裝置管理,選擇產品,建立產品

給產品命名

在標準品類,選擇智慧生活,選擇燈;節點型別選擇直連裝置 ;連網方式選擇WIFI;資料格式選擇ICA標準資料型別;儲存

然後在產品下建立一個裝置微信端;點選裝置;新增裝置;產品選擇剛建立的產品;再給裝置命名;點選確認

b、程式碼替換三元組與訂閱釋出主題

微信小程式連線伺服器展示MQTT資料資訊的實現

c、檢驗連線是否成功

回撥成功以彈窗方式展示:

微信小程式連線伺服器展示MQTT資料資訊的實現

當伺服器連線異常進行錯誤函式回撥並列印錯誤資訊:

微信小程式連線伺服器展示MQTT資料資訊的實現

(關於更多lotl連線請點選我參考的大佬部落格:只要會用電腦就能看懂的物聯網教程(阿里雲+esp8266+微信小程式)

3 出現錯誤及改正

A.自定義訂閱主題不被識別
解決方法:點選規則引擎的雲產品流傳發現建立規則資料格式選擇二進位制格式,改為JSON格式解決
B.控制檯列印錯誤:Please do not call Page constructor in files that not listed in"pages" sect
解決方法:用來測試的介面app.js檔案不能加Page({}) 會有引用錯誤。加上即解決。
C.小程式無法從伺服器拿到最新的測試資料
解決方法:伺服器建立新API,更改sql語句

select * from mqtt where id = (select max(id) from mqtt);

拿到最新資料渲染在自己設計的View中。

到此這篇關於微信小程式連線伺服器展示MQTT資料資訊的實現的文章就介紹到這了,更多相關小程式連線伺服器展示MQTT內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們!