基于QtQuick的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)關(guān)鍵技術(shù)研究

鄭純軍　賈寧

摘 要：Qt Quick是一項(xiàng)新技術(shù)，基于Qt Quick編寫的應(yīng)用程序可跨平臺(tái)運(yùn)行，本文描述了Qt Quick的應(yīng)用在移動(dòng)終端的自適應(yīng)，QML與C++、Java語言的交互，QML連接數(shù)據(jù)庫、Http下載與JSON解析技術(shù)，并闡述了Qt Quick的移動(dòng)應(yīng)用打包過程。

關(guān)鍵詞：Qt Quick；跨平臺(tái)；移動(dòng)應(yīng)用；QML

中圖分類號(hào)：TP368.1 文獻(xiàn)標(biāo)識(shí)碼：A

Abstract：Qt Quick is a new technology，the application can run cross-platform based on Qt Quick.The paper described the adaptive terminal technology of Qt Quick application and described QML how to interact with C ++，Java language，QML how to connect to database.Then the paper introduced the technology of Http download and JSON parsing.The last， the paper described the mobile app packaging process.

Keywords：Qt Quick；agile；mobile app；QML

1 引言（Introduction）

隨著移動(dòng)互聯(lián)網(wǎng)的飛速發(fā)展，新的移動(dòng)設(shè)備或可穿戴設(shè)備不斷涌現(xiàn)，如智能手表、智能自行車等，使移動(dòng)設(shè)備應(yīng)用軟件的跨平臺(tái)開發(fā)成為移動(dòng)互聯(lián)網(wǎng)企業(yè)關(guān)注的熱點(diǎn)。

目前移動(dòng)應(yīng)用軟件的開發(fā)主要有三種模式：本地應(yīng)用、Web應(yīng)用、混合應(yīng)用。本地應(yīng)用可以充分發(fā)揮硬件本身的特性，但不同硬件設(shè)備，不同操作系統(tǒng)所使用的編程語言、開發(fā)環(huán)境各不相同，這使得開發(fā)的應(yīng)用程序無法適應(yīng)多個(gè)平臺(tái)；Web應(yīng)用雖然可以適應(yīng)多個(gè)硬件平臺(tái)，但對(duì)特定硬件的高級(jí)使用表現(xiàn)不佳；混合應(yīng)用將兩者結(jié)合起來，在一定程度上實(shí)現(xiàn)了本地的高級(jí)應(yīng)用與Web應(yīng)用的兼容。但如何實(shí)現(xiàn)開發(fā)的應(yīng)用在桌面、移動(dòng)終端、智能設(shè)備上同時(shí)運(yùn)行是移動(dòng)互聯(lián)網(wǎng)開發(fā)者關(guān)注的熱點(diǎn)。

Qt是跨平臺(tái)應(yīng)用和GUI（圖形用戶界面）的開發(fā)框架，用戶只需一次編寫代碼，便可非常方便的部署在桌面、移動(dòng)設(shè)備與嵌入式系統(tǒng)中運(yùn)行。目前支持的操作系統(tǒng)有Android、BlackBerry、iOS、Linux/X11、Mac OS X、Windows等。Qt面向?qū)ο?，而且很容易擴(kuò)展，是目前非常流行的一種開發(fā)工具。而Qt Quick是Qt 4.7中推出的一項(xiàng)新技術(shù)，它可輕松地創(chuàng)建供移動(dòng)和嵌入式設(shè)備使用的動(dòng)態(tài)觸摸式界面和輕量級(jí)應(yīng)用程序，它引入了一種陳述性的腳本語言QML，用于動(dòng)態(tài)設(shè)計(jì)和描述GUI，使設(shè)計(jì)過程快速靈活，易于使用[1]，這一技術(shù)的出現(xiàn)為實(shí)現(xiàn)跨平臺(tái)應(yīng)用的開發(fā)提供了一個(gè)新的思路。本文將對(duì)Qt Quick的跨平臺(tái)應(yīng)用開發(fā)關(guān)鍵技術(shù)做深入的研究與應(yīng)用。

