4AppCan初级认证工程师之JS SDK3课时讲义.docx
- 文档编号:15479161
- 上传时间:2023-07-04
- 格式:DOCX
- 页数:13
- 大小:538.03KB
4AppCan初级认证工程师之JS SDK3课时讲义.docx
《4AppCan初级认证工程师之JS SDK3课时讲义.docx》由会员分享,可在线阅读,更多相关《4AppCan初级认证工程师之JS SDK3课时讲义.docx(13页珍藏版)》请在冰点文库上搜索。
4AppCan初级认证工程师之JSSDK3课时讲义
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
话述:
按照ppt稍作解释即可。
除了通过原生技术完成窗口的动画切换效果可以增加用户体验,窗口的拖拽刷新也是AppCan提高用户体验的一种手段【切到PPT24】
幻灯片24
话述:
按照ppt稍作解释即可,下面来看【切到PPT25】
幻灯片25
话述:
打开荟生活源码,将此部分功能进行代码分析【切到PPT26】
幻灯片26
话述:
把其他代码发给学员,下去自行研究订餐功能
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 4AppCan初级认证工程师之JS SDK3课时讲义 AppCan 初级 认证 工程师 JS SDK3 课时 讲义