周昌爽 陳昱卬 方狄慶 楊曉東

摘 ?要： 基于Cordova移動(dòng)框架設(shè)計(jì)并開發(fā)了一款可跨平臺(tái)的用于遠(yuǎn)程操控電風(fēng)扇的遙控類手機(jī)APP，它可有效地減少遙控器堆積、難找的尷尬。APP的開發(fā)使用了主流的HTML5、原生JS、CSS3等Web前端技術(shù)，不僅實(shí)現(xiàn)了遙控器的功能，而且使其操作簡(jiǎn)單;還使用了響應(yīng)式 Material Design 框架，使得APP的界面美觀。

關(guān)鍵詞： Cordova; 遙控類APP; Web; 跨平臺(tái)

中圖分類號(hào)：TP393 ? ? ? ? ?文獻(xiàn)標(biāo)識(shí)碼：A ? ? 文章編號(hào)：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 引言

電風(fēng)扇作為一款傳統(tǒng)家具，憑借其低廉的價(jià)格、方便的使用方式、低碳節(jié)能等優(yōu)勢(shì)經(jīng)久不衰，因此電風(fēng)扇仍具有十分廣闊的市場(chǎng)。

傳統(tǒng)的電風(fēng)扇已經(jīng)難以滿足現(xiàn)在人們生活上的需求，例如很多電風(fēng)扇的設(shè)計(jì)沒(méi)有遙控功能，當(dāng)前市面上的幾款附帶遙控功能的電風(fēng)扇也是使用遙控機(jī)來(lái)控制，這并未與如今迅速發(fā)展的科技聯(lián)系上，忽略了使用人群更廣的終端APP的功能。此外，隨著智能家居的逐步普及，傳統(tǒng)的紅外遙控器的缺點(diǎn)日益凸顯。特別是當(dāng)家庭中出現(xiàn)大量各種型號(hào)、各種功能的紅外遙控器時(shí)，就會(huì)大大降低用戶體驗(yàn)。

在現(xiàn)代化智能家居系統(tǒng)中，將遙控器與其他工具合并，減少獨(dú)立的遙控器數(shù)量，成為一個(gè)新的方向。電扇遙控APP便應(yīng)運(yùn)而生。

1 Apache Cordova框架概述

Apache Cordova是一個(gè)開源移動(dòng)開發(fā)框架，它允許您使用標(biāo)準(zhǔn)的Web技術(shù)，如HTML5，CSS3和JavaScript進(jìn)行跨平臺(tái)開發(fā)，避免每個(gè)移動(dòng)平臺(tái)本機(jī)開發(fā)語(yǔ)言[1]。應(yīng)用程序在針對(duì)每個(gè)平臺(tái)的包裝內(nèi)執(zhí)行。Apache Cordova有以下幾個(gè)極大的優(yōu)勢(shì)：①它提供了每個(gè)移動(dòng)應(yīng)用程序所需的核心組件，這些組件將用于創(chuàng)建應(yīng)用程序的基礎(chǔ)，所以我們可以花更多的時(shí)間來(lái)實(shí)現(xiàn)我們自己的邏輯;②支持真機(jī)調(diào)試，并且它為構(gòu)建混合移動(dòng)應(yīng)用程序提供了一個(gè)平臺(tái)，因此我們可以開發(fā)一個(gè)應(yīng)用程序，在不同的移動(dòng)平臺(tái)IOS，Android上使用。此外，它提供的API將用于實(shí)現(xiàn)本地移動(dòng)功能至JavaScript應(yīng)用程序，因此我們不需要學(xué)習(xí)平臺(tái)特定的編程語(yǔ)言。無(wú)需購(gòu)置域名、服務(wù)器等其他服務(wù)。

2 系統(tǒng)功能模塊設(shè)計(jì)

本文設(shè)計(jì)的電扇遙控APP有兩個(gè)界面，六個(gè)功能，分別是：電扇選擇界面，含有搜索電扇功能;電扇操控界面，含有開關(guān)、風(fēng)速設(shè)置、擺頭、吹風(fēng)模式切換定時(shí)啟閉等功能。下面詳細(xì)介紹該APP兩個(gè)界面的主要功能（系統(tǒng)模塊圖見圖1）。

2.1 電扇選擇界面

該頁(yè)面包含一個(gè)主要功能，即搜索附近可用電扇。①用戶可通過(guò)下拉刷新或點(diǎn)擊右上角加號(hào)，即可發(fā)現(xiàn)身邊可操控的電扇。電扇的默認(rèn)名字為“新風(fēng)扇-num”（其中num為已添加的電扇數(shù)）。②一經(jīng)刷新，LocalStorage就會(huì)通過(guò)setItem（）方法將搜索到的電扇的相關(guān)信息以及更改過(guò)之后的ul標(biāo)簽保存至本地存儲(chǔ)內(nèi)。因此在退出APP后重新進(jìn)入，不需要再次刷新獲取附近風(fēng)扇信息。③在對(duì)應(yīng)的電扇區(qū)塊左滑，右側(cè)就會(huì)跳出“刪除”按鈕，點(diǎn)擊可以刪除電扇。④點(diǎn)擊對(duì)應(yīng)電扇，即可進(jìn)入功能選擇界面。