2 自適應(yīng)UI設(shè)計(jì)（Adaptive UI design）

交互界面（UI）作為終端與用戶交流的基本形式，改善UI的體現(xiàn)形式是提升人機(jī)交互舒適感的最佳途徑[2]。開發(fā)人員經(jīng)常從單一的界面元素或者操作流程出發(fā)，設(shè)計(jì)整體應(yīng)用程序的界面特征，用戶對(duì)于此種方式的界面體驗(yàn)往往較為單調(diào)[3]，缺少整體美感。此外，跨平臺(tái)的應(yīng)用程序涉及的終端種類較多，為達(dá)到一次編寫、處處可用的效果，必須設(shè)計(jì)自適應(yīng)的界面效果，即針對(duì)不同的終端，界面的形式與大小將自動(dòng)變化，從而實(shí)現(xiàn)和諧的比例、視覺上的對(duì)稱感。

2.1 適應(yīng)屏幕旋轉(zhuǎn)

考慮到部分終端存在重力感應(yīng)器，在變換姿勢(shì)時(shí)，界面的元素存在正交變換[4]，因此在界面設(shè)計(jì)的過程中，需要對(duì)元素的坐標(biāo)進(jìn)行靈活處理，即坐標(biāo)位置不固定，相對(duì)位置固定。同時(shí)界面的對(duì)稱軸兩側(cè)需要體感平衡，橫縱向均呈現(xiàn)對(duì)稱關(guān)系，除此之外，還需要對(duì)Qt Quick的環(huán)境變量QWS_DISPLAY進(jìn)行設(shè)置。為達(dá)到用戶欣賞界面的平衡感，界面元素的面積和分布要合理，避免布局失衡、局部過于緊湊而產(chǎn)生的信息遺失感。

2.2 適應(yīng)屏幕尺寸

屏幕尺寸的自適應(yīng)是UI設(shè)計(jì)的重要環(huán)節(jié)之一，目前流行的終端尺寸眾多，無法為全部尺寸的應(yīng)用程序逐一定制界面，界面尺寸的自動(dòng)更新可大量減少界面開發(fā)的工作量。在界面設(shè)計(jì)過程中，首先需要對(duì)界面元素進(jìn)行差異化布局，使具備一定的誘導(dǎo)效率，用戶可明顯感受到次序感和優(yōu)先感。此外，在使用Qt Quick技術(shù)時(shí)，對(duì)界面各個(gè)元素進(jìn)行相對(duì)布局，保證每個(gè)元素的縮放比例、相對(duì)位移、像素平移均步調(diào)一致，即界面凝聚成為一個(gè)整體。最終，在對(duì)Qt Quick新建的工程進(jìn)行相關(guān)設(shè)置的基礎(chǔ)上，可實(shí)現(xiàn)對(duì)屏幕尺寸的自適應(yīng)。

除此之外，界面的中心協(xié)調(diào)度[5]、布局的緊湊程度、節(jié)奏感以及四象限元素的布局形式均對(duì)UI的設(shè)計(jì)產(chǎn)生一定的影響，開發(fā)人員需要在維持需求的基礎(chǔ)上，對(duì)界面的美度進(jìn)行分析和評(píng)價(jià)，從而提升應(yīng)用程序的美觀性。

3 跨平臺(tái)交互技術(shù)（Cross platform interactive technology）

跨平臺(tái)是指編程語言、軟件、硬件設(shè)備可以在多種平臺(tái)上運(yùn)行工作[6]，跨平臺(tái)技術(shù)指相關(guān)的編程語言可以實(shí)現(xiàn)源代碼級(jí)別的復(fù)用，即程序一次編寫，處處編譯運(yùn)行。QML作為Qt Quick技術(shù)中的一種新型的編程語言，可以實(shí)現(xiàn)快速的界面設(shè)計(jì)，并提供界面的動(dòng)作響應(yīng)、過渡動(dòng)畫效果。

