孫月玲

摘要 傳統(tǒng)手機(jī)APP開發(fā)模式主要分為Android和iOS兩大陣營，隨著Web大前端技術(shù)的發(fā)展，混合模式下開發(fā)手機(jī)APP能夠大幅降低移動(dòng)APP開發(fā)，縮短開發(fā)周期，使開發(fā)更為便捷，幫助數(shù)百萬Web開發(fā)者轉(zhuǎn)化成移動(dòng)APP開發(fā)專家！

【關(guān)鍵詞】手機(jī)APP開發(fā) APICloud Res tful-API

1 前言

在移動(dòng)互聯(lián)網(wǎng)越來越火爆的今天，用戶更傾向于手機(jī)中安裝的移動(dòng)APP軟件所提供的服務(wù)，從而擺脫P(yáng)C電腦端的束縛。現(xiàn)在的移動(dòng)APP軟件涉及各行各業(yè)，在市場(chǎng)上已經(jīng)占有一席之地，移動(dòng)APP軟件從開始的需求到最終的產(chǎn)品無論從開發(fā)周期到開發(fā)效率，開發(fā)成本都提出了較高要求。移動(dòng)手機(jī)APP開發(fā)也從原生應(yīng)用開發(fā)技術(shù)發(fā)展到混合模式開發(fā)階段。

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

而混合應(yīng)用開發(fā)正是結(jié)合了原生應(yīng)用和Web開發(fā)技術(shù)，取長補(bǔ)短的一種開發(fā)模式。原生代碼部分利用WebView插件或者其它的框架為Web H5提供了一個(gè)容器，程序主要的業(yè)務(wù)實(shí)現(xiàn)、界面展示是利用H5相關(guān)的Web技術(shù)進(jìn)行實(shí)現(xiàn)的。比如現(xiàn)在的釘釘、淘寶、春秋航空等都是利用的混合模式開發(fā)。

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

2 Cordova混合模式開發(fā)

Apache Cordova是一個(gè)開源的移動(dòng)開發(fā)框架。允許使用標(biāo)準(zhǔn)的web技術(shù)-HTML5，CSS3和JavaScript做跨平臺(tái)開發(fā)。應(yīng)用在每個(gè)平臺(tái)的具體執(zhí)行被封裝了起來，并依靠符合標(biāo)準(zhǔn)的API綁定去訪問每個(gè)設(shè)備的功能，比如說：傳感器、數(shù)據(jù)、網(wǎng)絡(luò)狀態(tài)等。

移動(dòng)應(yīng)用開發(fā)者，想擴(kuò)展一個(gè)應(yīng)用的使用平臺(tái)，Cordova啟用的WebView可以給應(yīng)用提供完整用戶訪問界面。插件是Cordova生態(tài)系統(tǒng)的重要組成部分，在一些平臺(tái)中，也可以作為一個(gè)組件給大的、混合應(yīng)用。Cordova提供了和原生組件相互通信的接口并綁定到了標(biāo)準(zhǔn)的設(shè)備API上。這就能夠通過JavaScript調(diào)用原生代碼。

Apache Cordova項(xiàng)目維護(hù)著一組插件叫做核心插件。這些核心插件可以讓你的應(yīng)用程序訪問設(shè)備功能，比如：電源，相機(jī)，聯(lián)系人等。

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

Cordova的命令行運(yùn)行在Node.js上面并且可以通過NPM安裝。根據(jù)平臺(tái)具體指導(dǎo)安裝相應(yīng)平臺(tái)的依賴。打開命令提示符或終端，然后鍵入npm install-g cordova

使用命令行創(chuàng)建一個(gè)空的Cordova項(xiàng)目。導(dǎo)航到希望創(chuàng)建項(xiàng)目的目錄，然后鍵入cordova create 。要知道這個(gè)命令完整的選項(xiàng)，鍵入cordova help create。

