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