AppCanIDE概述

AppCan IDE是基于Eclipse定制的移動(dòng)集成開發(fā)環(huán)境，專為無Native開發(fā)經(jīng)驗(yàn)的HTML開發(fā)人員設(shè)計(jì)。
AppCan IDE幫助HTML開發(fā)人員在無需任何原生環(huán)境輔助下即可完成高體驗(yàn)效果應(yīng)用的開發(fā)、調(diào)試、跟蹤和模擬，并可借助內(nèi)嵌的應(yīng)用打包功能，創(chuàng)建可直接安裝到手機(jī)的本地應(yīng)用安裝包以便后續(xù)測(cè)試應(yīng)用。

跨平臺(tái)支持

AppCan IDE可以用于支持iOS、Android平臺(tái)手機(jī)和平板的高體驗(yàn)Hybrid應(yīng)用的開發(fā)。通過AppCan Hybrid技術(shù)，HTML開發(fā)人員遵循基于標(biāo)準(zhǔn)CSS技術(shù)的AppCan 移動(dòng)開發(fā)UI參考框架，即可完成一次開發(fā)，多平臺(tái)適配，在各種分辨率的移動(dòng)終端上保持相同的體驗(yàn)。AppCan UI框架提供了極高的適配性和自主性，開發(fā)人員可以沒有束縛地根據(jù)需求、UI設(shè)計(jì)完成應(yīng)用界面及邏輯的開 發(fā)。

HTML5支持

AppCan IDE采用國(guó)際通用的HTML語(yǔ)言作為跨平臺(tái)支撐語(yǔ)言，同時(shí)借助于AppCan Hybrid技術(shù)以終端內(nèi)嵌瀏覽器為核心的設(shè)計(jì)理念，使開發(fā)人員可以直接采用HTML5技術(shù)完成應(yīng)用功能的開發(fā)?；跇I(yè)界公認(rèn)的HTML5的強(qiáng)大能力和廣泛的開發(fā)用戶群體，開發(fā)人員不需要重新學(xué)習(xí)私有標(biāo)準(zhǔn)，即可完成復(fù)雜功能的實(shí)現(xiàn)。

UI模版支持

AppCan IDE內(nèi)嵌了電商、新聞等多套業(yè)界經(jīng)典應(yīng)用模板，開發(fā)人員可以基于模板快速構(gòu)建應(yīng)用框架，同時(shí)IDE還內(nèi)嵌了登錄、注冊(cè)、個(gè)人信息、購(gòu)物車等等超過百款移動(dòng)經(jīng)典窗口布局模板，并以界面向?qū)Х绞浇桓?，有效幫助開發(fā)者快速完成應(yīng)用的界面和功能拼裝。

本地打包支持

AppCan IDE內(nèi)嵌開發(fā)版應(yīng)用打包服務(wù)，開發(fā)人員可以在個(gè)人PC機(jī)上完成開發(fā)版本應(yīng)用安裝包的生成，并可在手機(jī)中安裝驗(yàn)證應(yīng)用的實(shí)現(xiàn)效果與問題解決情況。開發(fā)人員可以在本地配置應(yīng)用啟動(dòng)界面、圖標(biāo)，還可以動(dòng)態(tài)選擇應(yīng)用所用的公共插件和自定義插件。打包服務(wù)會(huì)自動(dòng)聚合各插件庫(kù)、引擎和應(yīng)用HTML代碼。通過生成的安裝包，可以直接驗(yàn)證插件的功能，便于插件開發(fā)人員與HTML開發(fā)人員進(jìn)行聯(lián)調(diào)，同時(shí)還可驗(yàn)證應(yīng)用圖標(biāo)、啟動(dòng)圖片等資源的實(shí)際展示效果。

本地模擬調(diào)試

AppCan IDE提供基于Chrome內(nèi)核的模擬器，可以在PC上完成移動(dòng)應(yīng)用的界面模擬、通訊模擬、設(shè)備模擬。開發(fā)者可以在模擬器中動(dòng)態(tài)跟蹤和調(diào)試代碼，變更顯示效果，作斷點(diǎn)調(diào)試。

真機(jī)同步調(diào)試

AppCan IDE為開發(fā)者提供了Android和iOS平臺(tái)的真機(jī)同步調(diào)試功能，不僅能快速方便檢查HTML頁(yè)面DOM結(jié)構(gòu)、實(shí)時(shí)同步更新元素CSS樣式，還能跟蹤分析頁(yè)面資源加載性能等問題，幫助開發(fā)者高效、便捷的調(diào)試應(yīng)用。

