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

1、AppCan初级认证工程师之 JS SDK,培训部,目录：,窗口模块Window Frame / Multi Frame 对话框 页面间的通信 生命周期 窗口层叠,窗口是AppCan Hybrid移动应用界面的最基本单位。窗口是所有原生控件、Frame等的容器，是每个界面布局的基础，他负责处理界面间的逻辑、动画等基础工作。 根据config.xml中的配置，应用会自动加载第一个窗口。其他窗口都需要调用appcan.window.open接口进行创建。每个窗口都会有一个名字。由应用自动加载的第一个window，名称自动设定为root。其他窗口的名称在appcan.window.open调用时需要

2、开发者指定，名称支持中文。,窗口模块,4,应用的生命周期,每一个AppCan应用的生存周期,5,Window的生命周期,每一个窗口的生存周期,6,Frame的生命周期,Frame作为一种特殊的窗口，他的生存周期相比于window简化很多,7,窗口模块,8,窗口模块,打开一个新的窗口 appcan.window.open(name,data,aniId,type,dataType,width,height,animDuration) name:新窗口的的名称，如果窗口存在直接打开，如果不存在先创建然后打开 data:新窗口填充的数据 dataType:新窗口填充的数据类型 aniId:动画类型I

3、d type:窗口类型 width:要打开的窗口的宽 height:要打开的窗口的高 animDuration:动画执行时间,9,窗口模块,案例一： 从荟生活的首页进入商品详情页,窗口模块,AppCan应用界面中window和frame的框架层次,11,FRAME,FRAME是内容展示的主体区域，与window负责界面主题框架布局不同，FRAME是为用户最直接交互提供服务的容器。Frame叠加在创建他的window之上，当window关闭时，其随之关闭。,FRAME介绍,12,FRAME,打开一个浮动窗口appcan.frame.open(id,url,left,top,name,index,

4、change) id:要打开浮动窗口的名称 url:浮动窗口要加载的页面的地址,如果url是一个数组则打开多页面浮动窗口 left:浮动窗口距离左边的距离 top:浮动窗口距离上边的距离 name:强制改变打开窗口的名称 index:设置选中的多页面窗口的默认索引 change:如果多页面浮动窗口改变时会触发该回调,13,FRAME,案例二： 分析源码 appcan.ready(function() var titHeight = $(#header).offset().height; appcan.frame.open(content, index_content.html, 0, titH

5、eight); window.onorientationchange = window.onresize = function() appcan.frame.resize(content, 0, titHeight); );,Multi FRAME,AppCan专为Frame提供了支持拖拽效果的MultiFrame组件。我们可以使用multi Frame构建并列多内容区域的浮动窗口组，且可以通过手指拖拽完成FRAME间的切换。,Multi FRAME介绍,Multi FRAME,appcan.frame.open( id : content, url : inPageName : P1, in

6、Url : 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封装了多个标准的对话框来帮助

7、开发者处理类似场景,警告对话框：appcan.window.alert 提示对话框： mpt 消息提示框：appcan.window.openToast,17,对话框,案例三：,对话框,案例四：,界面间通讯,全局参数 即源界面把需要传递的数据写入全局对象中，目标界面通过全局对象获取到写入的数据。完成参数的传递。我们在全局参数传递中，使用appcan.locStorage对象来实现 存值：appcan.locStorage.setVal(key,val) 取值：appcan.locStorage.val(key),20,页面间的通信,案例五：,页面间通讯,窗口事

8、件驱动 全局参数更多应用于具有确定先后顺序的场景，源窗口写然后启动目标窗口，目标窗口启动时获取参数。但很多场景并没有固定的先后顺序，更多的是相互间的状态变化。对于此种场景，我们可以采用窗口事件机制来提供支撑。 appcan.window.subscribe接口来监听订阅一个自定义的频道 appcan.window.publish向订阅的频道，发送消息。,22,页面间通讯,案例六 ：改变标题栏的状态,窗口动画,界面间切换时使用动画，会极大的提高应用交互体验， 而使用JS 实现的动画受限于手机和浏览器性能，并不能达到最好的效果，尤其处理全屏幕等大幅动画时，性能问题尤为突出。因此AppCan提供了众多动画效果，使用原生技术来完成动画切换。 AppCan的窗口切换动画使用非常简单，一般我们会用在两个地方appcan.window.open( )和appcan.window.close( )。,24,拖拽刷新,拖拽刷新是移动应用开发中一种非常常见的场景，通过拖拽屏幕完成数据的更新，相比于使用按钮