https://www.cnblogs.com/yangfengwu/p/11148976.html
Sorry...Recently, due to making a board, the progress of the tutorial has fallen...
A total of a few boards have been made these days
First of all, the board of the current tutorial was revised, the layout was adjusted, the Micro USB interface used before was replaced, and the switch step-down was changed to MP4462
STM32+Air720H (full Netcom GPRS)+Ethernet+422/485+4-20ma collection https://www.cnblogs.com/yangfengwu/category/1472273.html
Later I felt that the price was still a bit high, so I made another board
STM32+Air202(2G)+Ethernet+422/485+ two-way relays, the functions implemented are the same as the above, mainly to learn W5500, and remote and PLC communication control
The PLC I bought has arrived
For safety, I chose a PLC with 24V power supply
Then there is a WiFi single-channel relay, 10A and 16A
Everything is done by myself...The picture on the shell is made by PS and laser printed by the manufacturer.
Finally, I made a remote M26 Mini board
But it is enough.....
The board I made is gradually getting closer to direct use.. In fact, the main reason is that the tutorials I have are all directly applied, except for the public basic tutorials.
If it is still made into the form of a learning board, it feels that it will not play a more practical role...
By the way, I have never said what functions my WeChat Mini Program actually implements.
1. SmartConfig realizes network distribution, and the small program is responsible for binding
2. Click the button on the WeChat official account to jump to the web page, and the control device is implemented in the web page
3. One of the small programs, open the web page directly, it is the same as above
4. Directly use the API of the applet to implement MQTT and communication control
...In fact, that's all..
But before I talk about this, I need to give everyone all the basics...to prevent not being able to understand...
Open this
Let’s talk about it, both html and php provide functions to implement MQTT, let's use the implementation in html first
Remember when doing the upgrade article, we used the MQTT implemented by the microcontroller + AT command. At that time, it was the package package that was downloaded from the official website.
This time I also went to download that package
https://developer.emqx.io/sdk_tools?category=MQTT_Clients
Use this first
Provides a full version and a condensed version
Full version supports SSL
Let's use the full version
Copy to the project directory
In fact, the official gave an example
Because we are writing the JS implementation part, we need to write that, in fact, the most commonly used (almost necessary) web page is
html (this project we built is an html) mainly to do some controls to show users https://www.cnblogs.com/yangfengwu/p/10947388.html
css (responsible for the layout and attributes of the html control) https://www.cnblogs.com/yangfengwu/p/10979101.html
JavaScript programming web page behavior http://www.w3school.com.cn/js/js_shiyong.asp
These three guys can be placed directly in an html file, and learning and testing can be done like this. Generally, they build their own files and then load them in html.
Load css 
Load JS 
<script>
var client = new Paho.MQTT.Client(location.hostname, Number(location.port), "clientId");// Create a client instance
// set callback handlers
client.onConnectionLost = onConnectionLost;//Set connection Disconnect callback function
client.onMessageArrived = onMessageArrived;//Set the callback function that receives the message entry
client.connect({onSuccess:onConnect});// connect the client connection...
function onConnect() {// called when the client connects If connected, enter
// Once a connection has been made, make a subscription and send a message.
console.log("onConnect");//The console prints
client.subscribe("World");//Subscribe Subject "World"
message = new Paho.MQTT.Message("Hello");//Set the sent message "Hello"
message.destinationName = "World";//Set the theme sent
client.send(message);//Send message
}
function onConnectionLost(responseObject) {// called when the client loses its connection
if (responseObject.errorCode !== 0) {//The reply is either 1 or 2 depending on https: //www.eclipse.org/paho/files/jsdoc/Paho.MQTT.Client.html
console.log("onConnectionLost:"+responseObject.errorMessage);
}
}
function onMessageArrived(message) {// called when a message arrives The console prints the received message
console.log("onMessageArrived:"+message.payloadString);
}
</script>
API introduction here
https://www.eclipse.org/paho/files/jsdoc/Paho.MQTT.Client.html
Now change the IP and port number
Pay attention, it is the WebSocket port of MQTT
Let me also say that no matter what port of MQTT you go, as long as the subscription of the two devices corresponds to the topic published, then the two devices can communicate
It's okay
Let's use the debugging assistant to test
Restart the next page
I haven't filled in any username and password for the connection now...
The given API can configure the user name and password
client.connect({onSuccess:onConnect,userName:"yang",password:"11223344"});
Under test
Actually it can be like this
var Options={
onSuccess : onConnect,
userName : "yang",
password : "11223344"
};
client.connect(Options);// connect the client 连接...
Forgot to say one thing
var is used to define variables in js, and var is used to define variables
var Options={
onSuccess: onConnect,
userName: "yang",
password: "11223344"
};
This is just a syntactic sugar. If you write it in this way, it must determine the previous string name, and then Get the value after the: number, and then fill it in the MQTT packaging
function.
In fact, many do this. If you write according to this rule, the internal interpreter will recognize you...
or the same sentence, if you were born decades ago, if You are also fortunate to be involved in the work of js, maybe you have your own rules
. I said similar words in the group that day. Someone sent a picture and it said: I just watched it quietly
, he didn't understand I say the meaning of this sentence, a lot of knowledge is stipulated by people, many times you should not worry about why it is stipulated like this, because many things have been used for so many years, since they have always
existed, they must have the meaning of existence. But please don't Using this sentence as an excuse, the knowledge that should be understood in depth still needs to be understood in depth.
The source code of the basic tutorial is public, you can read the instructions in the blog to download this section first, and then complete the next section https://www.cnblogs.com/yangfengwu/p/11198572.html