IDE新版特色

AppCan IDE 3.1版本更加人性化，提供應(yīng)用向?qū)Ш徒缑嫦驅(qū)В瑑?nèi)置多種主題方案、UI控件及數(shù)百種界面模板，支持項(xiàng)目同步，支持本地應(yīng)用打包、本地模擬調(diào)試和真機(jī)實(shí)時(shí)同步調(diào)試，引擎插件再次升級(jí)適配iOS8,代碼提示無憂編程，助開發(fā)者快速上手，高效創(chuàng)建專業(yè)應(yīng)用。

AppCan IDE 3.2新版特色：

1）、新增邊改邊看實(shí)時(shí)預(yù)覽功能，支持代碼調(diào)試、插件模擬
2）、新增Web/微信 App打包功能，可將移動(dòng)應(yīng)用快速轉(zhuǎn)換為移動(dòng)網(wǎng)站和微信網(wǎng)站
3）、優(yōu)化版本更新，提示新版本更新日志
4）、引擎、插件強(qiáng)大升級(jí)
5）、豐富穩(wěn)定的UI組件，海量的行業(yè)頁(yè)面模版
6）、項(xiàng)目云端同步，多人協(xié)同開發(fā)
7）、真機(jī)實(shí)時(shí)同步調(diào)試
8）、優(yōu)化代碼提示

IDE八大改進(jìn)

IDE新版上線了，在IDE新版本上開發(fā)者會(huì)發(fā)現(xiàn)幾大改變，這些改變能讓開發(fā)者更快速、 高效的開發(fā)更加穩(wěn)定的項(xiàng)目。

1）appcan.ready替換window.uexOnload

在新版本中使用appcan.ready替換window.uexOnload,并且在同一html頁(yè)面中可以多次調(diào)用appcan.ready。新代碼如下：

appcan.ready(function() {
            var titHeight = $('#header').offset().height;
            appcan.frame.open("content", "index_content.html", 0, titHeight);
            window.onorientationchange = window.onresize = function() {
                appcan.frame.reisze("content", 0, titHeight);
            }
});

2）重新定義頁(yè)面彈動(dòng)刷新功能

在新版本中，重新定義了頁(yè)面的彈動(dòng)刷新方法。將多個(gè)零散的方法進(jìn)行封裝統(tǒng)一調(diào)用，簡(jiǎn)化插件調(diào)用步驟，更容易實(shí)現(xiàn)彈動(dòng)刷新功能。原來我們調(diào)用此功能的代碼要調(diào)用以下方法：

uexWindow.setBounce(flag)；
uexWindow.notifyBounceEvent(type, status)；
uexWindow.showBounceView(type, color, flag)；
uexWindow.resetBounceView(type)；
uexWindow.setBounceParams(type, json)；
uexWindow.hiddenBounceView(type)；
uexWindow.onBounceStateChange
現(xiàn)在，我們只需按如下代碼調(diào)用即可：

appcan.frame.setBounce([0,1], function(type) {
                $("#pullstatus"+type).html(!type?"開始下拉":"開始上拖");
            }, function(type) {
                $("#pullstatus"+type).html(!type?"下拉超過臨界點(diǎn),產(chǎn)生事件了！":"超過臨界點(diǎn),產(chǎn)生事件了！");
            }, function(type) {
                $("#pullstatus"+type).html("松手了,產(chǎn)生事件了,開始更新數(shù)據(jù)！");
                setTimeout(function() {
                    appcan.frame.resetBounce(type);
                    $("#pullstatus"+type).html("");
                    demo.add(updateData,type);
                }, 1000);
});

3）修改UI控件實(shí)現(xiàn)方式

在新版本中，重新定義UI控件的實(shí)現(xiàn)方式，減少代碼的編寫量，更加快速便捷的實(shí)現(xiàn)功能及界面展現(xiàn)。如listview控件，在之前的版本中我們實(shí)現(xiàn)列表，在html中直接加入列表的具體代碼，數(shù)據(jù)拼裝及顯示需要進(jìn)行代碼的具體編寫控制；而在新版本中我們通過js控制只需填入關(guān)鍵數(shù)據(jù)即可實(shí)現(xiàn)模版數(shù)據(jù)的拼裝及顯示。如下面這段js：