但是，界面美觀的設(shè)計(jì)并非是程序設(shè)計(jì)成功的唯一檢驗(yàn)形式，人機(jī)交互的設(shè)計(jì)同樣起到?jīng)Q定作用。利用QML實(shí)現(xiàn)的人機(jī)交互主要體現(xiàn)為應(yīng)用層次上，即系統(tǒng)功能和應(yīng)用的層次，與模型有關(guān)的所有數(shù)據(jù)和交互操作都在于此，可以實(shí)現(xiàn)功能上的數(shù)據(jù)傳輸。本文主要針對(duì)常見的交互形式進(jìn)行介紹，在QML的數(shù)據(jù)傳輸過程中，無一例外的使用到QtDeclarative模塊，它是專門為交互而創(chuàng)建的新型模塊。

3.1 QML與C++交互

在對(duì)嵌入式設(shè)備、手機(jī)終端等支持Linux/X11、Windows操作系統(tǒng)進(jìn)行開發(fā)時(shí)，往往需要實(shí)現(xiàn)QML與C++的數(shù)據(jù)傳輸。這種數(shù)據(jù)傳輸可以通過以下兩種形式實(shí)現(xiàn)：QML引用C++對(duì)象和QML、C++方法相互調(diào)用。

以最常見的第一種形式為例，需要為QML注冊(cè)C++對(duì)象環(huán)境。在C++實(shí)現(xiàn)中，非可視化的型別均為QObject的子類，可視化的類型均為QDeclarativeItem的子類。此時(shí)，QDeclarativeItem等同于QML的Item類。

如果用戶想要定義自己的類別，可按照以下步驟進(jìn)行操作：

（1）在C++中，實(shí)現(xiàn)派生于QObject或QDeclarativeItem的子類，它是新定義item的實(shí)體對(duì)象。

（2）在C++中，將步驟1中實(shí)現(xiàn)的新item類型注冊(cè)給QML。

（3）在QML中，導(dǎo)入含有步驟1中定義的新item的模塊。

（4）在QML中，向使用標(biāo)準(zhǔn)的item一樣使用新定義的item。此時(shí)，可直接在QML中調(diào)用新定義的item。圖1描述了此種交互方法的具體流程。

QML與C++方法相互調(diào)用的形式適用于以功能為主的快速原型開發(fā)，通過它，應(yīng)用程序可以很方便地把QML組件嵌入到QGraphicsView中，若想將QML與C++程序結(jié)合，程序中至少需要一個(gè)QDeclarativeEngine。為了使所有QML組件實(shí)例可以工作，QDeclarativeEngine為它們提供全局配置，QDeclarativeEngine對(duì)于C++中使用QML的作用如同QNetworkAccessManager對(duì)于網(wǎng)絡(luò)通信、路徑對(duì)于持久化存儲(chǔ)的作用。

通過使用QDeclarativeComponent加載QML Documents。每一個(gè)QDeclarativeComponent實(shí)例對(duì)應(yīng)一個(gè)QML document。此外，還可以傳遞一個(gè)Document URL或者表示Document內(nèi)容的原始文本給QDeclarativeComponent。Document URL可以是本地文件系統(tǒng)URL，或者任何QNetworkAccessManager支持的網(wǎng)絡(luò)URL。

通過QDeclarativeComponent：：create（）方法創(chuàng)建QML組件實(shí)例，這時(shí)數(shù)據(jù)通過跟上下文暴露給所有對(duì)象實(shí)例，向QML組件實(shí)例暴露數(shù)據(jù)，最終通過QML屬性綁定（Property Bindings）和JavaScript對(duì)象訪問應(yīng)用程序設(shè)置上下文屬性。

3.2 QML與Java交互

QML與Java的交互主要應(yīng)用于Android操作系統(tǒng)的程序開發(fā)過程中，Qt 5中針對(duì)不同的平臺(tái)適配并開發(fā)了不同的模塊，下文將詳細(xì)介紹典型的交互模塊Qt Android Extras。

