基于LeanCloud和Wex5開發(fā)跨平臺(tái)HTML5應(yīng)用程序

作者：朱先忠 2016-05-27 15:44:12

本文將介紹基于Wex5高級(jí)HTML5開發(fā)環(huán)境并集成LeanCloud提供的BaaS技術(shù)開發(fā)HTML5應(yīng)用程序的完整流程與關(guān)鍵步驟。

隨著HTML5技術(shù)的標(biāo)準(zhǔn)化，全球范圍內(nèi)迅速掀起了HTML5應(yīng)用程序的開發(fā)熱潮。這是因?yàn)榻柚贖TML5技術(shù)程序員可以相對(duì)容易和迅速地開發(fā)出適用于桌面和移動(dòng)設(shè)備的跨平臺(tái)應(yīng)用軟件。本文將介紹基于Wex5高級(jí)HTML5開發(fā)環(huán)境并集成LeanCloud提供的BaaS技術(shù)開發(fā)HTML5應(yīng)用程序的完整流程與關(guān)鍵步驟。

一、 LeanCloud簡(jiǎn)介

LeanCloud是國(guó)內(nèi)的移動(dòng)應(yīng)用一站式云服務(wù)。LeanCloud提供了數(shù)據(jù)存儲(chǔ)、實(shí)時(shí)消息、統(tǒng)計(jì)分析以及多種擴(kuò)展組件，全面涵蓋移動(dòng)應(yīng)用開發(fā)的需求，支持iOS、Android、Web等多平臺(tái)。LeanCloud產(chǎn)品旨在幫助開發(fā)者擺脫后端開發(fā)負(fù)擔(dān)以專注于產(chǎn)品創(chuàng)新，同時(shí)縮短開發(fā)周期、節(jié)省開發(fā)投入、快速進(jìn)入市場(chǎng)。

本文案例中使用的是LeanCloud最知名的云存儲(chǔ)技術(shù)。注冊(cè)用戶可以使用在線控制面板從云端管理云端數(shù)據(jù)存儲(chǔ)，就像傳統(tǒng)的DBA管理后臺(tái)數(shù)據(jù)庫一樣，而且更為輕松安全。

二、 Wex5簡(jiǎn)介

北京起步科技研發(fā)的Wex5系統(tǒng)正是適應(yīng)時(shí)代要求及時(shí)推出的一款HTML5應(yīng)用開發(fā)環(huán)境?；赪ex5可以快速開發(fā)出一個(gè)跨越桌面和移動(dòng)設(shè)備的應(yīng)用程序。下圖展示了Wex5框架組成示意圖。

概括來看，選擇Wex5開發(fā)HTML5應(yīng)用具有如下優(yōu)勢(shì)：

開源免費(fèi)：WeX5采用Apache許可證開源模式，商業(yè)友好，完全免費(fèi)。
基于主流技術(shù)和標(biāo)準(zhǔn)：WeX5前端采用HTML5+CSS+JS標(biāo)準(zhǔn)，使用AMD規(guī)范的requirejs、bootstrap、jquery等技術(shù)；WeX5手機(jī)APP基于phonegap（cordova）采用混合應(yīng)用（hybridapp）開發(fā)模式；WeX5支持多種類型的后端，包括Java、PHP和.NET等，同時(shí)也支持云API。

WeX5對(duì)跨平臺(tái)多前端支持極好，一次開發(fā)，多平臺(tái)運(yùn)行。目前，WeX5支持的前端有：

移動(dòng)APP（蘋果APP和安卓APP）；
微信應(yīng)用（包括公眾號(hào)、服務(wù)號(hào)和企業(yè)應(yīng)用號(hào)）；
PC瀏覽器；
其它輕應(yīng)用（如百度直達(dá)號(hào)）；
WeX5堅(jiān)決走開源和開放的道路，WeX5在支持后端技術(shù)和后端部署上，體現(xiàn)出極端徹底的開放性：
開放的后端技術(shù)支持：WeX5的后端完全開放，可通過http和websocket等協(xié)議連接各種后端中間件或云服務(wù)（Java、PHP、.NET等）；
WeX5的部署完全開放自由，無任何限制，可以部署在任何公有云或私有云服務(wù)器上。

