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