AppCan初级认证工程师之JS SDK3课时.ppt

具体实现参考文档 案例6： 窗口事件采用订阅/发布机制，一个窗口或者Frame可以调用appcan.window.subscribe接口来监听订阅一个自定义的频道，其他窗口或者Frame需要与其交互时，可以调用appcan.window.publish向订阅的频道，发送消息。这时即可在订阅的频道回调里接收到发布的消息数据。 0无动画，16动画效果 案例7：上拉刷新案例 课后练习下拉刷新，设置背景色和图片 AppCan初级认证工程师之 [JS SDK] 培训部 目录： 窗口模块Window Frame / Multi Frame 生命周期 对话框 窗口之间的通信 窗口是AppCan Hybrid移动应用界面的最基本单位。窗口是所有原生控件、Frame等的容器，是每个界面布局的基础，他负责处理界面间的逻辑、动画等基础工作。 根据config.xml中的配置，应用会自动加载第一个窗口。其他窗口都需要调用appcan.window.open接口进行创建。每个窗口都会有一个名字。由应用自动加载的第一个window，名称自动设定为root。其他窗口的名称在appcan.window.open调用时需要开发者指定，名称支持中文。 窗口模块 * 应用的生命周期 应用加载 uexWidget.onSuspend uexWidget.onResume uexWidget.finishWidget 窗口关闭 其他应用启动，当前应用进入后台， 当前应用进入前台， 加载首页 显示启动图 uexWidget.onLoadByOtherApp 每一个AppCan应用的生存周期 * Window的生命周期 每一个窗口的生存周期 窗口加载 window.onload appcan.ready appcan.window.onPause appcan.window.onResume appcan.window.close 窗口关闭 启动其他窗口，当前窗口进入后台， 当前窗口进入前台， 窗口显示 * Frame的生命周期 Frame作为一种特殊的窗口，他的生存周期相比于window简化很多 Frame加载 window.onload appcan.ready appcan.frame.close 窗口关闭 窗口显示 * 窗口模块 Footer Content Body Page header 显示区 HTML Head script脚本区 * 窗口模块 ??打开一个新的窗口 appcan.window.open(name,data,aniId,type,dataType,width,height,animDuration) ? name:新窗口的的名称，如果窗口存在直接打开，如果不存在先创建然后打开 ??data:新窗口填充的数据 ??dataType:新窗口填充的数据类型 ??aniId:动画类型Id ??type:窗口类型 ??width:要打开的窗口的宽 ??height:要打开的窗口的高 ??animDuration:动画执行时间 * 窗口模块 案例一： 从荟生活的首页进入商品详情页 窗口模块 AppCan应用界面中window和frame的框架层次?? Footer Content Header Frame * FRAME FRAME是内容展示的主体区域，与window负责界面主题框架布局不同，FRAME是为用户最直接交互提供服务的容器。Frame叠加在创建他的window之上，当window关闭时，其随之关闭。 FRAME介绍 * FRAME 打开一个浮动窗口appcan.frame.open(id,url,left,top,name,index,change) ??id:要打开浮动窗口的名称 ??url:浮动窗口要加载的页面的地址,如果url是一个数组则打开多页面浮动窗口 ??left:浮动窗口距离左边的距离 ??top:浮动窗口距离上边的距离 ??name:强制改变打开窗口的名称 ??index:设置选中的多页面窗口的默认索引 ??change:如果多页面浮动窗口改变时会触发该回调 * FRAME 案例二： 分析源码 appcan.ready(function() { var titHeight = $(#header).offset().height; appcan.frame.open(content, index_content.html, 0, titHeight); window.onorientationchange = window.onresize = function() {