HTML5移動(dòng)應(yīng)用開(kāi)發(fā)工具AppCan-SDK

AppCan SDK是專(zhuān)為AppCan平臺(tái)開(kāi)發(fā)者提供的全方位的集成調(diào)試環(huán)境，可以幫助開(kāi)發(fā)者使用HTML5快速的構(gòu)建iOS/Android手機(jī)應(yīng)用。

AppCan移動(dòng)快速開(kāi)發(fā)平臺(tái)是基于HTML5技術(shù)的跨平臺(tái)快速開(kāi)發(fā)解決方案。開(kāi)發(fā)者利用HTML5+CSS3+JavaScript技術(shù)可以快速的開(kāi)發(fā)與本地應(yīng)用相媲美的應(yīng)用。AppCan平臺(tái)提供了UI快速開(kāi)發(fā)框架、手機(jī)本地功能調(diào)用Api接口、AppCan應(yīng)用打包系統(tǒng)、AppCan集成開(kāi)發(fā)IDE環(huán)境和AppCan模擬器。完善的框架接口，強(qiáng)大的服務(wù)支持，使開(kāi)發(fā)者可以快速的進(jìn)入移動(dòng)開(kāi)發(fā)領(lǐng)域。

AppCan是國(guó)內(nèi)Hybrid App混合模式開(kāi)發(fā)的倡導(dǎo)者，AppCan應(yīng)用引擎支持Hybrid App的開(kāi)發(fā)和運(yùn)行。并且著重解決了基于HTML5的移動(dòng)應(yīng)用目前"不流暢"和"體驗(yàn)差"的問(wèn)題。使用AppCan應(yīng)用引擎提供的Native交互能力，可以讓HTML5開(kāi)發(fā)的移動(dòng)應(yīng)用基本接近Native App的體驗(yàn)。

與Phonegap支持單一webview使用div為單位開(kāi)發(fā)移動(dòng)應(yīng)用不同。AppCan支持多窗口機(jī)制，讓開(kāi)發(fā)者可以像最傳統(tǒng)的網(wǎng)頁(yè)開(kāi)發(fā)一樣，通過(guò)頁(yè)面鏈接的方式靈活的開(kāi)發(fā)移動(dòng)應(yīng)用�；�于這種機(jī)制，開(kāi)發(fā)者可以開(kāi)發(fā)出大型的移動(dòng)應(yīng)用，而不是只能開(kāi)發(fā)簡(jiǎn)易類(lèi)型的移動(dòng)應(yīng)用。

AppCan提供強(qiáng)大的設(shè)備調(diào)用能力，電話、短信、相機(jī)、LBS、傳感器、數(shù)據(jù)庫(kù)等常用的手機(jī)功能，開(kāi)發(fā)者可以通過(guò)JS接口調(diào)用，輕松構(gòu)建移動(dòng)應(yīng)用。

UI2.0與UI1.0的對(duì)比：

2012年初，我們發(fā)布了AppCan移動(dòng)應(yīng)用開(kāi)發(fā)平臺(tái)，在這個(gè)版本中，我們內(nèi)置了基于JQMobile方案的CSS UI框架。這個(gè)框架可以幫助開(kāi)發(fā)者遵循一套規(guī)則下，快速的開(kāi)發(fā)應(yīng)用。這套方案中主要采用了組合的概念。例如對(duì)一個(gè)按鈕的描述，可以通過(guò)多個(gè)CSS類(lèi)來(lái)組合進(jìn)行定義。這樣通過(guò)不同的組合可以生成多變的效果。在實(shí)際商用應(yīng)用開(kāi)發(fā)過(guò)程中，他極大的幫助我們加快了開(kāi)發(fā)進(jìn)度。但是在開(kāi)發(fā)過(guò)程中，我們還是遇到了一些問(wèn)題，JQMobile CSS框架在這些問(wèn)題上，比較乏力。

1. 自動(dòng)填充寬度

上圖中同樣一個(gè)編輯框加上一個(gè)刷新按鈕的組合。在不同分辨率下，如果希望，刷新按鈕保持一個(gè)基本寬度，編輯框自動(dòng)填充剩余區(qū)域，在不使用JS的情況下是很難做到的，如果使用百分比控制刷新鈕的寬度，那么在低分辨率和高分辨率之間將會(huì)有非常大的偏差。

2. 類(lèi)名稱(chēng)過(guò)長(zhǎng)

JQMobile方案中，為了幫助開(kāi)發(fā)者能夠更直觀的了解代碼，每一個(gè)功能類(lèi)的名稱(chēng)都比較長(zhǎng)。例如ui-page ui-mobile-viewport等。但這造成了網(wǎng)頁(yè)代碼大小變大，降低了解析速度。

3. 類(lèi)功能拆分度低