QtAndroid Extras模塊包含了三個(gè)類以及一個(gè)命名空間：QAndroidActivityReceiver用來接收Android的Activity的結(jié)果；QAndroidJniEnvironment用來訪問JNI環(huán)境變量；QtAndroidJniObject對(duì)應(yīng)dalvik虛擬機(jī)中的普通Java類。此外QtAndroid命名空間中存在一些全局函數(shù)，用來與Java代碼進(jìn)行交互，比如使用QtAndroid：：androidActivity（）來獲得當(dāng)前運(yùn)行的Activity等。

在開發(fā)Android平臺(tái)應(yīng)用程序時(shí)，往往需要將QML與C++、Java的交互結(jié)合使用，即使用QML調(diào)用C++注冊(cè)的單例函數(shù)來實(shí)現(xiàn)調(diào)用C++代碼，再通過QtAndroidJniObject：：callMethod（）來調(diào)用Java的本地方法。具體形式如圖2所示。

3.3 QML連接數(shù)據(jù)庫

在實(shí)際應(yīng)用程序開發(fā)過程中，數(shù)據(jù)庫的使用是不可或缺的重要操作，QML中提供了數(shù)據(jù)庫本地存儲(chǔ)的解決方案，它通過openDatabaseSync（）函數(shù)提供一個(gè)能夠訪問SQL數(shù)據(jù)庫的本地脫機(jī)存儲(chǔ)，一般會(huì)將這個(gè)函數(shù)封裝在JS function內(nèi)部。

打開SQL數(shù)據(jù)庫時(shí)，將生成數(shù)據(jù)庫文件，默認(rèn)此文件在QDeclarativeEngine：：offlineStoragePath（）路徑下，同時(shí)利用void setOfflineStoragePath（const QString & dir）方法修改路徑。

此外，QML還提供了相關(guān)的數(shù)據(jù)模型進(jìn)行數(shù)據(jù)信息的組織，如ListModel、XmlListModel、VisualItemModel等，不同模型具備不相同的表現(xiàn)形式，在實(shí)際操作過程中可以將數(shù)據(jù)存到數(shù)據(jù)庫里，程序啟動(dòng)的時(shí)候從數(shù)據(jù)庫中讀取數(shù)據(jù)，退出的時(shí)候?qū)odel中的數(shù)據(jù)存放回?cái)?shù)據(jù)庫中。

3.4 HTTP下載與JSON解析

在應(yīng)用程序開發(fā)過程中，網(wǎng)絡(luò)是常見的功能模塊，它是用戶與用戶之間溝通的接口。在Qt Quick中，無法直接利用網(wǎng)絡(luò)模塊進(jìn)行通信，需要在QML與C++、Java的交互的基礎(chǔ)上進(jìn)行網(wǎng)絡(luò)數(shù)據(jù)的封裝與傳遞。

HTTP下載的具體流程如下。首先，利用QNetworkAccessManager類發(fā)送網(wǎng)絡(luò)請(qǐng)求和接受回復(fù)，利用QNetworkRequest類來管理請(qǐng)求，QNetworkReply類返回一個(gè)對(duì)象，它接收回復(fù)信息，并對(duì)數(shù)據(jù)進(jìn)行處理。當(dāng)數(shù)據(jù)下載完成后，Manager會(huì)發(fā)出finished（）信號(hào)。在關(guān)聯(lián)信號(hào)的基礎(chǔ)上，相關(guān)函數(shù)將對(duì)接收的數(shù)據(jù)進(jìn)行處理，使用reply→readAll（）函數(shù)就可以將下載的所有數(shù)據(jù)讀出。

應(yīng)用程序在獲取全部數(shù)據(jù)的基礎(chǔ)上，往往需要將進(jìn)行數(shù)據(jù)解析，得到目標(biāo)信息。Qt可以調(diào)用fromJson（）方法來解析文本形式的JSON數(shù)據(jù)。fromJson（）接受UTF-8格式的JSON數(shù)據(jù)和QJsonParseError對(duì)象指針，fromJson（）方法返回后，JSON數(shù)據(jù)就都被解析為Qt定義的各種JSON對(duì)象。最終根據(jù)數(shù)據(jù)生成QJsonDocument對(duì)象即可尋找到對(duì)應(yīng)的信息，再進(jìn)行相應(yīng)的信息轉(zhuǎn)換即可獲得目標(biāo)信息。

