阿里云IOT入门教程（三）阿里云IOT Studio自建手机App控制Wemos D1 Mini( ESP8266 ）板载灯亮灭

概述

通过阿里云物联网平台提供的IOT Studio服务创建一个手机App，实时控制WeMos D1 Mini板载的亮灭。这个加上继电器就可以控制家中照明灯的亮灭，扩展性很强。

所需材料

Wemos D1 Mini开发板 *1 （9.9元）
智能手机 *1（。。。。每个人都有吧。。。）
合计：9.9元

Mqtt预备知识

参见帖子。。。。（先挖个坑，，，待我回头补…）

hacklab端开发

这个部分就不重复写了参见之前的帖子。这里只给出大致的提纲。。嘿嘿嘿
VSCode+PlatformIo IDE（or hacklab方式）实现Wemos D1 Mini（ESP8266）接入阿里云物联网平台
ESP8266 （Wemos D1 Mini）阿里云IOT入门教程（二）— 如何测试Mqtt数据的发送和接收

硬件端上报属性数据

主要代码

阿里云物联网平台端的设置

创建产品

创建产品性质

创建设备

复制Topic

阿里云IOT Studio设置

创建项目

导入产品

手机端App开发

完成上图的操作后，页面就会跳转到下面的UI开发界面。这个界面主要分为三个区域：
1.区域一：上半部分为整个App的UI页面导航。分为自定义页面、账号模块、首页模块和我的模块四个部分。下半部分为一些UI开发时需要的控件。
2.区域二：为各个页面UI的设计页面。
3.区域三：对区域二中的一些控件进行颜色、大小、数据源的配置。

这里有一点需要特别详细的介绍下。“账号模块”和“我的模块”两个部分开始的时候可以不用修改直接用默认的。"LED灯控制”这个页面是我对“自定义页面”重命名后名字。你第一次进入的时候这个位置可能显示的不是这个，而是“自定义界面”。这个自定义界面很重要。他需要和后面的那个“首页模块”->列表页进行数据关联。后续会有详细的介绍。我因为是先进行了测试才写的教程。所以截图显示的可能并不是你默认打开的样子。请稍加注意。

App UI界面开发

整个App的UI开发，或者说你远程控制这个灯的操作界面是在“自定义页面”完成的。
按照下图所示的顺序。我们从区域一拖拽一个“开关”控件到区域二的界面上。并在区域三进行一些属性的设置。如大小，页面位置和颜色。

从区域一拖拽一个“文本标签”控件到页面上，更改文字为“灯的开关”。对上一步的按钮进行文字说明。

App UI界面与产品进行关联

上一步拖拽到页面上的这个按钮控件主要是用来控制开发板上的板载灯的。所以需要对他的数据源进行配置。使按钮和板载灯关联起来。我们的板载灯其实就是上一个试验中智能灯光产品那个智能插座的属性。按照下图的顺序，打开“数据源配置”页面。

在数据源配置界面，按照之前实验中设置的产品、设备名称进行配置。如果你不是按照我之前实验做的。你就需要关联自己的产品、设备等信息。下面的配图少圈选了一个“格式验证”，你点击这个按钮，可以验证你关联产品是否正确。验证无误后，点击“确定”，完成按钮和设备的关联。

自定义页面和【功能】->列表页的关联

注册用户

接下来我们会将这个程序打包成安装程序，安装程序会有一个登录页面。登录页面会要求输入手机号和密码。所以接下来我们在IOTStudio里注册下用户。方便到时候登录。（你也可以在注册页面进行注册）

打包应用程序

打包安卓apk

在右上角选择“构建”按钮，在弹出的菜单中选择“”Android构建”

选择自己用。

随机生成一个包名。

进入包生成界面。需要等待一点点时间。

IOS构建

IOTStudio提供的ios构建是源代码包。里面的bundleID你就用ios的app开发命名方式自己起一个名字就好比如“com.lalala.ledtest”，版本填写“1.0.0”,就可以下载生成的源码包。但是我把这个源码包发给了IOS开发的朋友，他说运行的时候需要一个三方的插件什么“cocoapods”，但是死活下载不下来这个插件。。。emmm 等我回头研究研究。。。这里先留个坑坑，有会的童鞋务必给我留言哈。。。我好像学习这个部分噻。

安卓apk安装使用

安装apk

通过扫之前生成的二维码或直接下载的方式下载apk，下载好后进行安装。双击打开apk会显示下面的登录页面。在下面的页面用你之前创建的账号密码进行登录即可。

输入账号密码后进入下面所示的界面。点击阿里云LED控制。

进入自定义的界面。打开关闭按钮即可以控制板载的LED灯亮灭。板载LED其实就是一个引脚的高低电平变化。所以这个看似简单的控制其实可以扩展成很多其好玩的设计，不如物联网入门必会项目之----远程浇花。