AppCan移動應用跨平臺開發面面觀
國內首個基于HTML5技術的移動應用開發平臺AppCan公測以來，擁有了第一批的開發者。官方也組織了扶持計劃，首次扶持50個團隊，這些團隊中有個人開發者，有創業團隊，也有企業商業項目。然而，有不少的團隊和開發者對AppCan平臺的開發還是感到陌生，不知如何著手。因此，本文會介紹下AppCan平臺開發的一些基礎，希望能夠對開發者有所幫助。
開發工具
在官方的DEV文檔中，找到“AppCan SDK 入門指南”，下載SDK安裝包。AppCan SDK是基于Eclipse進行插件開發的，同時又集成了以Chrome內核為基礎的運行模擬器，此模擬器擴展了uex前綴（即AppCan的API）的JS對象。而Chrome自帶的“Developer-Tools”（在頁面中點擊右鍵，選擇‘審查元素’）給css調試及JS調試帶來了方便，這個工具希望開發者能夠利用起來，能夠在很大程度上解決css及JS的一些問題。
在官方的DEV文檔中，開發者能夠看到“AppCan SDK真機調試環境”。這個工具是做什么用的呢？由于HTML5+css，在Chrome中的效果和在手機上的效果有些差距：PC 版本webkit(瀏覽器引擎，Chrome和Safari及IOS，Android瀏覽器都采用此引擎)上支持的一些css屬性在手機版webkit上并不支持。因此，開發者開發的應用需要在真機上運行看效果。然而，通過AppCan SDK打包生成安裝包，然后安裝到手機上去查看效果，如此反復，定會影響開發效率。為此，AppCan提供了player版本，只需要安裝player，開發者只需把應用包（網頁包）拷貝到手機相應的目錄下即可。比如下載Android Player是一個.apk的安裝包，安裝到手機上后，把需要調試的應用包（在AppCan SDK中創建項目目錄下的android_iphone目錄）拷貝到“sdcard/widgetone/widgetapp”目錄下，運行player程序，進入即可看到開發者拷貝進去的應用的icon，點擊icon進入應用。而利用uexLog.sendLog接口，可以在手機上運行JS時，把log信息輸出到AppCan SDK的Log控制臺。
關于通訊
利用AppCan平臺開發的應用，里面的網頁包，即html頁面都是在手機本地保存的，那么這些頁面如何與服務器進行通訊呢？很多開發者都有這個疑問。這里需要了解一個“Ajax跨域請求”的概念。離線的一個html頁面異步去請求一個網絡的鏈接，這個請求是屬于Ajax跨域請求問題。Ajax跨域請求是有安全限制的，這一安全限制是瀏覽器的行為，即所有支持JavaScript的瀏覽器都實現了同源策略這一安全策略。
那么，既然有限制，如何解決呢？這里介紹兩種方式，第一、利用JSONP方式，JSONP是JSON with Padding的略稱，它是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問。--（來源百度）在大家比較常用的jquery.js中就利用JSONP方式實現了Ajax跨域請求：$.getJSON(url,[data],[callback])；第二、利用AppCan提供的uexXmlHttpMgr對象，此方法也是利用callback的形式實現跨域訪問。并且，uexXmlHttpMgr還擴展了Post方式請求，即還能實現文件上傳。
關于窗口機制
AppCan提供了一套窗口機制，用來提升應用的交互體驗。利用“多窗口機制”，開發者可以把不同html頁面放到不同的窗口中。比如A窗口加載a.html，B窗口加載b.html。A窗口中的JS代碼可以通過uexWindow.open方法打開B窗口，此時B窗口執行，而A窗口在后臺掛起。當B窗口中的JS代碼關掉（uexWindow.close）當前窗口時，A窗口從后臺掛起狀態回到當前執行狀態。
AppCan還提供了“主+輔窗口機制”，由于在IOS5.0、Android2.2才開始支持css的position fixed屬性。因此在這些版本之前的設備上，基本無法實現導航欄固定，內容區域可以滾動的效果。而AppCan的“主+輔窗口”能夠用來固定導航欄的，實現上述效果，如下圖：
圖 一：主+輔窗口示意圖
AppCan也提供“浮動窗口機制”，可以在當前窗口中浮動一個窗口出來，這在做一些交互體驗中非常實用。而且，浮動窗口也可以一定程度上代替iframe，因為iframe在手機版webkit中支持比較弱，它不允許設置iframe的高和寬；甚至用了iframe的頁面會影響當前頁面其它內容的顯示。
關于開發的一些建議
在AppCan的扶持計劃中，有些開發者或團隊的項目將近完成。但看到其代碼書寫規范還是需要注意些，這也是為什么有些應用運行比較慢的原因：
Ø 建議所有UI，能夠用css3表示的都用css3去寫，而非用圖片代替。比如陰影，圓角，漸變色等。
Ø 建議所有的JS（即<script></script>）都放到</body>之后，這是因為html是阻塞執行的，如果<script></script>放到<head></head>中，JS中有加載觸發跨域請求的話，那么html執行到這會先去執行請求，而后去解析之后的<body></body>內容，看起來頁面加載緩慢。
Ø 建議所有用到uex前綴的AppCan API，都在window.uexOnload中執行。window.uexOnload等同于window.onload，只是前者是在uex對象的初始化工作完畢后才執行，此初始化工作需要幾毫秒；而后者是網頁一加載即可執行，會比window.uexOnload快一些。
Ø 建議在第一級頁面中，比如“主+輔窗口示意圖”中的下導航，有四個欄目，每個欄目點擊進去都是不同的而且是比較常用的功能。那么可以用四個窗口去加載這四個欄目，而不需要關掉（uexWindow.close）這個四個窗口，即讓這四個窗口在程序運行中一直存在。這樣，窗口從后臺掛起狀態轉入運行狀態，要比窗口重新開啟來的快。其他頁面的開關還是掛起，可根據具體業務需求而定。
Ø 在手機上的onclick事件是有延遲的，這也是為什么有些應用看起來會慢的原因。因此，如果有比較講究事件響應的應用，可以用ontouchstart,ontouchmove,ontouchend事件去模擬onclick事件。