4 跨平臺(tái)發(fā)布（Cross platform release）

應(yīng)用程序開發(fā)和測試結(jié)束并未直接向公眾開放，開發(fā)人員操作的最后一個(gè)環(huán)節(jié)是應(yīng)用程序的發(fā)布，程序開發(fā)的平臺(tái)不同，發(fā)布的操作方法存在一定的差異。

面向Andoid、iOS等操作系統(tǒng)的應(yīng)用程序發(fā)布過程較為簡易，使用Qt 5版本開發(fā)的應(yīng)用程序可以利用開發(fā)平臺(tái)的Qt for Android、Qt for iOS直接將程序生成相應(yīng)的APK文件和IPA文件，將文件導(dǎo)入相應(yīng)的終端后即可測試運(yùn)行。

面向Linux、BlackBerry等系統(tǒng)的發(fā)布形式較為繁瑣，此時(shí)需要打包生成適用于系統(tǒng)安裝的RPM文件。具體的實(shí)現(xiàn)流程如下：

（1）安裝打包套件，建立打包的環(huán)境。

（2）書寫spec文件，此類文件對(duì)于變量的設(shè)置要求較高。

（3）準(zhǔn)備桌面圖片，桌面文件和桌面程序的鏈接文件。

（4）生成rpm文件，并檢查程序重要文件的拷貝路徑是否正確。此時(shí)生成的文件即是此類操作系統(tǒng)的安裝文件，可以進(jìn)行安裝測試。

5 結(jié)論（Conclusion）

Qt Quick是一種新的技術(shù)，基于Qt Quick的應(yīng)用程序可跨平臺(tái)運(yùn)行，它為用戶提供了很好的交互方式，本文介紹了Qt Quick應(yīng)用程序的自適應(yīng)、QML與C++、Java語言的交互、連接數(shù)據(jù)庫、HTTP下載、JSON解析關(guān)鍵技術(shù)，事實(shí)表明基于Qt Quick的應(yīng)用程序開發(fā)簡單，調(diào)用靈活，具有很好的應(yīng)用價(jià)值。

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

[1] 熊萱，杜祝，譚欽文.基于Qt Quick的消息分發(fā)模型研究[J].艦船電子工程，2012，32（8）：105.

[2] 周蕾，薛澄岐，湯文成.界面元素布局設(shè)計(jì)的美度評(píng)價(jià)方法[J].計(jì)算機(jī)輔助設(shè)計(jì)與圖形學(xué)學(xué)報(bào)，2013，25（5）：759.

[3] 吳芳.基于事件的跨平臺(tái)移動(dòng)應(yīng)用開發(fā)框架設(shè)計(jì)與實(shí)現(xiàn)[J].科技風(fēng)，2014（12）：26.

[4] 施偉，王碩蘋，郭鳴.跨平臺(tái)移動(dòng)應(yīng)用中間適配層設(shè)計(jì)與實(shí)現(xiàn)[J].計(jì)算機(jī)工程與應(yīng)用，2014（16）：39.

[5] 施瑩.快速構(gòu)建跨平臺(tái)移動(dòng)應(yīng)用開發(fā)方案[J].價(jià)值工程，2013（29）：197.

[6] 潘曉夢(mèng)，鄧建華，蘇厚勤.一種跨平臺(tái)移動(dòng)應(yīng)用方案的研究與實(shí)踐[J].計(jì)算機(jī)應(yīng)用與軟件，2013，30（1）：181.

作者簡介：

鄭純軍（1976-），男，碩士，副教授.研究領(lǐng)域：圖像理解，嵌入式系統(tǒng)開發(fā).

賈 寧（1985-），女，碩士，講師.研究領(lǐng)域：嵌入式系統(tǒng)開發(fā).