基于Cordova的风扇遥控APP的研究与实现

来源:用户上传      作者:

　　摘  要： 基于Cordova移动框架设计并开发了一款可跨平台的用于远程操控电风扇的遥控类手机APP，它可有效地减少遥控器堆积、难找的尴尬。APP的开发使用了主流的HTML5、原生JS、CSS3等Web前端技术，不仅实现了遥控器的功能，而且使其操作简单;还使用了响应式 Material Design 框架，使得APP的界面美观。
　　关键词： Cordova; 遥控类APP; Web; 跨平台
　　中图分类号：TP393          文献标识码：A     文章编号：1006-8228（2020）03-35-05
　　Research and implementation of fan remote control APP using Cordova framework
　　Zhou Changshuang， Chen Yu'ang， FangDiqing， Yang Xiaodong
　　（School of Information & Electronic Engineering， Zhejiang Gongshang University， Hangzhou， Zhejiang 310018， China）
　　Abstract： Using Cordova mobile framework， a cross platform remote control mobile phone APP for remote control of electric fans is designed and developed， which can effectively reduce the embarrassment of remote controller accumulation and hard to be found. The development of APP uses the mainstream Web front-end technologies such as HTML5， native JS and CSS3， which not only realizes the functions of remote controller， but also makes its operation simple; and the responsive Material Design framework is also used to make the APP interface beautiful.
　　Key words： Cordova; remote control APP; Web; cross platform
　　0 引言
　　電风扇作为一款传统家具，凭借其低廉的价格、方便的使用方式、低碳节能等优势经久不衰，因此电风扇仍具有十分广阔的市场。
　　传统的电风扇已经难以满足现在人们生活上的需求，例如很多电风扇的设计没有遥控功能，当前市面上的几款附带遥控功能的电风扇也是使用遥控机来控制，这并未与如今迅速发展的科技联系上，忽略了使用人群更广的终端APP的功能。此外，随着智能家居的逐步普及，传统的红外遥控器的缺点日益凸显。特别是当家庭中出现大量各种型号、各种功能的红外遥控器时，就会大大降低用户体验。
　　在现代化智能家居系统中，将遥控器与其他工具合并，减少独立的遥控器数量，成为一个新的方向。电扇遥控APP便应运而生。
　　1 Apache Cordova框架概述
　　Apache Cordova是一个开源移动开发框架，它允许您使用标准的Web技术，如HTML5，CSS3和JavaScript进行跨平台开发，避免每个移动平台本机开发语言[1]。应用程序在针对每个平台的包装内执行。Apache Cordova有以下几个极大的优势：①它提供了每个移动应用程序所需的核心组件，这些组件将用于创建应用程序的基础，所以我们可以花更多的时间来实现我们自己的逻辑;②支持真机调试，并且它为构建混合移动应用程序提供了一个平台，因此我们可以开发一个应用程序，在不同的移动平台IOS，Android上使用。此外，它提供的API将用于实现本地移动功能至JavaScript应用程序，因此我们不需要学习平台特定的编程语言。无需购置域名、服务器等其他服务。
　　2 系统功能模块设计
　　本文设计的电扇遥控APP有两个界面，六个功能，分别是：电扇选择界面，含有搜索电扇功能;电扇操控界面，含有开关、风速设置、摆头、吹风模式切换定时启闭等功能。下面详细介绍该APP两个界面的主要功能（系统模块图见图1）。
　　2.1 电扇选择界面
　　该页面包含一个主要功能，即搜索附近可用电扇。①用户可通过下拉刷新或点击右上角加号，即可发现身边可操控的电扇。电扇的默认名字为“新风扇-num”（其中num为已添加的电扇数）。②一经刷新，LocalStorage就会通过setItem（）方法将搜索到的电扇的相关信息以及更改过之后的ul标签保存至本地存储内。因此在退出APP后重新进入，不需要再次刷新获取附近风扇信息。③在对应的电扇区块左滑，右侧就会跳出“删除”按钮，点击可以删除电扇。④点击对应电扇，即可进入功能选择界面。
　　2.2 电扇操控界面
　　该页面实现对电扇功能的操控。电扇的名字与用户默认设置均会自动保存在后台数据库中。①改变吹风模式。共有三种模式可供选择：“正常风”、“自然风”、“睡眠风”。“睡眠风”由强自然风开始，逐渐减小风的强度，符合人的生理需求。避免长时间强风带来的头痛、鼻塞等反应。②开关摆头功能。摆头模式具体功能视不同型号电风扇而定（摆头或旋转扇叶）。③预设置开启与关闭时间。设置时间范围为0～6小时，每次点击的增加0.5小时时间。视该电扇当前开关状态决定使用“定时关闭”功能还是“定时开启”功能。④调节风速。移动滑槽改变风速。档位数视不同风扇而定。⑤修改电扇命名。方便在今后使用时寻找对应的电扇。⑥点击左上返回图标返回电扇选择列表。 　　2.3 系统效果图展示
　　当用户下载完成后，系统将跳转到首页（电扇选择页面）。用户可根据导航栏轻松地掌握此APP的使用方法。APP的主要界面如图2所示[3]。
　　3 系统主要技术实现
　　3.1 开发环境的搭建
　　3.1.1 Node.js环境的配置
　　下载并安装Node.js（官方下载地址：https：//nodejs.org/en/），目前Node.js版本已经集成了npm，安装完成后打开在控制台依次输入node-v、npm-v，控制台会打印出Node与npm相应的版本号，说明已经安装成功[2]。
　　3.1.2 安装Android SDK和XCode
　　对于Android和IOS平台，需要在机器上分别安装Android SDK和XCode并且设置好相应的环境变量。
　　3.1.3 Cordova的环境配置
　　在Node与NPM成功安装后，在控制台输入 npm install -g cordova来安装Cordova。在Cordova 安装完成后，可以在控制台输入cordova -v来查看版本，若有版本号打印出来说明已经安装成功。
　　3.2 Web前端技术
　　Web前端技术主要有HTML语言，CSS，JavaScript。HTML是一种标记语言，能够实现Web页面并在浏览器中显示。HTML5作为HTML的最新版本，引入了多项新技术，大大增强了对于应用的支持能力，使得Web技术不再局限于呈现网页内容。是前端的基础。
　　CSS是级联样式表，是用来进行网页风格设计的。级联样式表可以使人更能有效地控制网页外观，可以扩充精确指定网页元素位置，外观以及创建特殊效果的能力。
　　JavaScript是一种由Netscape的LiveScript发展而来的原型化继承的面向对象的动态类型的区分大小写的客户端脚本语言，用来给HTML页面增加动态功能。是前端的核心。
　　我们通过Cordova自带的插件对手机的后退键进行了修改，当APP处于风扇操控界面时，按下手机的后退键会回退至风扇选择界面，而在风扇选择界面按下后退键则会退出APP。具体代码如下所示：
　　//点击手机后退键返回至索引页：首先先取消了后退键自带的效果，不然会导致APP的退出。隐藏该页并显示风扇选择页来完成页面的切换，并且移除后退键的监听器。
　　3.3 基于Cordova存储API的数据存储功能的实现
　　移动应用离不开数据，有些数据之间的关系比较复杂，如果没有远程服务器的支持，这些数据不能持久保存在用户的设备上。而HTML5的Web Storage API中提供了两种客户端存储数据的新方法：Local Storage和Session Storage。其中Local Storage为本地存储，相当于一个大型的Cookie 并且Local Storage 并没有时间的限制，即使在程序升级后也不会消失，能够满足我们持久性的需求，有利于实现本地的缓存、搜索等功能[4]。同时，现在几乎所有的移动设备都已经具备对Local storage的直接或间接支持。Cordova在存储时通过localStorage.setItem（）方法来将数据添加到本地存储，而通过localStorage.getItem（）方法来获取本地存储。
　　该APP中有多处应用本地存储对象。利用本地缓存机制能够大大提高APP完整性，保证用户每次打开APP不需要重新刷新获得之前加载过的风扇信息。在本地有缓存数据且不需要更新的前提下，系统可以迅速作出响应。其实现的逻辑流程如图3所示。
　　用户在索引页面（即默认页面），可以通过下拉刷新或者右上角的“+”符号，获取最新的附近的风扇，如果刚刷新出来的风扇之前尚未保存信息，系统将会将该新风扇的信息缓存到本地，下一次打开系统时，系统会获取本地缓存的内容并置于索引页上。
　　前端通过JS将刷新得到的风扇信息动态添加到索引页上的ul标签内，同时并调用localStorage.setItem（）方法将ul信息以及风扇的命名数组以JSON格式保存至本地缓存中，而下一次打开系统时，JS会首先通过localStorage.getItem（）方法获取之前存储的ul对象及风扇命名数组，从而获取之前添加的风扇信息[5]。但是该方法有一个不足：通过JS动态添加的li元素在重新加载后，需要重新为其设计监听器。
　　存储数据功能实现的部分核心代码如下：
　　首先是完成风扇的添加，随后再将添加了风扇的ul标签的innerHTML以及FanNames数组保存至LocalStorage内。其中需要注意的是，FanNames保存需要转化为JSON格式的字符串。注释中有具体说明。
　　以下为获取本地存储的核心代码：
　　为了确保获取本地存储的时效性，将这段代码放置JS文件中的app（）方法的头部。因为FanNames和num的数据类型与LocalStorage存储的类型不同，所以需要先通过转化才能赋值。
　　//获取之前存储的风扇信息：因为LocalStorage保存的数据是字符串类型。所以在取回风扇信息时，要进行非null判断以及通过JSON.parse（）方法和Number（）方法将字符串转化成数组和数字类型。
　　3.4 基于Materialize框架的界面实现
　　Materialize是一个使用CSS，JavaScript和HTML创建的UI组件库。实现UI组件有助于创建更快，更美观，更灵敏的网站。它的灵感来自Google Material Design。它具有响应式设计，以便使用Materialize创建的网站可以适合任何屏幕尺寸并且能根据设备大小重新设计自己。它还具有可扩展的优点，支持阴影和粗体颜色。它在各种平台和设备上保持一致。最关键的是，它的设计考虑到了添加新的CSS规则比覆盖现有的CSS规则容易得多。我们设计的APP的颜色基本都是选用materialize内已配好的颜色，使我们不会浪费时间在调色上，只要根据陈列出的颜色选用其相应的class就行。除此之外，我们还调用了其预加载组件中的圆形进度。
　　以下为Materialize关于预加载组件功能的核心代码：
　　//设置预加载组件的大小以满足不同用户的需求。当该组件工作时，然后设置animation的动画名称属性为container-rotate，其效果为360度旋转。时间属性为1568ms，动画的速度曲线属性为linear，即从头到尾速度是一致的，动画的播放次数为infinite，即无限次。而我们APP通过显示隐藏该组件来使得其动画只有几次。
　　4 结束语
　　針对本次开发，我们利用Cordova 跨平台框架，以其通用流行的“HTML+CSS+JS”手段，改变了传统开发方式的局限和“不灵活”，实现了开发的通用、简便、高效。我们所开发的风扇遥控APP“E遥控”不仅能添加风扇信息还可以通过重命名来区分各风扇，还能删除不想要的风扇信息来简化界面。但是我们系统的一些还需要进一步完善，例如实现登录功能并将风扇信息上传至数据库中以达到不同手机之间共享风扇信息的目的这是我们需要进一步攻克的难题，与风扇的距离，因Cordova只能获取到地理位置的经纬度，而得不到实现，这需要等待Cordova关于这方面的升级来解决。
　　参考文献（References）：
　　[1] 怯肇乾.Cordova-APP软件及其插件开发[J].电脑编程技巧与维护，2019.2.
　　[2] 周玉轩，杨絮，鲍富成，朱一峰.CordovaNodeJS混合式物联网信息服务系统[J].计算机工程与应用，2017.
　　[3] 叶帆帆，徐城璋，王利兴，胡宸瑄，杨晓东. 基于APICloud的家居设计APP的研究与实现[J].计算机时代，2016.5.
　　[4] 占华林，薛志强，阮修湘.智能家居控制APP的开发[J].电子测试，2017.11.
　　[5] 华颖.基于Web和Android的智能家居控制系统的设计与实现[J].广西大学，2018.6.
转载注明来源:https://www.xzbu.com/8/view-15150351.htm