var updateData = [{
            title : "飛行模式",
            icon : "../css/res/appcan_s.png",
            "switch":{
                mini:true,
                value:false
            }
        }, {
            title : "藍(lán)牙",
            subTitle:"打開",
            icon : "../css/res/appcan_s.png"
        }];
        var lv1 = appcan.listview({
            selector : "#listview",
            type : "thinLine",
            hasIcon : false,
            hasAngle : true,
            hasSubTitle : false,
            multiLine : 1,
            hasControl : true,
            align : 'left'
        });
        lv1.set(updateData);

上面這段js代碼是直接生成，我們只需將updateData里的數(shù)據(jù)換成我們要顯示的數(shù)據(jù)即可。

4）集成backbonejs、zeptojs和underscorejs進(jìn)而與jQuery等寫法兼容

在原來的版本中，我們使用$$通過id獲取元素的dom，除此之外未提供任何快捷方法，現(xiàn)在我們可以直接使用$加元素選擇器的方式獲取我們想要的dom，并且對(duì)dom進(jìn)行操作了。通過這種方式編寫，讓習(xí)慣了使用第三方框架的開發(fā)者更加快捷高速的進(jìn)行編碼。如$(“#id”).removeClass、$(body)等。

5）推出js sdk對(duì)底層的接口進(jìn)行更高層的封裝，統(tǒng)一規(guī)范接口調(diào)用體系。

使用IDE3.1版本，開發(fā)者會(huì)發(fā)現(xiàn)在新建的項(xiàng)目里的js文件換了，這里appcan根據(jù)自己的需求封裝的一個(gè)開發(fā)庫(kù)- AppCan javascript sdk，對(duì)底層的接口進(jìn)行更高層的封裝，能讓開發(fā)者更快速、 高效的開發(fā)更加穩(wěn)定的項(xiàng)目，該庫(kù)依賴backbonejs、zeptojs、underscorejs默認(rèn)打包在基礎(chǔ)庫(kù)中，開發(fā)者不需要進(jìn)行額外的引用，另外在該庫(kù)的基礎(chǔ)上提供了豐富的插件，能讓開發(fā)者更高效的開發(fā)app。
這個(gè)封裝的庫(kù)里分為很多模塊，如文件模塊file，網(wǎng)絡(luò)請(qǐng)求request等?，F(xiàn)在我們使用uexWindow的一些方法，我們可以在appcan.window中找到，浮動(dòng)窗口的相關(guān)方法在appcan.frame中找到。

6）增加調(diào)試中心功能

AppCan調(diào)試中心是AppCan IDE為開發(fā)者提供的一款可真機(jī)同步調(diào)試的門戶應(yīng)用，在同一wifi環(huán)境下，它與pc端工作空間相關(guān)連，擺脫數(shù)據(jù)線，無需二次打包，就可實(shí)時(shí)測(cè)試修改應(yīng)用。此外AppCan IDE3.1為開發(fā)者提供了Android和iOS平臺(tái)真機(jī)同步調(diào)試功能，只需配置當(dāng)前應(yīng)用的config文件，真機(jī)上的應(yīng)用就可實(shí)現(xiàn)與PC端的實(shí)時(shí)同步調(diào)試功能，幫助開發(fā)者高效率、便捷的調(diào)試應(yīng)用。

7）新增配色主題選擇功能

針對(duì)舊版本自由調(diào)色導(dǎo)致配色出現(xiàn)不和諧問題，新版新建項(xiàng)目即將完成時(shí)新增配色主題選擇功能，在不同的主題下項(xiàng)目的按鈕、邊框、背景等配色進(jìn)行統(tǒng)一更改，進(jìn)而免除了開發(fā)者對(duì)項(xiàng)目的配色煩惱。目前的主題色為中國(guó)紅、蜜桃粉、青草綠、天際藍(lán)、子夜黑五種主題色。

8）IOS7及以上系統(tǒng)狀態(tài)欄自動(dòng)設(shè)置

新版本針對(duì)IOS7及以上系統(tǒng)狀態(tài)欄做了自動(dòng)設(shè)置，只要是新建的項(xiàng)目，此功能代碼已加入到j(luò)s及css代碼中，開發(fā)者不需要為這個(gè)問題單獨(dú)進(jìn)行設(shè)置。