2.2 電扇操控界面

該頁(yè)面實(shí)現(xiàn)對(duì)電扇功能的操控。電扇的名字與用戶默認(rèn)設(shè)置均會(huì)自動(dòng)保存在后臺(tái)數(shù)據(jù)庫(kù)中。①改變吹風(fēng)模式。共有三種模式可供選擇：“正常風(fēng)”、“自然風(fēng)”、“睡眠風(fēng)”。“睡眠風(fēng)”由強(qiáng)自然風(fēng)開始，逐漸減小風(fēng)的強(qiáng)度，符合人的生理需求。避免長(zhǎng)時(shí)間強(qiáng)風(fēng)帶來(lái)的頭痛、鼻塞等反應(yīng)。②開關(guān)擺頭功能。擺頭模式具體功能視不同型號(hào)電風(fēng)扇而定（擺頭或旋轉(zhuǎn)扇葉）。③預(yù)設(shè)置開啟與關(guān)閉時(shí)間。設(shè)置時(shí)間范圍為0～6小時(shí)，每次點(diǎn)擊的增加0.5小時(shí)時(shí)間。視該電扇當(dāng)前開關(guān)狀態(tài)決定使用“定時(shí)關(guān)閉”功能還是“定時(shí)開啟”功能。④調(diào)節(jié)風(fēng)速。移動(dòng)滑槽改變風(fēng)速。檔位數(shù)視不同風(fēng)扇而定。⑤修改電扇命名。方便在今后使用時(shí)尋找對(duì)應(yīng)的電扇。⑥點(diǎn)擊左上返回圖標(biāo)返回電扇選擇列表。

2.3 系統(tǒng)效果圖展示

當(dāng)用戶下載完成后，系統(tǒng)將跳轉(zhuǎn)到首頁(yè)（電扇選擇頁(yè)面）。用戶可根據(jù)導(dǎo)航欄輕松地掌握此APP的使用方法。APP的主要界面如圖2所示[3]。

3 系統(tǒng)主要技術(shù)實(shí)現(xiàn)

3.1 開發(fā)環(huán)境的搭建

3.1.1 Node.js環(huán)境的配置

下載并安裝Node.js（官方下載地址：https：//nodejs.org/en/），目前Node.js版本已經(jīng)集成了npm，安裝完成后打開在控制臺(tái)依次輸入node-v、npm-v，控制臺(tái)會(huì)打印出Node與npm相應(yīng)的版本號(hào)，說(shuō)明已經(jīng)安裝成功[2]。

3.1.2 安裝Android SDK和XCode

對(duì)于Android和IOS平臺(tái)，需要在機(jī)器上分別安裝Android SDK和XCode并且設(shè)置好相應(yīng)的環(huán)境變量。

3.1.3 Cordova的環(huán)境配置

在Node與NPM成功安裝后，在控制臺(tái)輸入 npm install -g cordova來(lái)安裝Cordova。在Cordova 安裝完成后，可以在控制臺(tái)輸入cordova -v來(lái)查看版本，若有版本號(hào)打印出來(lái)說(shuō)明已經(jīng)安裝成功。

3.2 Web前端技術(shù)

Web前端技術(shù)主要有HTML語(yǔ)言，CSS，JavaScript。HTML是一種標(biāo)記語(yǔ)言，能夠?qū)崿F(xiàn)Web頁(yè)面并在瀏覽器中顯示。HTML5作為HTML的最新版本，引入了多項(xiàng)新技術(shù)，大大增強(qiáng)了對(duì)于應(yīng)用的支持能力，使得Web技術(shù)不再局限于呈現(xiàn)網(wǎng)頁(yè)內(nèi)容。是前端的基礎(chǔ)。

CSS是級(jí)聯(lián)樣式表，是用來(lái)進(jìn)行網(wǎng)頁(yè)風(fēng)格設(shè)計(jì)的。級(jí)聯(lián)樣式表可以使人更能有效地控制網(wǎng)頁(yè)外觀，可以擴(kuò)充精確指定網(wǎng)頁(yè)元素位置，外觀以及創(chuàng)建特殊效果的能力。

