天天看點

ESP8266開發筆記(五)

Web配置修改wifi接入點:

主要流程是:

  1. 往8266中寫入一個httpserver;
  2. 8266開放熱點,外界連接配接改熱點;
  3. 将預先寫好的靜态網頁界面放入裝置中;
  4. 裝置開始監聽外界接入情況,當外界通路其IP位址時,将靜态頁面發出
  5. 使用者在靜态界面配置相關資訊,通過靜态頁面傳回,配置上網。

由于本人沒怎麼接觸過前端知識,故隻能借用大神寫的一個小型TcpServer檔案,搭配靜态界面。

一、初始化檔案

程式:(init.lua)
wifi.setmode(wifi.STATIONAP)
cfg={}
cfg.ssid="8266" 
cfg.pwd="00000000"
wifi.ap.config(cfg)
wifi.sta.autoconnect(1)
dofile('HttpServer.lua')
gpio.mode(4,gpio.OUTPUT)
gpio.write(4,0)
httpServer:use('/config', function(req, res)
    if req.query.ssid ~= nil and req.query.pwd ~= nil then
        print(req.query.ssid..req.query.pwd)
        config={}
        config.ssid=req.query.ssid
        config.pwd=req.query.pwd
        wifi.sta.config(config)
        
    end
     gpio.write(4,1-gpio.read(4))
     res:send('<head><meta charset="UTF-8"><title>Terminal</title></head><h1>WiFi ssid:'..req.query.ssid..',wait for the light to change</h1>')     --編譯器不支援中文,不要加中文,否則将産生亂碼
end)
httpServer:listen(80) 
           

二、網頁伺服器:(借用了大神的httpserver.lua)

https://github.com/wangzexi/NodeMCU-HTTP-Server/blob/master/httpServer.lua

下載下傳裡面的httpserver.lua檔案即可

三、搭配一個靜态網頁

<!DOCTYPE html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>配置終端</title>
</head>

<body style="text-align:center;background:#f8fffbb2;">
    <h1>配置頁面</h1>
    <form action="/config" method="get">
        <label>WiFi</label>
        <input type="text" name="ssid" />
        <br />
        <label>密碼</label>
        <input type="password" name="pwd" />
        <br />
        <input type="submit" value="确認" style="background:#678df9;height:40px;width:60px;border-radius:5px;border:none;outline:none;"/>
    </form>
    <p style="max-width:50vw;margin:auto;">注意:由于NodeMCU記憶體很小,附近熱點過多時,掃描熱點會造成記憶體不足自動重新開機。請手動輸入WIFI資訊進行配置。</p>
</body>
<style>
    input{
        margin-bottom:30px;
    }
</style>
</html>
           

将三個檔案燒錄進8266中,等待裝置準備完成,用電腦或者手機連接配接裝置開放出的熱點,在網頁上通路IP:192.168.4.1,即可實作網頁切換連接配接wifi。

ESP8266開發筆記(五)