WeX5的IDE基于eclipse，提供了一個(gè)完全可視化、組件化、拖曳式開發(fā)環(huán)境，完全所見即所得；向?qū)Щ湍０寤裙ぞ撸焖偕沙Ｒ姂?yīng)用場(chǎng)景界面。

WeX5的UI組件體系完全基于HTML5+CSS+JS，使用requirejs、jquery和bootstrap技術(shù)，內(nèi)置支持大量豐富的UI組件；針對(duì)一些常用的場(chǎng)景，WeX5提供了豐富的向?qū)В阌诳焖贅?gòu)建應(yīng)用。

WeX5基于phonegap（cordova）采用混合應(yīng)用（hybridapp）開發(fā)模式，可以輕松調(diào)用手機(jī)設(shè)備和硬件能力，如相機(jī)、地圖、LBS定位、指南針、通話錄、文件、語音、電池等等，針對(duì)設(shè)備的本地能力，WeX5提供了豐富的cordova插件。

在WeX5上，不僅可以使用內(nèi)置的組件、向?qū)Ш蚦ordova插件，你也可以根據(jù)自己的需要，擴(kuò)展定義自己的組件、向?qū)Ш蚦ordova插件；如果你覺得bootstrap樣式不是你想要的，你也可以在WeX5上做出一套基于別的樣式庫（例如Semantic UI）的組件和向?qū)А?o:p>

開發(fā)手機(jī)APP，模擬調(diào)試是關(guān)鍵能力，對(duì)開發(fā)者極端重要，而這也是業(yè)務(wù)現(xiàn)有hybridapp開發(fā)工具的軟肋。WeX5對(duì)hybridapp開發(fā)提供了業(yè)務(wù)最強(qiáng)大的調(diào)試支持。

三、開發(fā)Wex5端應(yīng)用

啟動(dòng)Wex5 Studio，在資源模型管理器的UI2文件夾上面單擊右鍵新建一個(gè)應(yīng)用程序“Wex5ToLeanCloud”。

在文件夾Wex5ToLeanCloud上面單擊右鍵新建一個(gè).w文件Index.w，使用“標(biāo)準(zhǔn)頁面”模板創(chuàng)建，如圖所示。

之后，在Index.w頁面上添加一個(gè)按鈕組件“開始測(cè)試”（label修改為“開始測(cè)試”，xid修改為btnStart），如圖所示：

然后，為按鈕btnStart添加onClick事件（雙擊onClick事件行后面的空格即可使系統(tǒng)自動(dòng)切換到后臺(tái)js代碼視圖）。目前為止，此事件處理器內(nèi)我們暫不輸入代碼，如下所示：

Model.prototype.btnStartClick=function(event){ 
 
};

等接下來的LeanCloud云端設(shè)置結(jié)束后，再轉(zhuǎn)回頭來添加有關(guān)代碼。

四、 LeanCloud云端工作

首先，登錄Leancloud.cn網(wǎng)站，并在管理面板中點(diǎn)擊命令“創(chuàng)建應(yīng)用”，輸入新應(yīng)用名稱“Wex5ToLeanCloud”，最后點(diǎn)擊“創(chuàng)建”，如圖所示。

在上面創(chuàng)建成功應(yīng)用程序后，切換到控制面板的“設(shè)置”頁并從“應(yīng)用Key”項(xiàng)下記錄下程序?qū)?yīng)的AppID和AppKey。后面在Wex5編程的js代碼中還要使用這兩個(gè)重要數(shù)據(jù)。

【提示】其實(shí)，使用LeanCloud的控制面板我們還可以做其他大量工作，例如創(chuàng)建供客戶端調(diào)用的數(shù)據(jù)結(jié)構(gòu)，進(jìn)行安全管理，導(dǎo)出云端數(shù)據(jù)，等等。

五、 Wex5端連接到LeanCloud云端

現(xiàn)在，我們承接前面Index.x后臺(tái)js代碼來繼續(xù)修改有關(guān)代碼，如下所示：