JavaScript是一種由Netscape的LiveScript發(fā)展而來(lái)的原型化繼承的面向?qū)ο蟮膭?dòng)態(tài)類型的區(qū)分大小寫的客戶端腳本語(yǔ)言，用來(lái)給HTML頁(yè)面增加動(dòng)態(tài)功能。是前端的核心。

我們通過(guò)Cordova自帶的插件對(duì)手機(jī)的后退鍵進(jìn)行了修改，當(dāng)APP處于風(fēng)扇操控界面時(shí)，按下手機(jī)的后退鍵會(huì)回退至風(fēng)扇選擇界面，而在風(fēng)扇選擇界面按下后退鍵則會(huì)退出APP。具體代碼如下所示：

//點(diǎn)擊手機(jī)后退鍵返回至索引頁(yè)：首先先取消了后退鍵自帶的效果，不然會(huì)導(dǎo)致APP的退出。隱藏該頁(yè)并顯示風(fēng)扇選擇頁(yè)來(lái)完成頁(yè)面的切換，并且移除后退鍵的監(jiān)聽器。

3.3 基于Cordova存儲(chǔ)API的數(shù)據(jù)存儲(chǔ)功能的實(shí)現(xiàn)

移動(dòng)應(yīng)用離不開數(shù)據(jù)，有些數(shù)據(jù)之間的關(guān)系比較復(fù)雜，如果沒(méi)有遠(yuǎn)程服務(wù)器的支持，這些數(shù)據(jù)不能持久保存在用戶的設(shè)備上。而HTML5的Web Storage API中提供了兩種客戶端存儲(chǔ)數(shù)據(jù)的新方法：Local Storage和Session Storage。其中Local Storage為本地存儲(chǔ)，相當(dāng)于一個(gè)大型的Cookie 并且Local Storage 并沒(méi)有時(shí)間的限制，即使在程序升級(jí)后也不會(huì)消失，能夠滿足我們持久性的需求，有利于實(shí)現(xiàn)本地的緩存、搜索等功能[4]。同時(shí)，現(xiàn)在幾乎所有的移動(dòng)設(shè)備都已經(jīng)具備對(duì)Local storage的直接或間接支持。Cordova在存儲(chǔ)時(shí)通過(guò)localStorage.setItem（）方法來(lái)將數(shù)據(jù)添加到本地存儲(chǔ)，而通過(guò)localStorage.getItem（）方法來(lái)獲取本地存儲(chǔ)。

該APP中有多處應(yīng)用本地存儲(chǔ)對(duì)象。利用本地緩存機(jī)制能夠大大提高APP完整性，保證用戶每次打開APP不需要重新刷新獲得之前加載過(guò)的風(fēng)扇信息。在本地有緩存數(shù)據(jù)且不需要更新的前提下，系統(tǒng)可以迅速作出響應(yīng)。其實(shí)現(xiàn)的邏輯流程如圖3所示。

用戶在索引頁(yè)面（即默認(rèn)頁(yè)面），可以通過(guò)下拉刷新或者右上角的“+”符號(hào)，獲取最新的附近的風(fēng)扇，如果剛刷新出來(lái)的風(fēng)扇之前尚未保存信息，系統(tǒng)將會(huì)將該新風(fēng)扇的信息緩存到本地，下一次打開系統(tǒng)時(shí)，系統(tǒng)會(huì)獲取本地緩存的內(nèi)容并置于索引頁(yè)上。

前端通過(guò)JS將刷新得到的風(fēng)扇信息動(dòng)態(tài)添加到索引頁(yè)上的ul標(biāo)簽內(nèi)，同時(shí)并調(diào)用localStorage.setItem（）方法將ul信息以及風(fēng)扇的命名數(shù)組以JSON格式保存至本地緩存中，而下一次打開系統(tǒng)時(shí)，JS會(huì)首先通過(guò)localStorage.getItem（）方法獲取之前存儲(chǔ)的ul對(duì)象及風(fēng)扇命名數(shù)組，從而獲取之前添加的風(fēng)扇信息[5]。但是該方法有一個(gè)不足：通過(guò)JS動(dòng)態(tài)添加的li元素在重新加載后，需要重新為其設(shè)計(jì)監(jiān)聽器。

存儲(chǔ)數(shù)據(jù)功能實(shí)現(xiàn)的部分核心代碼如下：

首先是完成風(fēng)扇的添加，隨后再將添加了風(fēng)扇的ul標(biāo)簽的innerHTML以及FanNames數(shù)組保存至LocalStorage內(nèi)。其中需要注意的是，F(xiàn)anNames保存需要轉(zhuǎn)化為JSON格式的字符串。注釋中有具體說(shuō)明。

以下為獲取本地存儲(chǔ)的核心代碼：

