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

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

二、 實(shí)現(xiàn)步驟

1、總體大概：

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

參數(shù)：

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

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

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

2、細(xì)節(jié)展示

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

狀態(tài)：

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

溫濕度：

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

B、歷史記錄展示界面

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

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

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

步驟：

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

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

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

給產(chǎn)品命名

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

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

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

c、檢驗(yàn)連接是否成功

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

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

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

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

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

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

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

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

最新評論