移動手機APP混合模式開發

孫月玲

摘要 傳統手機APP開發模式主要分為Android和iOS兩大陣營，隨著Web大前端技術的發展，混合模式下開發手機APP能夠大幅降低移動APP開發，縮短開發周期，使開發更為便捷，幫助數百萬Web開發者轉化成移動APP開發專家！

【關鍵詞】手機APP開發 APICloud Res tful-API

1 前言

在移動互聯網越來越火爆的今天，用戶更傾向于手機中安裝的移動APP軟件所提供的服務，從而擺脫PC電腦端的束縛?，F在的移動APP軟件涉及各行各業，在市場上已經占有一席之地，移動APP軟件從開始的需求到最終的產品無論從開發周期到開發效率，開發成本都提出了較高要求。移動手機APP開發也從原生應用開發技術發展到混合模式開發階段。

移動手機APP原生應用開發，是指在Android、IOS等移動平臺上利用官方提供的開發語言、開發類庫、開發工具進行APP開發。比如Android是利用java、eclipse、Androidstudio，IOS是利用Objective-C和Xcode進行開發。原生應用APP開發，由于利用的是官方提供的語言和工具并且能夠直接操控硬件設備，比如讀取短信，多點觸控、NFC、調用攝像頭等，在應用性能上和交互體驗上應該是最好的，但是原生應用的可移植性比較差，特別是一款原生的APP，Android和IOS都需要兩個團隊各自開發，要寫兩套同樣的邏輯和界面。

而混合應用開發正是結合了原生應用和Web開發技術，取長補短的一種開發模式。原生代碼部分利用WebView插件或者其它的框架為Web H5提供了一個容器，程序主要的業務實現、界面展示是利用H5相關的Web技術進行實現的。比如現在的釘釘、淘寶、春秋航空等都是利用的混合模式開發。

混合APP開發可以說是未來的技術發展趨勢，目前主流的混合開發技術主要有：cordova模式開發、ReactNative跨平臺原生開發和WeeX開發技術、基于APICloud云平臺模式開發等。

2 Cordova混合模式開發

Apache Cordova是一個開源的移動開發框架。允許使用標準的web技術-HTML5，CSS3和JavaScript做跨平臺開發。應用在每個平臺的具體執行被封裝了起來，并依靠符合標準的API綁定去訪問每個設備的功能，比如說：傳感器、數據、網絡狀態等。

移動應用開發者，想擴展一個應用的使用平臺，Cordova啟用的WebView可以給應用提供完整用戶訪問界面。插件是Cordova生態系統的重要組成部分，在一些平臺中，也可以作為一個組件給大的、混合應用。Cordova提供了和原生組件相互通信的接口并綁定到了標準的設備API上。這就能夠通過JavaScript調用原生代碼。

Apache Cordova項目維護著一組插件叫做核心插件。這些核心插件可以讓你的應用程序訪問設備功能，比如：電源，相機，聯系人等。

插件是必須的，除了核心插件，這里還有一些第三方插件他們提供了一些附加功能，但這些功能不一定在每個平臺都能用?？梢酝ㄟ^搜索Cordova插件使用插件搜索或者npm，也可以開發自己的插件。注意：當你創建一個Cordova項目它不存在任何插件。這是新的默認行為。任何你需要的組件，哪怕是核心組件，你也必須明確添加。Cordova不提供任何UI部件和MV框架。Cordova只提供運行環境。如果你想使用UI部件或者MV框架，你需要選擇他們并包含在你的應用程序中。

Cordova的命令行運行在Node.js上面并且可以通過NPM安裝。根據平臺具體指導安裝相應平臺的依賴。打開命令提示符或終端，然后鍵入npm install-g cordova

使用命令行創建一個空的Cordova項目。導航到希望創建項目的目錄，然后鍵入cordova create 。要知道這個命令完整的選項，鍵入cordova help create。