在創(chuàng)建完一個(gè)Cordova項(xiàng)目后，導(dǎo)航到項(xiàng)目目錄。在項(xiàng)目目錄中，需要添加你想構(gòu)建app的平臺(tái)為了添加平臺(tái)，鍵入cordovaplatform add 。為了知道可以添加的平臺(tái)，可以在命令中鍵入cordova run運(yùn)行cordova platform。3ReactNative和WeeX跨平臺(tái)混合開發(fā)

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

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

4 基于APICloud云平臺(tái)混合模式開發(fā)

APICloud移動(dòng)應(yīng)用開發(fā)平臺(tái)，它是中國領(lǐng)先的“云端一體”的移動(dòng)應(yīng)用APP開發(fā)云服務(wù)，利用APICloud技術(shù)可以大幅降低移動(dòng)APP開發(fā)和管理的難度，讓APP開發(fā)工作量從1個(gè)月縮減為1周，簡(jiǎn)化了移動(dòng)應(yīng)用開發(fā)技術(shù)。APICloud“云端一體”的理念，可以說是重新定義了移動(dòng)應(yīng)用開發(fā)。APICloud由“云API”和“端API”兩部分組成，為開發(fā)者從“云”和“端”兩個(gè)方向提供API服務(wù)?？梢詭椭_發(fā)者快速實(shí)現(xiàn)移動(dòng)應(yīng)用的開發(fā)、測(cè)試、發(fā)布、管理和運(yùn)營的全生命周期管理。

4.1 APICloud技術(shù)的“端API”

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

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）;

））;

）

開發(fā)者還可以通過調(diào)用模塊，和手機(jī)硬件或其他應(yīng)用交換數(shù)據(jù)：

function fnSetAvatar（）{

api.actionSheet（{

title：選擇‘，

cancelTitle：取消，

buttons：[拍照，相冊(cè)]

），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技術(shù)的“云API”

“云API”可以用任何可以發(fā)送http請(qǐng)求的設(shè)備來與API Cloud進(jìn)行交互，開發(fā)者可以使用“云API”做以下事情，例如：

（1） -個(gè)移動(dòng)網(wǎng)站可以通過Javascript來獲取API Cloud上的數(shù)據(jù);

（2） -個(gè)網(wǎng)站可以展示來自API Cloud的數(shù)據(jù);

（3）可以上傳大量的數(shù)據(jù)，之后可以被一個(gè)移動(dòng)APP讀取;

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

（5）如果您不再需要使用APICloud，您可以導(dǎo)出您所有的數(shù)據(jù)。

4.3 采用Restful -API接口規(guī)范

各種網(wǎng)絡(luò)應(yīng)用程序，均分為前端和后端兩個(gè)部分。當(dāng)前的發(fā)展趨勢(shì)就是，前端設(shè)備層出不窮（手機(jī)、平板、桌而電腦、其他專用設(shè)備…）。為方便不同的前端應(yīng)用與后端服務(wù)進(jìn)行通信，因此，必須有一種統(tǒng)一的數(shù)據(jù)交換機(jī)制，這導(dǎo)致API構(gòu)架的流行，甚至出現(xiàn)“APIFirst”的設(shè)計(jì)思想。

RESTful API是目前比較成熟的一套互聯(lián)網(wǎng)應(yīng)用程序的API設(shè)計(jì)理論。它是一種軟件架構(gòu)風(fēng)格、設(shè)計(jì)風(fēng)格，而不是標(biāo)準(zhǔn)，只是提供了一組設(shè)計(jì)原則和約束條件。它主要用于客戶端和服務(wù)器交互類的軟件。基于這個(gè)風(fēng)格設(shè)計(jì)的軟件可以更簡(jiǎn)潔，更有層次，更易于實(shí)現(xiàn)緩存等機(jī)制。 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;

））;

};

參考文獻(xiàn)

[1]劉剛編著，移動(dòng)APP產(chǎn)品原型設(shè)計(jì)[M].中國鐵道出版社，2014.

[2]李爭(zhēng)，微軟開源跨平臺(tái)移動(dòng)開發(fā)實(shí)踐[M].清華大學(xué)出版社，2011

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