APPCAN學習筆記004---AppCan與Hybrid,appcan概述

技術qq交流群：JavaDream：251572072
本節講了appcan的開發流程,和開發工具
筆記不做具體介紹了,以下開發會提到
-------------------------------------------------------
APPCAN的開發管理流程:
1.
利用APPCAN SDK開發:
a.HTML5 CSS3 JavaScript編程
? javascript原生對象插件
? 可擴展的原生自己定義插件框架
? 可組合的原生應用混合框架
b.代碼開發完之后--上傳到APPCAN應用代碼管理server
? ,上傳的時候能夠進行代碼加密,上傳之后,
? 能夠通過應用編譯打包server,能夠進行應用打包,然后就能夠公布應用了
? ,這個應用是能夠直接在手機上執行的.
------------------------------
2.IDE概述
? ? ?AppCan IDE是基于Eclipse定制的移動集成開發環境，專為無Native開發經驗的HTML開發者設計。
? ? ?AppCan IDE幫助HTML開發者在無需不論什么原生環境輔助下就可以完畢高體驗效果應用的開發、
? ? ?調試、跟蹤和模擬，并可借助內嵌的應用打包功能，創建可直接安裝到手機的本地應用安
? ? ?裝包以便興許測試應用。
3.跨平臺支持
? ? ?AppCan IDE能夠用于支持iOS、Android平臺手機和平板的高體驗Hybrid應用的開發。

? ? ?通過AppCan Hybrid技術。HTML開發者遵循基于標準CSS技術的AppCan 移動開發UI參考框架，
? ? ?就可以完畢一次開發，多平臺適配，在各種分辨率的移動終端上保持同樣的體驗。

? ? ?AppCan UI框架提供了極高的適配性和自主性，開發者能夠沒有束縛地依據需求、
? ? ?UI設計完畢應用界面及邏輯的開 發。
4.HTML5支持
? ? ?AppCan IDE採用國際通用的HTML語言作為跨平臺支撐語言。
? ? ?同一時候借助于AppCan Hybrid技術以終端內嵌瀏覽器為核心的設計理念，
? ? ?使開發者能夠直接採用HTML5技術完畢應用功能的開發。
? ? ?基于業界公認的HTML5的強大能力和廣泛的開發用戶群體，
? ? ?開發者不須要又一次學習私有標準。就可以完畢復雜功能的實現。
5.本地打包支持
? ? ?AppCan IDE內嵌開發版應用打包服務。
? ? ?開發者能夠在個人PC機上完畢開發版本號應用安裝包的生成
? ? ?，并可在手機中安裝驗證應用的實現效果與問題解決情況。
? ? ?開發者能夠在本地配置應用啟動界面、圖標。還能夠動態選擇應用所用的公共插件
? ? ?和自己定義插件。打包服務會自己主動聚合各插件庫、引擎和應用HTML代碼。
? ? ?通過生成的安裝包，能夠直接驗證插件的功能。便于插件開發者與HTML開發者進行
? ? ?聯調，同一時候還可驗證應用圖標、啟動圖片等資源的實際展示效果。
6.本地模擬調試
? ? AppCan IDE提供基于Chrome內核的模擬器。能夠在PC上完畢移動應用的界面模擬、
? ? 通訊模擬、設備模擬。

開發人員能夠在模擬器中動態跟蹤和調試代碼。變更顯示效果，
? ? 作斷點調試。
7.真機同步調試
? ? AppCan IDE為開發人員提供了Android和iOS平臺的真機同步調試功能，
? ? 不僅能高速方便調試JavaScript、檢查HTML頁面DOM結構、實時同步更新元素CSS樣式，
? ? 還能跟蹤分析頁面資源載入性能等問題，幫助開發人員高效、便捷的調試應用。
8.IDE新版特色
? ? AppCan IDE 3.1版本號更加人性化。提供應用向導和界面向導，內置多種主題方案、
? ? UI控件及數百種界面模板，支持項目同步，支持本地應用打包、本地模擬調試和真機實時
? ? 同步調試。引擎插件再次升級適配iOS8,代碼提示無憂編程。助開發人員高速上手，
? ? 高效創建專業應用。
------------------------------------------------------------
9.AppCan IDE 3.1新版特色：
?
1）、引擎、插件強大升級
2）、豐富穩定的UI組件。海量的行業頁面模版
3）、項目云端同步，多人協同開發
4）、真機實時同步調試
5）、優化代碼提示
-------------------------------------------------------------
10.IDE3.1八大改進


IDE3.1上線了，在IDE3.1版本號上開發人員會發現幾大改變，這些改變能讓開發人員更高速、?
高效的開發更加穩定的項目。


appcan.ready替換window.uexOnload


