Wechat applet connects to the server to display mqtt data information

One 、 Implementation tools —— WeChat developer tools

Why use wechat applet as a display ？
（1） Wide range and cross platform access ;
（2） Small and fast to access quickly ;

Two 、 Implementation steps

1、 Overall, it's about ：
（1） Interface design ： Visual display of data + The historical data + Internet of things debugging information
（2） Connect the server and callback
utilize wx.request(Object object) launch HTTPS Network request .
Parameters ：
url： Developer server interface address ;
data： Requested parameters ;
header： Set the requested header,header Cannot set Referer.

A successful connection will call success: function (res) {} function , We can use console.log(res.data) Print out the data from the server Var One that new this Variables save the data we passed in a list .

Server connection failure will call fail: function (err) function , And pass {console.log(err)} Print out error messages .
2、 Detail display
A、 Data display interface

state ：

Here, the switch value from the binding server is conditionally rendered , Use pictures to visually show the switch conditions .

Temperature and humidity ：


The latest values of temperature and humidity are displayed in their own settings by traversing the list view.

B、 History display interface

The list obtained each time is displayed by circular rendering . At the same time, call the server to accept the time transmitted, and accurately and visually display each historical data .
C、 Internet of things debugging information interface
If we use lot Debugging equipment will display debugging information in this interface ：

step ：
a、 Create an Internet of things platform

• Choose the Internet of things platform

• Click device management , Choose products , Create products

• Name the product

• In the standard category , Choose smart life , Select light ; The node type is direct connected equipment ; Network connection mode selection WIFI; Data format selection ICA Standard data type ; preservation

• Then create a wechat device under the product ; Click on the device ; Add equipment ; Select the newly established product ; Then name the device ; Click on the confirmation

b、 Code replacement triples and subscription publishing topics

c、 Verify that the connection is successful
The callback success is displayed in a pop-up window ：

When the server connection is abnormal, the error function callback is performed and the error message is printed ：

（ About more lotl For connection, please click the big guy blog I refer to ： As long as you can use a computer, you can understand the Internet of things tutorial （ Alibaba cloud +esp8266+ Wechat applet ）
）

3 Errors and corrections

A. The custom subscription topic is not recognized
resolvent ： Click the cloud product circulation of the rule engine to find that the binary format is selected for creating the rule data format , Change it to JSON Format solution
B. Console printing error ：Please do not call Page constructor in files that not listed in"pages" sect
resolvent ： Interface for testing app.js File cannot be added Page({}) There will be reference errors . Add and solve .
C. The applet cannot get the latest test data from the server
resolvent ： The server creates a new API, change sql sentence

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

Get the latest data rendering in your own design View in .