一、 實現(xiàn)工具——微信開發(fā)者工具

為何使用微信小程序作為展示？
（1）范圍廣且能跨平臺訪問;
（2）小而快能夠快速的訪問;

二、 實現(xiàn)步驟

1、總體大概：

（1）界面設計：數(shù)據(jù)直觀展示+歷史數(shù)據(jù)+物聯(lián)網(wǎng)調(diào)試信息
（2）連接服務器與回調(diào)
利用wx.request(Object object)發(fā)起 HTTPS 網(wǎng)絡請求。

參數(shù)：

• url：開發(fā)者服務器接口地址；
• data：請求的參數(shù)；
• header：設置請求的 header，header 中不能設置 Referer。
  

成功連接將會調(diào)用success: function (res) {}函數(shù)，我們可以利用console.log(res.data)打印出服務器傳來的數(shù)據(jù)Var一個that新的this變量將我們傳來的數(shù)據(jù)以列表保存。

服務器連接失敗會調(diào)用fail: function (err)函數(shù)，并通過{console.log(err)}打印出錯誤信息。

2、細節(jié)展示

A、數(shù)據(jù)展示界面

狀態(tài)：

此處利用條件渲染綁定服務器傳來的開關值，利用圖片直觀展示開關情況。

溫濕度：

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

B、歷史記錄展示界面

利用循環(huán)渲染將每次獲取到的列表展示。同時調(diào)用服務器接受傳來的時間準確直觀展示每一次的歷史數(shù)據(jù)。

C、物聯(lián)網(wǎng)調(diào)試信息界面

我們?nèi)绻褂胠ot調(diào)試設備將會在此界面展示調(diào)試信息：

步驟：

a、創(chuàng)建物聯(lián)網(wǎng)平臺

選擇物聯(lián)網(wǎng)平臺

點擊設備管理，選擇產(chǎn)品，創(chuàng)建產(chǎn)品

給產(chǎn)品命名

在標準品類，選擇智能生活，選擇燈；節(jié)點類型選擇直連設備 ；連網(wǎng)方式選擇WIFI；數(shù)據(jù)格式選擇ICA標準數(shù)據(jù)類型；保存

然后在產(chǎn)品下創(chuàng)建一個設備微信端；點擊設備；添加設備；產(chǎn)品選擇剛建立的產(chǎn)品；再給設備命名；點擊確認

b、代碼替換三元組與訂閱發(fā)布主題

c、檢驗連接是否成功

回調(diào)成功以彈窗方式展示：

當服務器連接異常進行錯誤函數(shù)回調(diào)并打印錯誤信息：

（關于更多l(xiāng)otl連接請點擊我參考的大佬博客：只要會用電腦就能看懂的物聯(lián)網(wǎng)教程（阿里云+esp8266+微信小程序）
）

3 出現(xiàn)錯誤及改正

A.自定義訂閱主題不被識別
解決方法：點擊規(guī)則引擎的云產(chǎn)品流傳發(fā)現(xiàn)創(chuàng)建規(guī)則數(shù)據(jù)格式選擇二進制格式，改為JSON格式解決
B.控制臺打印錯誤：Please do not call Page constructor in files that not listed in"pages" sect
解決方法：用來測試的界面app.js文件不能加Page({}) 會有引用錯誤。加上即解決。
C.小程序無法從服務器拿到最新的測試數(shù)據(jù)
解決方法：服務器創(chuàng)建新API，更改sql語句

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

拿到最新數(shù)據(jù)渲染在自己設計的View中。

到此這篇關于微信小程序連接服務器展示MQTT數(shù)據(jù)信息的實現(xiàn)的文章就介紹到這了,更多相關小程序連接服務器展示MQTT內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

最新評論