在新版本號中使用appcan.ready替換window.uexOnload,而且在同一html頁面中能夠多次調用
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);
? ? ? ? ? ? }
});
---------------------------------------------------------------
11.
又一次定義頁面彈動刷新功能
在新版本號中，又一次定義了頁面的彈動刷新方法。將多個零散的方法進行封裝統一調用，
簡化插件調用步驟，更easy實現彈動刷新功能。

原來我們調用此功能的代碼要調用下面方法：


uexWindow.setBounce(flag)。
uexWindow.notifyBounceEvent(type, status)；
uexWindow.showBounceView(type, color, flag)。
uexWindow.resetBounceView(type)；
uexWindow.setBounceParams(type, json)。
uexWindow.hiddenBounceView(type)；
uexWindow.onBounceStateChange
如今。我們僅僅需按例如以下代碼調用就可以：
appcan.frame.setBounce([0,1], function(type) {
? ? ? ? ? ? ? ? $("#pullstatus"+type).html(!type?

"開始下拉":"開始上拖");
? ? ? ? ? ? }, function(type) {
? ? ? ? ? ? ? ? $("#pullstatus"+type).html(!type?"下拉超過臨界點,產生事件了！

":"超過臨界點,產生事件了！");
? ? ? ? ? ? }, function(type) {
? ? ? ? ? ? ? ? $("#pullstatus"+type).html("松手了,產生事件了,開始更新數據！");
? ? ? ? ? ? ? ? setTimeout(function() {
? ? ? ? ? ? ? ? ? ? appcan.frame.resetBounce(type);
? ? ? ? ? ? ? ? ? ? $("#pullstatus"+type).html("");
? ? ? ? ? ? ? ? ? ? demo.add(updateData,type);
? ? ? ? ? ? ? ? }, 1000);
});
-----------------------------------------------------------
12.改動UI控件實現方式
在新版本號中，又一次定義UI控件的實現方式，降低代碼的編寫量，
更加高速便捷的實現功能及界面展現。如listview控件。在之前的版本號中我們實現列表。
在html中直接增加列表的詳細代碼，數據拼裝及顯示須要進行代碼的詳細編寫控制。
而在新版本號中我們通過js控制僅僅需填入重要數據就可以實現模版數據的拼裝及顯示。
如以下這段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里的數據換成我們要顯示的數據就可以。


集成backbonejs、zeptojs和underscorejs進而與jQuery等寫法兼容
在原來的版本號中。我們使用$$通過id獲取元素的dom，除此之外未提供不論什么快捷方法，
如今我們能夠直接使用$加元素選擇器的方式獲取我們想要的dom，而且對dom進行操作了。
通過這樣的方式編寫，讓習慣了使用第三方框架的開發人員更加快捷快速的進行編碼。

如$(“#id”).removeClass、$(body)等。

------------------------------------------------------------------
推出js sdk對底層的接口進行更高層的封裝，統一規范接口調用體系。

使用IDE3.1版本號。開發人員會發如今新建的項目里的js文件換了，這里appcan依據自己的
需求封裝的一個開發庫- AppCan javascript sdk。對底層的接口進行更高層的封裝，
能讓開發人員更高速、 高效的開發更加穩定的項目，該庫依賴backbonejs、zeptojs、underscorejs
默認打包在基礎庫中，開發人員不須要進行額外的引用，另外在該庫的基礎上提供了豐富的插件。
能讓開發人員更高效的開發app。
這個封裝的庫里分為非常多模塊，如文件模塊file，網絡請求request等。
如今我們使用uexWindow的一些方法，我們能夠在appcan.window中找到。浮動窗體的相關方法
在appcan.frame中找到。
------------------------------------------------------------------------
添加調試中心功能
?AppCan調試中心是AppCan IDE為開發人員提供的一款可真機同步調試的門戶應用，
?在同一wifi環境下，它與pc端工作空間相關連，擺脫數據線，無需二次打包，
?就可實時測試改動應用。此外AppCan IDE3.1為開發人員提供了Android和iOS平臺真機同步調試
?功能，僅僅需配置當前應用的config文件，真機上的應用就可實現與PC端的實時同步調試功能，
?幫助開發人員高效率、便捷的調試應用。

------------------------------------------------------------------------------
新增配色主題選擇功能
針對舊版本號自由調色導致配色出現不和諧問題。新版新建項目即將完畢時新增配色主題選擇功
能。在不同的主題下項目的button、邊框、背景等配色進行統一更改，進而免除了開發人員對項
目的配色煩惱。眼下的主題色為中國紅、蜜桃粉、青草綠、天際藍、子夜黑五種主題色。
--------------------------------------------------------------------------------
IOS7及以上系統狀態欄自己主動設置
新版本號針對IOS7及以上系統狀態欄做了自己主動設置，僅僅要是新建的項目。
此功能代碼已增加到js及css代碼中，開發人員不須要為這個問題單獨進行設置。

-----------------------------------------------------------------------------

總結

以上是生活随笔為你收集整理的APPCAN学习笔记004---AppCan与Hybrid,appcan概述的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。