https://www.cnblogs.com/yangfengwu/p/11192639.html
抱歉哈...最近由於做板子,,教程的進度落下了...
這些天總共做了還幾塊板子
首先對當前這個教程的這個板子做了修訂,調整了下布局,替換換了以前用的Micro USB 接口,開關降壓改為MP4462
STM32+Air720H(全網通GPRS)+以太網+422/485+4-20ma采集 https://www.cnblogs.com/yangfengwu/category/1472273.html
后來感覺價格上還是有點高,所以做了另一塊板子
STM32+Air202(2G)+以太網+422/485+兩路繼電器,,實現的功能和上面的一樣,主要是學習下W5500,還有就是遠程和PLC通信控制
我買的PLC已經到了
為了安全性,我選擇的是24V供電的PLC
然后還有個WiFi單路繼電器,10A 和 16A
所有的都是我自己搗鼓的...外殼上面的圖是我用PS做的,然后找的廠家激光打印的.
最后做了一個 移遠的 M26的Mini板
不過確實夠.....
我做的板子漸漸的靠近直接使用..其實主要還是因為我配的教程都是直接應用型的,,,除了公開的基礎的教程
要是還做成學習板的形式,感覺發揮不了更實際的作用....
對了一直沒說我的微信小程序篇具體實現什么功能
1,SmartConfig 實現配網 ,小程序負責綁定
2,微信公眾號點擊按鈕跳轉網頁,網頁里面實現控制設備
3,小程序其中一個呢,直接打開網頁,,就是和上面一樣
4,直接用小程序的API實現MQTT,通信控制
...其實就說這些..
但是講這些之前,,需要先把所有的基礎給大家.....預防看不懂....
打開這個
說一下哈,html和php都提供了實現MQTT的函數,,咱先用html里面的實現
還記得做升級篇的時候,咱用單片機+AT指令實現的MQTT,,當時是去官方下載的封裝包
這次咱也是去下載那個包
https://developer.emqx.io/sdk_tools?category=MQTT_Clients
先用這個
提供了一個完整版的,和一個精簡版的
完整版的支持SSL
咱就用完整版的
拷貝到工程目錄下
其實官方給了例子
因為咱是寫JS實現部分,所以需要寫到,其實網頁最常用(幾乎是必須)的是
html (咱建的這個工程就是個html) 主要是做一些控件展示給用戶看 https://www.cnblogs.com/yangfengwu/p/10947388.html
css (負責html控件的布局,屬性(顏色什么的)) https://www.cnblogs.com/yangfengwu/p/10979101.html
JavaScript 對網頁行為進行編程 http://www.w3school.com.cn/js/js_shiyong.asp
這三個家伙可以直接放到一個html文件里面,,學習測試可以這樣,,一般都是各自建文件,然后在html里面加載
加載 CSS 
加載 JS 
<script>
var client = new Paho.MQTT.Client(location.hostname, Number(location.port), "clientId");// Create a client instance
// set callback handlers
client.onConnectionLost = onConnectionLost;//設置連接斷開回調函數
client.onMessageArrived = onMessageArrived;//設置接收到消息進入的回調函數
client.connect({onSuccess:onConnect});// connect the client 連接...
function onConnect() {// called when the client connects 如果連接上,進入
// Once a connection has been made, make a subscription and send a message.
console.log("onConnect");//控制台打印
client.subscribe("World");//訂閱主題"World"
message = new Paho.MQTT.Message("Hello");//設置發送的消息"Hello"
message.destinationName = "World";//設置發送的主題
client.send(message);//發送消息
}
function onConnectionLost(responseObject) {// called when the client loses its connection
if (responseObject.errorCode !== 0) {//回復的不是1就是2具體看 https://www.eclipse.org/paho/files/jsdoc/Paho.MQTT.Client.html
console.log("onConnectionLost:"+responseObject.errorMessage);
}
}
function onMessageArrived(message) {// called when a message arrives 控制台打印接受的消息
console.log("onMessageArrived:"+message.payloadString);
}
</script>
這里有API介紹
https://www.eclipse.org/paho/files/jsdoc/Paho.MQTT.Client.html
現在改一下IP和端口號
注意哈,走的是MQTT的WebSocket 端口
還要說一下,,不管走的MQTT的什么端口,只要兩個設備的訂閱和發布的主題對應,那么兩個設備就可以通信
說明是可以的
咱現在用調試助手測試
重新啟動下網頁那個
現在連接也沒填什么用戶名和密碼...
給的API可以配置用戶名和密碼
client.connect({onSuccess:onConnect,userName:"yang",password:"11223344"});
測試下
其實可以這樣
var Options={
onSuccess : onConnect,
userName : "yang",
password : "11223344"
};
client.connect(Options);// connect the client 連接...
忘了說一件事情
var 是js里面定義變量用的,定義變量就用var
var Options={
onSuccess : onConnect,
userName : "yang",
password : "11223344"
};
這個呢...只不過是個語法糖而已,你這樣寫進去,它里面肯定是判斷前面的字符串名字,然后獲取 : 號后面的值,然后填寫到MQTT打包
函數里面
其實很多這樣做的,你按照這樣的規定寫,內部解釋器就認你....
還是那句話,如果你早生幾十年,如果你也有幸參與js的工作,或許你有自己的規定
那天我在群里說類似的這句話,有個人,發了個圖片,上面寫着:我就靜靜的看着
唉,他不明白我說這句話的含義,很多知識是人規定的,很多時候你不要糾結於為什么這樣規定,因為很多東西都使用了這么多年了,既然一直
存在着,就一定有存在的意義. 但是請不要把這句話當作借口,該深入了解的知識,還是需要深入了解.
基礎教程的源碼都是公開的,可以看博客閱讀說明下載
這節先這樣,下節接着完善
https://www.cnblogs.com/yangfengwu/p/11200767.html