在JQMobile方案中，很多類(lèi)定義，代碼重復(fù)較多，例如預(yù)制的多種色彩方案。同時(shí)由于拆分度低，經(jīng)常需要重復(fù)定義類(lèi)來(lái)覆蓋其他類(lèi)中的屬性。

4. 控件組合復(fù)雜

JQMobile方案中，控件的實(shí)現(xiàn)代碼量很大，一個(gè)按鈕需要多個(gè)div span嵌套配合多個(gè)類(lèi)才能實(shí)現(xiàn)。這造成開(kāi)發(fā)中，界面代碼量增大，不好控制界面。

我們綜合各個(gè)項(xiàng)目中的開(kāi)發(fā)經(jīng)驗(yàn)，整理匯總了AppCan UI2.0架構(gòu)，它在繼承了UI1.0的優(yōu)點(diǎn)之上，極大地解決了UI1.0的問(wèn)題，可以使開(kāi)發(fā)能夠更加的簡(jiǎn)單。UI2.0框架圖如下

上圖中，我們可以看到AppCan UI2.0框架在基礎(chǔ)的屏幕適配(RESOLUTION ADAPTER CLASS)基礎(chǔ)上，對(duì)元素基本屬性進(jìn)行了拆分。通過(guò)如下步驟來(lái)設(shè)定一個(gè)元素。

l 定位-對(duì)元素進(jìn)行布局，確定元素的現(xiàn)實(shí)位置大小等[LAYOUT CLASS]

l 描邊-對(duì)元素基礎(chǔ)屬性進(jìn)行設(shè)定，例如邊框圓角等[BASE CLASS]

l 添色-對(duì)元素的邊框、文字和背景進(jìn)行設(shè)定[COLOR CLASS]

l 插圖-如果元素中需要圖片，從資源中引入圖片類(lèi)[RES CLASS]

基于基礎(chǔ)元素之上，為了方便開(kāi)發(fā)者，我們重新定義了控件，包含BUTTON、LIST、FOLD、INPUT、TAB、RADIO、CHECK、SWITCH。這些控件可以認(rèn)為是UI2.0框架的具體事例。通過(guò)UI2.0完成的控件，代碼大小和復(fù)雜度，有極大的降低，如下例。

UI1.0框架實(shí)現(xiàn)的按鍵

UI2.0框架實(shí)現(xiàn)的按鈕

從上述代碼中可以看到，同樣功能和效果的控件可以減少三分之二的代碼，嵌套減少到一層，代碼復(fù)雜度極大降低。

接著我們?cè)敿?xì)介紹如何使用UI2.0框架。

AppCan應(yīng)用框架：

基于JQueryMobile UI方案的具有強(qiáng)大擴(kuò)充性的UI控件組（包含列表、按鈕、編輯框、等分網(wǎng)格、單選、復(fù)選按鈕等），高效的窗口管理系統(tǒng)，窗口消息系統(tǒng)、數(shù)據(jù)視圖映射庫(kù)，構(gòu)成了強(qiáng)大的AppCan應(yīng)用開(kāi)發(fā)框架。
通過(guò)我們提供的AppCan集成開(kāi)發(fā)環(huán)境，結(jié)合內(nèi)置的UI界面控件向?qū)В�利用豐富的平臺(tái)調(diào)用接口和各種擴(kuò)展功能，用戶(hù)可以利用HTML5技術(shù)快速的開(kāi)發(fā)功能強(qiáng)大的富客戶(hù)端應(yīng)用。利用定制的UI適配方案，開(kāi)發(fā)者可以用極少的工作量完成各種終端的適配工作。強(qiáng)大的插件系統(tǒng)，使開(kāi)發(fā)者可以隨時(shí)集成用戶(hù)自定義的插件并發(fā)布給最終用戶(hù)。 

公司開(kāi)發(fā)人員的UI設(shè)計(jì)規(guī)則：

1. 制作前先考慮好如何組織頁(yè)面，需要如何布局，在什么地方需要幾個(gè)容器來(lái)進(jìn)行排版。然后構(gòu)建架子，使用默認(rèn)效果類(lèi)進(jìn)行排版定位和美化

2. 如果需要使用顏色，請(qǐng)?jiān)趗i-color.css中根據(jù)文本、背景、遮蓋、邊框等分別擴(kuò)展自己的類(lèi)定義

3. 如果需要調(diào)整圓角、邊距等附加屬性請(qǐng)?jiān)趗i-base.css中進(jìn)行添加。

4. 如果需要資源，請(qǐng)?jiān)趗i-res.css中進(jìn)行擴(kuò)展

5. 如果需要布局，請(qǐng)?jiān)趗i-box.css中進(jìn)行調(diào)整

6. 所有調(diào)整要遵循默認(rèn)的命名規(guī)則。