基于LeanCloud和Wex5開發跨平臺HTML5應用程序
原創隨著HTML5技術的標準化，全球范圍內迅速掀起了HTML5應用程序的開發熱潮。這是因為借助于HTML5技術程序員可以相對容易和迅速地開發出適用于桌面和移動設備的跨平臺應用軟件。本文將介紹基于Wex5高級HTML5開發環境并集成LeanCloud提供的BaaS技術開發HTML5應用程序的完整流程與關鍵步驟。
一、 LeanCloud簡介
LeanCloud是國內的移動應用一站式云服務。LeanCloud提供了數據存儲、實時消息、統計分析以及多種擴展組件，全面涵蓋移動應用開發的需求，支持iOS、Android、Web等多平臺。LeanCloud產品旨在幫助開發者擺脫后端開發負擔以專注于產品創新，同時縮短開發周期、節省開發投入、快速進入市場。
本文案例中使用的是LeanCloud最知名的云存儲技術。注冊用戶可以使用在線控制面板從云端管理云端數據存儲，就像傳統的DBA管理后臺數據庫一樣，而且更為輕松安全。
二、 Wex5簡介
北京起步科技研發的Wex5系統正是適應時代要求及時推出的一款HTML5應用開發環境。基于Wex5可以快速開發出一個跨越桌面和移動設備的應用程序。下圖展示了Wex5框架組成示意圖。
概括來看，選擇Wex5開發HTML5應用具有如下優勢：
- 開源免費：WeX5采用Apache許可證開源模式，商業友好，完全免費。
- 基于主流技術和標準：WeX5前端采用HTML5+CSS+JS標準，使用AMD規范的requirejs、bootstrap、jquery等技術；WeX5手機APP基于phonegap（cordova）采用混合應用（hybridapp）開發模式；WeX5支持多種類型的后端，包括Java、PHP和.NET等，同時也支持云API。
WeX5對跨平臺多前端支持極好，一次開發，多平臺運行。目前，WeX5支持的前端有：
- 移動APP（蘋果APP和安卓APP）；
- 微信應用（包括公眾號、服務號和企業應用號）；
- PC瀏覽器；
- 其它輕應用（如百度直達號）；
- WeX5堅決走開源和開放的道路，WeX5在支持后端技術和后端部署上，體現出極端徹底的開放性：
- 開放的后端技術支持：WeX5的后端完全開放，可通過http和websocket等協議連接各種后端中間件或云服務（Java、PHP、.NET等）；
- WeX5的部署完全開放自由，無任何限制，可以部署在任何公有云或私有云服務器上。
WeX5的IDE基于eclipse，提供了一個完全可視化、組件化、拖曳式開發環境，完全所見即所得；向導化和模板化等工具，快速生成常見應用場景界面。
WeX5的UI組件體系完全基于HTML5+CSS+JS，使用requirejs、jquery和bootstrap技術，內置支持大量豐富的UI組件；針對一些常用的場景，WeX5提供了豐富的向導，便于快速構建應用。
WeX5基于phonegap（cordova）采用混合應用（hybridapp）開發模式，可以輕松調用手機設備和硬件能力，如相機、地圖、LBS定位、指南針、通話錄、文件、語音、電池等等，針對設備的本地能力，WeX5提供了豐富的cordova插件。
在WeX5上，不僅可以使用內置的組件、向導和cordova插件，你也可以根據自己的需要，擴展定義自己的組件、向導和cordova插件；如果你覺得bootstrap樣式不是你想要的，你也可以在WeX5上做出一套基于別的樣式庫（例如Semantic UI）的組件和向導。
開發手機APP，模擬調試是關鍵能力，對開發者極端重要，而這也是業務現有hybridapp開發工具的軟肋。WeX5對hybridapp開發提供了業務最強大的調試支持。
三、 開發Wex5端應用
啟動Wex5 Studio，在資源模型管理器的UI2文件夾上面單擊右鍵新建一個應用程序“Wex5ToLeanCloud”。
在文件夾Wex5ToLeanCloud上面單擊右鍵新建一個.w文件Index.w，使用“標準頁面”模板創建，如圖所示。
之后，在Index.w頁面上添加一個按鈕組件“開始測試”（label修改為“開始測試”，xid修改為btnStart），如圖所示：
然后，為按鈕btnStart添加onClick事件（雙擊onClick事件行后面的空格即可使系統自動切換到后臺js代碼視圖）。目前為止，此事件處理器內我們暫不輸入代碼，如下所示：
- Model.prototype.btnStartClick=function(event){
- };
等接下來的LeanCloud云端設置結束后，再轉回頭來添加有關代碼。
四、 LeanCloud云端工作
首先，登錄Leancloud.cn網站，并在管理面板中點擊命令“創建應用”，輸入新應用名稱“Wex5ToLeanCloud”，最后點擊“創建”，如圖所示。
在上面創建成功應用程序后，切換到控制面板的“設置”頁并從“應用Key”項下記錄下程序對應的AppID和AppKey。后面在Wex5編程的js代碼中還要使用這兩個重要數據。
【提示】其實，使用LeanCloud的控制面板我們還可以做其他大量工作，例如創建供客戶端調用的數據結構，進行安全管理，導出云端數據，等等。
五、 Wex5端連接到LeanCloud云端
現在，我們承接前面Index.x后臺js代碼來繼續修改有關代碼，如下所示：
- define(function(require){
- var$=require("jquery");
- varjustep=require("$UI/system/lib/justep");
- //①加載LeanCloud相關js腳本
- require("https://cdn1.lncld.net/static/js/av-mini-0.6.4.js");
- varModel=function(){
- this.callParent();
- //②LeanCloudSDK的初始化
- AV.initialize('hQWAUTOld23aYK1jjdoBWans-gzGzoHsz','eJLPGOEw7dsFxQhAwMjCKERb');
- //啟用美國節點時還需要添加如下語句，本例不需要—因為我們使用的是國內節點！
- //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;
- });
現在，我們來細致分析一下上述代碼。首先，①處負責加載LeanCloud相關js腳本。其次，在②處的模型Model構造函數中實現初始化LeanCloudSDK。最后，③處負責創建一個簡單的LeanCloud云端對象（繼承自AV.Object），并命名對象為TestObject。在接下來的save方法調用中，創建了一個字符串型屬性testField，并賦值為“HelloWorld”。如你所猜想的，save方法負責把本地創建的數據保存到云端服務器上。在上述調用成功時觸發回調函數并顯示成功調用信息；調用失敗時顯示錯誤提示。
六、 運行
現在，啟動Tomcat應用程序服務器，然后在Index.w文件上面單擊右鍵并選擇“用瀏覽器運行”命令。此后，系統會啟動Wex5系統自身攜帶的GoogleChrome瀏覽器。頁面啟動正常后，點擊按鈕“開始測試”，略微等待一段時間后，即可看到如圖所示結果。
打開LeanCloud.cn的應用程序Wex5ToLeanCloud后臺管理面板的“存儲”管理頁面，你會注意到“數據”欄出現TestObject對象，點擊后在后面出現相應的自Wex5客戶端創建的數據，如圖所示。
至此，Wex5端連接LeanCloud云端并修改云端操作測試成功！
當然，因為使用Wex5開發出的應用是跨平臺的，所以，你可以非常容易地把上述示例運行于iOS平臺和Android平臺上。
七、 小結
Wex5開發框架不僅開源免費而且基于主流HTML5技術和開發標準。基于此平臺，程序員可以快速地開發桌面Ｗeb應用、手機Ｗeb應用（包括微信應用）和手機APP混合應用。更可喜的是，WeX5支持多種類型的后端，包括Java、PHP和.NET等，同時也支持云API。因此，WeX5成為國內開發HTML5應用的首先框架。同時，BaaS也是云計算時代存儲技術的最流行方案。而Wex5的高度開發性使得其可以很輕易地集成各種BaaS方案（本文的LeanCloud即是其中之一）。本文給出的僅僅是Wex5應用集成LeanCloud BaaS技術的基本框架示例，更實用的和更富于挑戰性的應用還有待各位深入展開探索。
附，本文示例程序測試環境：
- Mac OSX 10.11
- Wex5 Version 3.4
