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.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..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>

然后进行云打包：

app效果图：

时间太急了，内容有很多瑕疵，还请各位学者海涵。

esp8266 从硬件开发到app制作的简单示例相关推荐

借助方便的工具平台，让App制作变简单
随着移动互联网的发展,手机App已经成为人们生活中不可或缺的一部份,App成爆发式增长,各类App从小众到大众,满足着不同人群的需求,低头族也不在仅限于年轻人,微信朋友圈也经常可以看见爸爸妈妈在不停的 ...
java制作报表简单示例
之前已经搭建了最简单的maven项目,现在来实践一下,开发一个简单的报表.我们使用poi工具生成表格. 制作的报表的模板如图: 首先,让我们先在pom.xml中添加相关依赖. <dependen ...
ESP8266 Non-OS SDK 开发之旅基础篇① 初识 Non-OS SDK，史上超级详细手把手教小白20分钟快速搭建SDK软件开发环境，完成第一个例子Hello World！
文章目录 1.前言 2. SDK概述 2.1 SDK使用流程 2.2 ESP8266 HDK -- 硬件开发工具 2.3 ESP8266 SDK -- 软件开发工具包 2.3.1 Non-OS SDK ...
更新一期：智科人第一次参加2022节能减排大赛的经验加前端开发的app源代码（资料区下载）
计算机人参加节能减排大赛可以说是及其不友好的,为什么这么说呢: 节能减排大赛比较针对做一些硬件.小装置这种的专业,比如环工.电气.能动.动力等等那边的专业,在我认识的这么多计算机和外系人来看,综合参考 ...
5分钟开发手机APP
title: date: 2019-04-14 00:05:22 tags: 前提说明各大商店的应用程序已经是琳琅满目,今天终于做个了自己的APP,全程5分钟搞定. 这个是我搞的,比较粗糙,仅生成了 ...
(可远程)ESP8266读DHT11温湿度，APP inventor制作app实时显示
ESP8266读DHT11温湿度传感器------APP inventor实时显示原理讲解 ESP8266读取DHT11 温湿度推送到云端 app inventor 制作app 接收实时数据关键程 ...
ios一个app调起另一个app_电商app开发价格：制作一个电商app需要多少钱？
智能手机的发展,带动了各式各样手机app的市场,现在大家网购大多数都是通过电商app实现,再加上分销.配送等模式发展,自建电商app成为很多企业的选择,电商app开发成本大概多少?制作一个电商app需 ...
vc6开发一个抓包软件_开发一个软件多少钱？传统app开发与0代码app制作方法对比...
开发一个软件多少钱?app开发难吗?app制作需要哪些流程? app开发很难:按照传统的开发方式需要最少5名以上的技术人员,团队配合花费3个月左右的时间才能搞定,成本20万以上. app开发也很简单: ...
《推荐几个常用的H5+APP制作开发工具》
我们已经进入移动互联网时代,而app是移动互联网的载体.传统app开发面临成本高.周期长等问题,因此各类快速生成app的工具层出不穷.企业拥有了app才能实现互联网营销和互联网推广. 一.即速应用即 ...
安卓app开发工具_最新app制作软件汇总：从零开始教你完成app开发
手机app这么火,想不想开发一款自己的app?还在担心不懂技术,app外包价格太高?没关系,这里为大家分享最新app制作软件汇总,包含需求分析.原型设计.UI设计.功能开发.上线等全流程,从零开始教你 ...

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

esp8266 从硬件开发到app制作的简单示例相关推荐

最新文章

热门文章