在創建完一個Cordova項目后，導航到項目目錄。在項目目錄中，需要添加你想構建app的平臺為了添加平臺，鍵入cordovaplatform add 。為了知道可以添加的平臺，可以在命令中鍵入cordova run運行cordova platform。3ReactNative和WeeX跨平臺混合開發

React Native是Facebook在React.js Conf2015大會上推出了基于JavaScript的開源框架。React Native把重點放在所有開發人員關心的平臺的開發效率上一一開發者只需學習一種語言就能輕易為任何平臺高效地編寫代碼，它結合了Web應用和Native應用的優勢，可以使用JavaScript來開發Android和iOS原生應用。在JavaScript中用React抽象操作系統原生的UI組件，代替DOM元素來渲染等。React Native能夠使用基于JavaScript和React一致的開發體驗在本地平臺上構建世界一流的應用程序體驗。Facebook在多個應用程序產品中使用了React Native，并將繼續為ReactNative投資。React Native必須安裝的軟件是Chocolarey，Chocolatey是一個Windows上的包管理器，類似于linux上的yum和apt -get。一般來說，使用Chocolatey來安裝軟件的時候，需要以管理員的身份來運行命令提示符窗口。譯注：chocolatey的網站可能在國內訪問困難，導致上述安裝命令無法正常完成。請使用穩定的翻墻工具。如果你實在裝不上這個工具，也不要緊。所需的python2和nodejs你可以分別單獨去對應的官方網站下載安裝即可。

而Weex是阿里巴巴在2016年4月21日Qcon大會上宣布的跨平臺移動開發工具，是使用Web開發體驗來開發高性能原生應用的框架。Weex致力于使開發者能基于當代先進的Web開發技術，使用同一套代碼來構建Android、iOS和Web應用。具體來講，在集成了WeexSDK之后，你可以使用JavaScript和現代流行的前端框架來開發移動應用。Weex的結構是解耦的，渲染引擎與語法層是分開的，也不依賴任何特定的前端框架，目前主要支持Vue.js和Rax這兩個前端框架。Weex的另一個主要目標是跟進當代先進的Web開發和原生開發的技術，使生產力和性能共存。在開發Weex頁面就像開發普通網頁一樣;在渲染Weex頁面時和渲染原生頁面一樣。對于那些不依賴于UI的功能，Weex推薦將它們包裝到模塊中，然后使用weex.requireModule（xxx）來引入。這是使用javascnpt調用原生功能的一種方法，如網絡，存儲，剪貼板和頁面導航等功能。這里有一個使用stream模塊獲取Vuejs的star數的例子。同樣，Weex也提供了一套基礎的內置模塊，也支持將已有的原生模塊集成到Weex中。

4 基于APICloud云平臺混合模式開發

APICloud移動應用開發平臺，它是中國領先的“云端一體”的移動應用APP開發云服務，利用APICloud技術可以大幅降低移動APP開發和管理的難度，讓APP開發工作量從1個月縮減為1周，簡化了移動應用開發技術。APICloud“云端一體”的理念，可以說是重新定義了移動應用開發。APICloud由“云API”和“端API”兩部分組成，為開發者從“云”和“端”兩個方向提供API服務。可以幫助開發者快速實現移動應用的開發、測試、發布、管理和運營的全生命周期管理。

4.1 APICloud技術的“端API”

在手機端進行界面設計時，開發者可以利用由APICloud官方提供的瀏覽器樣式Api.css清除框架，可以讓界面HTML元素在所有手機上表現一致;利用由APICloud官方平臺提供的輔助腳本框架api：js，它遵循主流前端框架iQuery的使用習慣，完成手機端APP的動態信息獲取和展示;還可以利用APICloud明星發者提供的一款前端布局框架AUI，實現各種頁面類型的快速布局;sWipe.js框架可以讓您的頁面快速實現多屏切換、輪播圖等功能，并且切換流暢;當您使用Web方式顯示數據列表時，使用dot.js模板可以有效提高開發效率和運行體驗，通過簡單的自定義語法即可完成復雜布局的列表開發。

