APPCAN学习笔记004---AppCan与Hybrid,appcan概述

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代码中，开发人员不须要为这个问题单独进行设置。

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