define(function(require){ 
var$=require("jquery"); 
varjustep=require("$UI/system/lib/justep"); 
//①加載LeanCloud相關(guān)js腳本  
require("https://cdn1.lncld.net/static/js/av-mini-0.6.4.js"); 
varModel=function(){ 
this.callParent(); 
//②LeanCloudSDK的初始化 
AV.initialize('hQWAUTOld23aYK1jjdoBWans-gzGzoHsz','eJLPGOEw7dsFxQhAwMjCKERb'); 
//啟用美國(guó)節(jié)點(diǎn)時(shí)還需要添加如下語句，本例不需要—因?yàn)槲覀兪褂玫氖菄?guó)內(nèi)節(jié)點(diǎn)！ 
//AV.useAVCloudUS(); 
};  
Model.prototype.btnStartClick=function(event){  
//③ 
var ZXZTestObject=AV.Object.extend('TestObject'); 
var zxzTestObject=new ZXZTestObject(); 
zxzTestObject.save({ 
testField:'HelloWorld!' 
}).then(function(){ 
alert('Congratulation,Wex5toLeanCloud works!'); 
}).catch(function(err){ 
alert('error:'+err); 
}); 
}; 
returnModel;  
});

現(xiàn)在，我們來細(xì)致分析一下上述代碼。首先，①處負(fù)責(zé)加載LeanCloud相關(guān)js腳本。其次，在②處的模型Model構(gòu)造函數(shù)中實(shí)現(xiàn)初始化LeanCloudSDK。最后，③處負(fù)責(zé)創(chuàng)建一個(gè)簡(jiǎn)單的LeanCloud云端對(duì)象（繼承自AV.Object），并命名對(duì)象為TestObject。在接下來的save方法調(diào)用中，創(chuàng)建了一個(gè)字符串型屬性testField，并賦值為“HelloWorld”。如你所猜想的，save方法負(fù)責(zé)把本地創(chuàng)建的數(shù)據(jù)保存到云端服務(wù)器上。在上述調(diào)用成功時(shí)觸發(fā)回調(diào)函數(shù)并顯示成功調(diào)用信息；調(diào)用失敗時(shí)顯示錯(cuò)誤提示。

六、運(yùn)行

現(xiàn)在，啟動(dòng)Tomcat應(yīng)用程序服務(wù)器，然后在Index.w文件上面單擊右鍵并選擇“用瀏覽器運(yùn)行”命令。此后，系統(tǒng)會(huì)啟動(dòng)Wex5系統(tǒng)自身攜帶的GoogleChrome瀏覽器。頁面啟動(dòng)正常后，點(diǎn)擊按鈕“開始測(cè)試”，略微等待一段時(shí)間后，即可看到如圖所示結(jié)果。

打開LeanCloud.cn的應(yīng)用程序Wex5ToLeanCloud后臺(tái)管理面板的“存儲(chǔ)”管理頁面，你會(huì)注意到“數(shù)據(jù)”欄出現(xiàn)TestObject對(duì)象，點(diǎn)擊后在后面出現(xiàn)相應(yīng)的自Wex5客戶端創(chuàng)建的數(shù)據(jù)，如圖所示。

至此，Wex5端連接LeanCloud云端并修改云端操作測(cè)試成功！

當(dāng)然，因?yàn)槭褂肳ex5開發(fā)出的應(yīng)用是跨平臺(tái)的，所以，你可以非常容易地把上述示例運(yùn)行于iOS平臺(tái)和Android平臺(tái)上。

七、小結(jié)

Wex5開發(fā)框架不僅開源免費(fèi)而且基于主流HTML5技術(shù)和開發(fā)標(biāo)準(zhǔn)?；诖似脚_(tái)，程序員可以快速地開發(fā)桌面Ｗeb應(yīng)用、手機(jī)Ｗeb應(yīng)用（包括微信應(yīng)用）和手機(jī)APP混合應(yīng)用。更可喜的是，WeX5支持多種類型的后端，包括Java、PHP和.NET等，同時(shí)也支持云API。因此，WeX5成為國(guó)內(nèi)開發(fā)HTML5應(yīng)用的首先框架。同時(shí)，BaaS也是云計(jì)算時(shí)代存儲(chǔ)技術(shù)的最流行方案。而Wex5的高度開發(fā)性使得其可以很輕易地集成各種BaaS方案（本文的LeanCloud即是其中之一）。本文給出的僅僅是Wex5應(yīng)用集成LeanCloud BaaS技術(shù)的基本框架示例，更實(shí)用的和更富于挑戰(zhàn)性的應(yīng)用還有待各位深入展開探索。

附，本文示例程序測(cè)試環(huán)境：