4-AppCan初级认证工程师之JS SDK（3课时）讲义

JSSDK讲义幻灯片1话述：在学习了AppCan的UI布局后，这一讲，我们来了解下AppCan封装的JSSDK。本次课主要从以下几个方面进行介绍和分享，【切到第2张PPT】幻灯片2话述：首先，给大家介绍下AppCan的多窗口机制、应用生命周期和窗口的生命周期；然后介绍AppCan的封装的对话框；最后介绍窗口之间的通讯机制。下面，我们先来给大家介绍一下AppCan的窗口。【切到第3张PPT】幻灯片3话述：窗口是AppCan应用最基本的单位。AppCan的应用界面采用的是多窗口机制。所谓的多窗口机制包括两部分：1、引擎中，维护了一个窗口堆栈，就是打开的窗口会一个一个往上叠加，不管打开多少窗口，最后打开的那个窗口肯定是在最上面的。每个窗口用唯一的名称来区别，也就是说名称是窗口的标示。窗口的命名是在appcan.window.open()来定义赋值的，命名方式只要符合标识符命名规则即可，但是有个特殊的名称——“root”,它是起始页的名称，这是引擎给在config.xml文件中指定的起始页所起的名称。2、多窗口还包括主窗口和浮动窗口。把窗口分为主窗口和浮动窗口，可以使我们的界面展示更为灵活——主窗口作为框架窗口，浮动窗口展示内容，并且浮动窗口可以解决很多类似局部div滚动、上拉下拉刷新效果等等。主窗口之上可以有多个浮动窗口，浮动窗口是附属于主窗口的，主窗口关闭后，其上所有浮动窗口也都会关闭。但是关闭浮动窗口是不会关闭主窗口的。介绍完多窗口机制，接下来了解下应用和窗口的生命周期【切到第4张PPT】幻灯片4话述：AppCan使用uexWidget对象管理维护应用和子应用的生存周期。如上图所示，当应用有其他第三方应用启动时，会调用uexWidget.onLoadByOtherApp回调，并可以获取到其他应用传递来的参数。当其他应用打开，当前应用进入后台，则会调用uexWidget.onSuspend，当应用重新进入后会调用uexWidget.onResume回调，我们可以在此加入代码，例如处理超时登录等情况。【切到第5张PPT】幻灯片5话述：当需要打开一个窗口的时候，首先是启动uexWindow，然后加载全局脚本进行解析，完成后，加载window，window.onload函数通知网页一切就绪了；当引擎发现网页处理完成之后，开始为window对象附加UEX对象。等UEX对象都附加完毕后，再调用appcan.ready方法（uexWindow.uexOnload函数）。这里就要注意了：appcan.ready是AppCan页面准备就绪的一个标志.然后下来就是窗口的运行，挂起或重新开始，然后通过appcan.window.close来关闭窗口。在这个函数调用后，我们不能够再使用任何UEX对象。这里给大家强调的是在调用close前，一定要关闭interval（间隔、区间）或timeout(过期、超时)这两个事件，如果不关闭会产生异常。所以最好在调用close之前先做一个判断看看所有定时器是否已经关闭。然后调用destory销毁，这样会释放掉所有的UEX对象资源。最终调用Shutdown，整个窗口关闭。这就是AppCan主窗口的生命周期，浮空窗口的生命周期【讲的同时切到第6张】和主窗口是相类似的，但是要比主窗口简化的多。幻灯片6话述：仿照主窗口生命周期简单介绍一下浮动窗口的生命周期，（介绍完后浮空窗口的生命周期），接下来，我们来看一下主窗口的构成【讲的时候切到PPT7】幻灯片7话述：一个标准的主窗口是由头部header、内容区content和底部栏footer三部分构成的。一个window是全屏显示的，其中header和footer是两个定高区域，content是弹性区域（可以举个例子说明一下，如果没有footer，则content大小是全屏大小减去header大小）。了解了窗口的结构，接下来，我们来看下如何打开一个新的窗口【讲的时候切到PPT8】幻灯片8话述：在Appcan中，我们封装了一个appcan.window.open接口，用来进行窗口的打开操作。然后按照ppt介绍各个参数的作用。由于参数很多，并不是每个参数都是必须的，我们还可以使用键值对的形式来写，下面我们来举个例子【讲的时候切到PPT9】幻灯片9话述：动态切换ppt，图片跳转过程介绍一下，然后打开ide，进行演示。【切到PPT10】幻灯片10话述：了解了window的构成，下面我们来介绍下浮动窗口frame。它是架在window上的一个独立窗口，是界面内容展示的主体区域【讲的时候切到PPT11】幻灯片11话述：按照ppt上解释一下，再次强调一下多窗口机制中window和frame的关系。那么如何打开浮动窗口呢？【讲的时候切到PPT12】幻灯片12话述：在AppCan中，封装了appcan.frame.open接口来实现浮动窗口的打开。下面先来介绍一下接口参数，（按ppt挑重点的介绍常用参数）。然后我们来做个案例，看下使用情况【讲的时候切到PPT13】幻灯片13话述：在每个主窗口对应的html文件的ready方法中，都会有一个浮动窗口的打开语句appcan.frame.open()。自己再举一个打开浮动窗口的例子。除了在一个window中打开一个frame，AppCan的还支持多浮动窗口【讲的时候切到PPT14】幻灯片14话述：AppCan可以专门提供了支持拖拽想过的MultiFrame组建来实现多浮动窗口。下面给大家举个例子【讲的时候切到PPT15】幻灯片15话述：如果实现多浮动窗口，需要在url处用数组来表示。浮动窗口切换演示效果模拟器看不到，需要真机调试。【案例演示完毕切到PPT16】幻灯片16话述：在开发中，我们经常需要给使用者一些直观的提示，引导用户操作。AppCan封装了多个标准对话框，如alert警告、prompt提示和toast加载提示框。比如【讲的时候切到PPT17】幻灯片17话述：系统默认的alert比较死板，使用Appcan封装的对话框，可以灵活控制。然后到ide中，进行案例演示。【案例演示完毕切到PPT18】幻灯片18话述：Ide演示案例。把toast带加载滚动条和不带滚动条各举一个例子。把toast使用场景介绍一下：一般在数据加载前显示toast，数据加载成功后，手动关闭toast；如果仅仅作为提示，可以不需要滚动条。【案例演示完毕切到PPT19】幻灯片19话述：了解了AppCan封装的对话框后，我们来看下本节的一个重点，也是应用中必须要用到的——传参。在AppCan中，有两种传参机制：一种是通过全局参数来实现，一种是通过窗口事件机制来实现。先来看下第一种方式。我们通过appcan.locStorage对象来实现全局参数传递。用appcan.locStorage.setVal()来存值，appcan.locStorage.val()来取值。例如：【讲时切到PPT20】幻灯片20话述：演示ppt，介绍要实现的功能。然后打开之前做好的静态页面，添加存取语句实现传参。或者现写一个小demo，来演示“存”和“取”的过程。【演示完毕切到PPT21】幻灯片21话述：从刚刚全局参数的案例中，大家应该可以看出，使用这种机制进行传参必须预先确定先后关系，即必须先存后取。但很多情况下并没有这么固定的先后顺序，所以AppCan还提供了第二种通讯机制——窗口事件驱动。通过appcan.window.subscribe（）订阅一个频道，用appcan.window.publish（）向订阅的频道发送消息。来看案例【讲时切到PPT22】幻灯片22话述：演示ppt，介绍要实现的功能。打开之前做好的界面，添加对应语句实现传参功能，或者先写一个类似小demo，实现“订阅”和“传参”的过程。【演示完毕切到PPT23】幻灯片23话述：按照p