為了確保獲取本地存儲(chǔ)的時(shí)效性，將這段代碼放置JS文件中的app（）方法的頭部。因?yàn)镕anNames和num的數(shù)據(jù)類型與LocalStorage存儲(chǔ)的類型不同，所以需要先通過(guò)轉(zhuǎn)化才能賦值。

//獲取之前存儲(chǔ)的風(fēng)扇信息：因?yàn)長(zhǎng)ocalStorage保存的數(shù)據(jù)是字符串類型。所以在取回風(fēng)扇信息時(shí)，要進(jìn)行非null判斷以及通過(guò)JSON.parse（）方法和Number（）方法將字符串轉(zhuǎn)化成數(shù)組和數(shù)字類型。

3.4 基于Materialize框架的界面實(shí)現(xiàn)

Materialize是一個(gè)使用CSS，JavaScript和HTML創(chuàng)建的UI組件庫(kù)。實(shí)現(xiàn)UI組件有助于創(chuàng)建更快，更美觀，更靈敏的網(wǎng)站。它的靈感來(lái)自Google Material Design。它具有響應(yīng)式設(shè)計(jì)，以便使用Materialize創(chuàng)建的網(wǎng)站可以適合任何屏幕尺寸并且能根據(jù)設(shè)備大小重新設(shè)計(jì)自己。它還具有可擴(kuò)展的優(yōu)點(diǎn)，支持陰影和粗體顏色。它在各種平臺(tái)和設(shè)備上保持一致。最關(guān)鍵的是，它的設(shè)計(jì)考慮到了添加新的CSS規(guī)則比覆蓋現(xiàn)有的CSS規(guī)則容易得多。我們?cè)O(shè)計(jì)的APP的顏色基本都是選用materialize內(nèi)已配好的顏色，使我們不會(huì)浪費(fèi)時(shí)間在調(diào)色上，只要根據(jù)陳列出的顏色選用其相應(yīng)的class就行。除此之外，我們還調(diào)用了其預(yù)加載組件中的圓形進(jìn)度。

以下為Materialize關(guān)于預(yù)加載組件功能的核心代碼：

//設(shè)置預(yù)加載組件的大小以滿足不同用戶的需求。當(dāng)該組件工作時(shí)，然后設(shè)置animation的動(dòng)畫名稱屬性為container-rotate，其效果為360度旋轉(zhuǎn)。時(shí)間屬性為1568ms，動(dòng)畫的速度曲線屬性為linear，即從頭到尾速度是一致的，動(dòng)畫的播放次數(shù)為infinite，即無(wú)限次。而我們APP通過(guò)顯示隱藏該組件來(lái)使得其動(dòng)畫只有幾次。

4 結(jié)束語(yǔ)

針對(duì)本次開發(fā)，我們利用Cordova 跨平臺(tái)框架，以其通用流行的“HTML+CSS+JS”手段，改變了傳統(tǒng)開發(fā)方式的局限和“不靈活”，實(shí)現(xiàn)了開發(fā)的通用、簡(jiǎn)便、高效。我們所開發(fā)的風(fēng)扇遙控APP“E遙控”不僅能添加風(fēng)扇信息還可以通過(guò)重命名來(lái)區(qū)分各風(fēng)扇，還能刪除不想要的風(fēng)扇信息來(lái)簡(jiǎn)化界面。但是我們系統(tǒng)的一些還需要進(jìn)一步完善，例如實(shí)現(xiàn)登錄功能并將風(fēng)扇信息上傳至數(shù)據(jù)庫(kù)中以達(dá)到不同手機(jī)之間共享風(fēng)扇信息的目的這是我們需要進(jìn)一步攻克的難題，與風(fēng)扇的距離，因Cordova只能獲取到地理位置的經(jīng)緯度，而得不到實(shí)現(xiàn)，這需要等待Cordova關(guān)于這方面的升級(jí)來(lái)解決。

參考文獻(xiàn)（References）：

[1] 怯肇乾.Cordova-APP軟件及其插件開發(fā)[J].電腦編程技巧與維護(hù)，2019.2.

[2] 周玉軒，楊絮，鮑富成，朱一峰.CordovaNodeJS混合式物聯(lián)網(wǎng)信息服務(wù)系統(tǒng)[J].計(jì)算機(jī)工程與應(yīng)用，2017.

[3] 葉帆帆，徐城璋，王利興，胡宸瑄，楊曉東. 基于APICloud的家居設(shè)計(jì)APP的研究與實(shí)現(xiàn)[J].計(jì)算機(jī)時(shí)代，2016.5.

[4] 占華林，薛志強(qiáng)，阮修湘.智能家居控制APP的開發(fā)[J].電子測(cè)試，2017.11.

[5] 華穎.基于Web和Android的智能家居控制系統(tǒng)的設(shè)計(jì)與實(shí)現(xiàn)[J].廣西大學(xué)，2018.6.