提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

时至今日，物联网技术及产品已经渗透到了人们生活的方方面面，与物联网相关的比赛和项目也是层出不穷，作为一名开发者，这篇文章旨在记录一下我在准备物联网比赛时的前端设计思路以及如何开发一款适用物联网入门式的app或小程序的路径，希望能对感兴趣的朋友有所帮助。

一、物联网技术的分层结构

物联网的设计开发大概按照上图所示，在比赛中，我们常将项目任务分为硬件（功能配置），机械设计和前后端，在分立完成各模块后再挂载到云平台进行后续的调试及产品迭代。

二、应用层设计路线

1.开发前言

进行应用的设计，首先要做的就是可视化界面的设计，也就是用户所能看到的部分，所谓应用层也就是物联网项目呈现数据或发送数据的地方，用户可以接收来自硬件设备的数据，也能够下发指令给设备。
设计之前，我们需要对整个项目逻辑有一个大体的认识，接着再确定一条开发路径，确定需求是app,小程序或是网页，需要在哪些平台上运行，有何种限制，开发之前，需要对整个逻辑有一定的认识。

2.界面设计

我推荐使用uniapp开发app或小程序的路径，uniapp是一款跨平台的开发工具，开发者制作的app能在多平台运行测试，也能发布在手机应用商店，同时uniapp也内置了许多组件和调试方式，便于开发者的开发。
uniapp的开发基于vue的框架，我们需要掌握前端web开发方式，界面设计时需要对html,css较为熟悉，调整好各个模块的位置和大小，推荐先设计主干再细化枝叶的方式，先html再css。
以下是我设计的app基础界面，可以自行设计ui，美化界面

3.应用上云（获取云端数据）

连接云端前我们还需要做后端的数据库，后端是存放数据的地方，可以制作一个MYSQL库管理数据接收逻辑和历史数据，存放的数据可以呈现在前端。
完成app的基础配置后，需要与云平台建立连接，需要先在云平台获取必要的连接参数，如api接口地址，发送和接收数据的格式，接收数据的逻辑，账户的相关信息。这些参数的配置与查找与云平台相关，我所使用的是华为云平台，之后会专门讲解如何查找和调试接口。

4.app功能调试和版本发布

app挂载到云平台上后，如果硬件设备还未完成，可以先使用MQTT调试器进行功能调试，MQTT是一种网络协议，常用于物联网项目。使用调试器模拟设备发布和接收数据，观察云平台和app前端是否能接收到数据，这样就完成了前期调试。
app制作完成后，想要在真机上运行，需要使用uniapp的打包功能（注意使用自有证书，确保运行时的安全性），具体步骤包括证书生成，设置包名，运行的环境等。

完成上述步骤后，也就实现了app的基础制作。

---

总结

通过这篇文章，能够对物联网中的前端制作有一个大体的了解，文中提供了一条可行的开发路径，通过该路径能够完成一个基本的物联网app的制作，之后的文章将会详细讲述app的制作过程和我学习的一些心得，希望能给大家带来帮助