硬件：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.1\r\n" +
"Host: " + host + "\r\n" +
"Connection: close\r\n\r\n");
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..
<!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>然后进行云打包：
app效果图：
时间太急了，内容有很多瑕疵，还请各位学者海涵。