AppCanIDE概述

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

跨平臺支持

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

HTML5支持

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

UI模版支持

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

本地打包支持

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

本地模擬調(diào)試

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

真機同步調(diào)試

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

IDE新版特色

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

AppCan IDE 3.2新版特色：

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

IDE八大改進

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

1）appcan.ready替換window.uexOnload

在新版本中使用appcan.ready替換window.uexOnload,并且在同一html頁面中可以多次調(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）重新定義頁面彈動刷新功能

在新版本中，重新定義了頁面的彈動刷新方法。將多個零散的方法進行封裝統(tǒng)一調(diào)用，簡化插件調(diào)用步驟，更容易實現(xiàn)彈動刷新功能。原來我們調(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?"下拉超過臨界點,產(chǎ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控件實現(xiàn)方式

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

var updateData = [{
            title : "飛行模式",
            icon : "../css/res/appcan_s.png",
            "switch":{
                mini:true,
                value:false
            }
        }, {
            title : "藍牙",
            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進而與jQuery等寫法兼容

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

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

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

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

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

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

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

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

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