4-AppCan初级认证工程师之[JS SDK](3课时)

AppCan初级认证工程师之[JSSDK]培训部目录：•窗口模块Window•Frame/MultiFrame•对话框•页面间的通信•生命周期•窗口层叠窗口是AppCanHybrid移动应用界面的最基本单位。窗口是所有原生控件、Frame等的容器，是每个界面布局的基础，他负责处理界面间的逻辑、动画等基础工作。根据config.xml中的配置，应用会自动加载第一个窗口。其他窗口都需要调用appcan.window.open接口进行创建。每个窗口都会有一个名字。由应用自动加载的第一个window，名称自动设定为root。其他窗口的名称在appcan.window.open调用时需要开发者指定，名称支持中文。窗口模块4应用的生命周期应用加载uexWidget.onSuspenduexWidget.onResumeuexWidget.finishWidget窗口关闭其他应用启动，当前应用进入后台，当前应用进入前台，加载首页显示启动图uexWidget.onLoadByOtherApp每一个AppCan应用的生存周期5Window的生命周期每一个窗口的生存周期窗口加载window.onloadappcan.readyappcan.window.onPauseappcan.window.onResumeappcan.window.close窗口关闭启动其他窗口，当前窗口进入后台，当前窗口进入前台，窗口显示6Frame的生命周期Frame作为一种特殊的窗口，他的生存周期相比于window简化很多Frame加载window.onloadappcan.readyappcan.frame.close窗口关闭窗口显示7窗口模块FooterContentBodyPageheader显示区HTMLHeadscript脚本区8窗口模块打开一个新的窗口appcan.window.open(name,data,aniId,type,dataType,width,height,animDuration)name:新窗口的的名称，如果窗口存在直接打开，如果不存在先创建然后打开data:新窗口填充的数据dataType:新窗口填充的数据类型aniId:动画类型Idtype:窗口类型width:要打开的窗口的宽height:要打开的窗口的高animDuration:动画执行时间9窗口模块•案例一：•从荟生活的首页进入商品详情页窗口模块AppCan应用界面中window和frame的框架层次FooterContentHeaderFrame11FRAMEFRAME是内容展示的主体区域，与window负责界面主题框架布局不同，FRAME是为用户最直接交互提供服务的容器。Frame叠加在创建他的window之上，当window关闭时，其随之关闭。FRAME介绍12FRAME打开一个浮动窗口appcan.frame.open(id,url,left,top,name,index,change)id:要打开浮动窗口的名称url:浮动窗口要加载的页面的地址,如果url是一个数组则打开多页面浮动窗口left:浮动窗口距离左边的距离top:浮动窗口距离上边的距离name:强制改变打开窗口的名称index:设置选中的多页面窗口的默认索引change:如果多页面浮动窗口改变时会触发该回调13FRAME•案例二：•分析源码appcan.ready(function(){vartitHeight=$('#header').offset().height;appcan.frame.open(content,index_content.html,0,titHeight);window.onorientationchange=window.onresize=function(){appcan.frame.resize(content,0,titHeight);}});MultiFRAMEAppCan专为Frame提供了支持拖拽效果的MultiFrame组件。我们可以使用multiFrame构建并列多内容区域的浮动窗口组，且可以通过手指拖拽完成FRAME间的切换。MultiFRAME介绍MultiFRAMEappcan.frame.open({id:content,url:[{inPageName:P1,inUrl:index_content.html,},{inPageName:P2,inUrl:index_content_b.html,}],top:titHeight,left:0,index:0,change:function(err,res){console.log(res.multiPopSelectedIndex);}});在index_content.html页面打开包含两个页面的浮动窗口，当手指拖拽浮动窗口完成页面切换16对话框在应用开发过程中我们会经常需要给用户一些直观的提醒，引导用户执行进一步的操作。AppCan封装了多个标准的对话框来帮助开发者处理类似场景•警告对话框：appcan.window.alert•提示对话框：appcan.window.prompt•消息提示框：appcan.window.openToast17对话框•案例三：对话框•案例四：界面间通讯全局参数即源界面把需要传递的数据写入全局对象中，目标界面通过全局对象获取到写入的数据。完成参数的传递。我们在全局参数传递中，使用appcan.locStorage对象来实现•存值：appcan.locStorage.setVal(key,val)•取值：appcan.locStorage.val(key)20页面间的通信案例五：页面间通讯窗口事件驱动全局参数更多应用于具有确定先后顺序的场景，源窗口写然后启动目标窗口，目标窗口启动时获取参数。但很多场景并没有固定的先后顺序，更多的是相互间的状态变化。对于此种场景，我们可以采用窗口事件机制来提供支撑。•appcan.window.subscribe接口来监听订阅一个自定义的频道•appcan.window.publish向订阅的频道，发送消息。22页面间通讯案例六：改变标题栏的状态窗口动画界面间切换时使用动画，会极大的提高应用交互体验，而使用JS实现的动画受限于手机和浏览器性能，并不能达到最好的效果，尤其处理全屏幕等大幅动画时，性能问题尤为突出。因此AppCan提供了众多动画效果，使用原生技术来完成动画切换。AppCan的窗口切换动画使用非常简单，一般我们会用在两个地方appcan.window.open()和appcan.window.close()。24拖拽刷新拖拽刷新是移动应用开发中一种非常常见的场景，通过拖拽屏幕完成数据的更新，相比于使用按钮来更新数据，体验更加的协调。与PhoneGap等纯JS框架完成拖拽刷新不同，AppCan采用了原生技术来支持此效果，体验更加流畅。appcan.window.setBounce()25拖拽刷新•案例七：•实现页面的拖拽刷新效果作业学员自行完成订餐功能模块