esp8266 从硬件开发到app制作的简单示例

100 阅读 0 评论 66 点赞

我是靠谱客的博主无限巨人，最近开发中收集的这篇文章主要介绍esp8266 从硬件开发到app制作的简单示例，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

硬件：esp8266、传感器

app开发：HbuilderX

假设现在有一个项目，内容是用传感器监测数据，然后用手机app接收数据并显示。

第一步：esp8266联网，获取传感器数据，发送数据至中转网站（以dweet举例）

#include <ESP8266WiFi.h>
const char* ssid     = "WiFi账号";
const char* password = "WiFi密码";
const char* host = "dweet.io";
void setup() {  
  Serial.begin(115200);
  delay(10);
  Serial.println();
  Serial.println();
  Serial.print("Connecting to ");
  Serial.println(ssid);  
  WiFi.begin(ssid, password);  
  while (WiFi.status() != WL_CONNECTED) {
    delay(500);
    Serial.print(".");
  }

  Serial.println("");
  Serial.println("WiFi connected");  
  Serial.println("IP address: ");
  Serial.println(WiFi.localIP());
}
void loop() {
  delay(5000);
  Serial.print("connecting to");
  Serial.println(host);
  WiFiClient client;
  const int httpPort=80;
  if(!client.connect(host,httpPort))
  {
    Serial.println("connection failed");
    return;    
    }
    Serial.print("Requesting URL:");
    client.print(String("GET /dweet/for/自定义标识名?数据名1=") 
                                                      + "数据1" + 
                                                      "&数据名2=" + "数据2" +
                                                      " HTTP/1.1rn" +
                                                       "Host: " + host + "rn" + 
                                                       "Connection: closernrn");
    delay(10);
    unsigned long timeout=millis();
    while(client.available()==0)
    {
      if(millis()-timeout>5000)
      {
        Serial.println(">>>Client Timeout!");
        client.stop();
        return;
        }        
      }
      while(client.available())
      {
        String line=client.readStringUntil('r');
        Serial.print(line);
        }
      Serial.println();
      Serial.println("closing connection.");
  
}

其中自定义标识名一定要符合网址的起名标准，数据名和数据一定要是英语，发送的数据在网页上将以JSON格式显示。

然后将代码编译并烧进开发板，等开发板连接WiFi，登录网址就可以看到自己发送的数据了。这里我上传了两个数据，温度和湿度

https://dweet.io/get/latest/dweet/for/自定义标识名

因为网页显示的数据是JSON格式的，所以开发app的时候就要进行数据加工。

考虑到开发效率，本实验用HbuilderX进行app开发。数据利用jQuery的AJAX爬取。菜鸟教程：jQuery – AJAX get() 和 post() 方法 | 菜鸟教程jQuery - AJAX get() 和 post() 方法 jQuery get() 和 post() 方法用于通过 HTTP GET 或 POST 请求从服务器请求数据。 HTTP 请求：GET vs. POST 两种在客户端和服务器端进行请求-响应的常用方法是：GET 和 POST。 GET - 从指定的资源请求数据 POST - 向指定的资源提交要处理的数据 GET 基本上用于从服务器获得（取回）数据。注释：G..https://www.runoob.com/jquery/jquery-ajax-get-post.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Gensokyo</title>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
    </script>
    <script>
        $(document).ready(function(){
            $("button").click(function(){
                $.get("https://dweet.io/get/latest/dweet/for/自定义标识名",function(data,status){
                    var i=0;
                    for(var key in data){
                        i++;
                        if(i===4){
                            var text=data[key];
                            var j=0;
                            for(var t in text){
                                var text2=text[t];
                                for(var t2 in text2){
                                    j++;
                                    if(j<=2){
                                        // console.log(text2[t2]);
                                        document.getElementById("data"+j.toString()).innerHTML=text2[t2];
                                    }
                                    else {
                                        var k=2;
                                        var text3=text2[t2];
                                        for(var t3 in text3){
                                            k++;
                                            // console.log(text3[t3]);
                                            document.getElementById("data"+k.toString()).innerHTML=text3[t3];
                                        }
                                    }
                                }
                                // document.getElementById("data").innerHTML=text[t];
                            }
                        }

                    }
                });
            });
        });
    </script>
</head>
<body style="text-align: center;background-color: aquamarine;margin-top: 40%;font-size: 5em;font-family: "宋体";">
<p id="data1">NULL</p>
<p id="data2">NULL</p>
<nobr>
    <p style="display: inline">室内温度: </p>
    <p id="data3" style="display: inline">NULL</p>
    <p style="display: inline">℃</p>
</nobr>
<div >
    <p style="display: inline">室内湿度: </p>
    <p id="data4" style="display: inline">NULL</p>
    <p style="display: inline">H</p>
</div>
<br>
<button style="width: 300px;height: 100px;font-size: 40px;">更新数据</button>

</body>
</html>

然后进行云打包：

watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5oWV5bed5q2j6I2j,size_20,color_FFFFFF,t_70,g_se,x_16