apiready= function（）{

api.parseTapmode（）;

var header= $api.byld（aui-header）;

var footer= $api.byld（footer'）;

$api.fixStarusBar（header）;

var headerPos= $api.offset（header）;

var footerPos= $api.offset（footer）;

meaus= $api.domAll（footer， '.aui-tab-item）;

var frames=[];

for （vari=0;i

frames.push（{

name：listframe+i.

url： '../html/listframe'+i+'.html'

））

）

api.openFrameGroup（{

name：Tlistframe'.

scrollEnabled： true.

rect：f

X：0.

y：headerPos.h，

w： api.winWidth，

h：api.winHeight - headerPos.h -footerPos.h

}，

index：0.

frames： frames

}，function（ret， err）{

fnSetTabSelected（ret.index）;

））;

）

開發者還可以通過調用模塊，和手機硬件或其他應用交換數據：

function fnSetAvatar（）{

api.actionSheet（{

title：選擇‘，

cancelTitle：取消，

buttons：[拍照，相冊]

），function（ret， err）{

if （ret）{

var sourceTypes=[

‘camera'，

'album'

];

api.getPicture（{

sourceType： sourceTypes[rerbuttonlndex -1]，

allowEdit： true，

qualiry： 50，

targetWidth： 750，

targetHeight： 750，

saveToPhotoAlbum： false

};function（ret， err）{

if （ret）{

//alert（JSON.stringify（retdata》;

fnUploadAtavar（ret.data）;

） else{

alert（JSON.stringify（err》;

）

）），

） else{

alert（JSON.stringify（err》;

）

}）;

）

4.2 APICloud技術的“云API”

“云API”可以用任何可以發送http請求的設備來與API Cloud進行交互，開發者可以使用“云API”做以下事情，例如：

（1） -個移動網站可以通過Javascript來獲取API Cloud上的數據;

（2） -個網站可以展示來自API Cloud的數據;

（3）可以上傳大量的數據，之后可以被一個移動APP讀取;

（4）使用任何語言寫的程序都可以操作API Cloud上的數據：

（5）如果您不再需要使用APICloud，您可以導出您所有的數據。

4.3 采用Restful -API接口規范

各種網絡應用程序，均分為前端和后端兩個部分。當前的發展趨勢就是，前端設備層出不窮（手機、平板、桌而電腦、其他專用設備…）。為方便不同的前端應用與后端服務進行通信，因此，必須有一種統一的數據交換機制，這導致API構架的流行，甚至出現“APIFirst”的設計思想。

RESTful API是目前比較成熟的一套互聯網應用程序的API設計理論。它是一種軟件架構風格、設計風格，而不是標準，只是提供了一組設計原則和約束條件。它主要用于客戶端和服務器交互類的軟件?；谶@個風格設計的軟件可以更簡潔，更有層次，更易于實現緩存等機制。 apiready = function（）{

var Id= $api.getStorage（"Id"）;

var http = $api.getStorage（"http"）;

api.aj ax（{

url： http+'SunFlower/api/show.php'，

method： 'get'，

data：f

values：{

Id： Id

）

）

}， function（ret， err）{

∥if （ret）{

//

api.alert（{msg： JSON.stringify（ret）））;

/

） else{

// api.alert（{

//

msg： JSON.stringify（err）

// ））;

}|、

//alert（ret.data[O].MnName）;

var GuardianShip= documentgetElementByld（ "GuardianShip”）;

var GdName二documentgetElementByld（"GdName"）;

var needs=documentgetElementByld（"needs”）;

GuardianShip.innerHTML= retdata[Ol.GuardianShip;

GdName.innerHTML= ret.data[0]GdName;

needs.innerHTML= ret.data[0]needs;

））;

};

參考文獻

[1]劉剛編著，移動APP產品原型設計[M].中國鐵道出版社，2014.

[2]李爭，微軟開源跨平臺移動開發實踐[M].清華大學出版社，2011

[3]徐凱.跨終端Web [M].電子工業出版社.2013.