JS SDK 随手笔记
- 窗口模块
Frame/Multi Frame
对话框
页面间的通讯
生命周期
窗口层叠
窗口模块
窗口模块是是AppCan移动应用界面最基本的单位。窗口是每个界面布局的基础，他是一个容器，在window里面可以添加原生控件，Frame。并且处理页面间的逻辑动画等基本工作。
下面的代码是AppCan窗口的结构：
<!DOCTYPE html>
<html class="um landscape min-width-240px min-width-320px min-width-480px min-width-768px min-width-1024px">
<!--htmlHead开始-->
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="target-densitydpi=device-dpi, width=device-width, initial-scale=1, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
<link rel="stylesheet" href="css/fonts/font-awesome.min.css">
<link rel="stylesheet" href="css/ui-box.css">
<link rel="stylesheet" href="css/ui-base.css">
<link rel="stylesheet" href="css/ui-color.css">
<link rel="stylesheet" href="css/appcan.icon.css">
<link rel="stylesheet" href="css/appcan.control.css">
</head>
<!--htmlHead结束-->
<!--body开始-->
<body class="um-vp" ontouchstart>
<div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
<!--header开始-->
<div id="header" class="uh bc-text-head ub bc-head">
<div class="nav-btn" id="nav-left"></div>
<h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">AppCan</h1>
<div class="nav-btn" id="nav-right">
<!--按钮开始-->
<!--按钮结束-->
</div>
</div>
<!--header结束--><!--content开始-->
<div id="content" class="ub-f1 tx-l ">
</div>
<!--content结束-->
</div>
<script src="js/appcan.js"></script>
<script src="js/appcan.control.js"></script>
</body>
<!--body结束-->
<!--脚本区开始-->
<script>
appcan.ready(function() {
var titHeight = $('#header').offset().height;
appcan.frame.open("content", "index_content.html", 0, titHeight);
window.onorientationchange = window.onresize = function() {
appcan.frame.resize("content", 0, titHeight);
}
});
</script>
<!--脚本区开始-->
</html>首先，一个窗口最上边是html的一些head，title等标签。最下边是我们的脚本区。中间是部分。 下面我们来看看body部分，在AppCan中，body下边是一个page，而在page中有我们AppCan定义Head，Content，Footer,结合AppCan页面来说就是……。但是要注意的一点是Conten部分是不写任何代码的。Content是一个区域，举一个例子，Content部分就是一个桌子，咱们在上面放什么他才会显示什么。那么咱们应该放什么东西呢？
AppCan Frame
在讲Frame之前咱们先分析一下代码：
<div id="page_0" class="up ub ub-ver bc-bg" tabindex="0">
</div>这个div的意义是声明了一个AppCan页面区域。上面所说的page。
<!--header开始-->
<div id="header" class="uh bc-text-head ub bc-head">
<div class="nav-btn" id="nav-left"></div>
<h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">AppCan</h1>
<div class="nav-btn" id="nav-right">
<!--按钮开始-->
<!--按钮结束-->
</div>
</div>
<!--header结束-->这部分标志这一个头的开始和结束。就是上面所说的page中的head。
<!--content开始-->
<div id="content" class="ub-f1 tx-l ">
</div>
<!--content结束-->这部分是咱们的内容区域，就是上面咱们所说的桌子，在这个区域什么也不写。
<div id="footer" class="uh bc-text-head ub bc-head">
<div class="nav-btn" id="nav-left"></div>
<h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">AppCan</h1>
<div class="nav-btn" id="nav-right">
<!--按钮开始-->
<!--按钮结束-->
</div>
</div>这个是咱们的Footer，这个区域的内容比较灵活，如果需要就可以写，如果不需要的话可以直接删除。、
上面说了这么多，主要为了说明咱们的Content，Content部分什么也不写，他是由一个页面来嵌入从而形成一个页面的主体区域。而要嵌入的页面就是咱们的AppCan Frame。接着看代码：
<script>
appcan.ready(function() {
//获得page的header的高度
var titHeight = $('#header').offset().height;
//在距titHeight高度下打开一个新窗口，这个的话就可以保重Header和Content
//部分不重叠，不理解的可以把titHeight减去10个像素或者20个像素，看看效果。
appcan.frame.open("content", "index_content.html", 0, titHeight);
window.onorientationchange = window.onresize = function() {
appcan.frame.resize("content", 0, titHeight);
}
});
</script>在xxx.html中通常会有几行这样的代码：具体意思请开代码注解。这是咱们怎么样打开一个AppCan Frame。
AppCan Frame 定义：AppCan Frame是内容展示的主体区域，Frame也是要给容器，在容器里面定义原生，动画等等。Frame是叠加在window之的，window关闭的时候，Frame也随之关闭。
其实如果使用模拟器调试工具进行调试的话，就会发现window和Frame之间的是通过一个iframe框架联系在一起的。在xxx.html内嵌xxx_content.html。从而形成一张完整的页面
知道了window和Frame之后，我们来看看怎么用。
打开一个页面(Window)
- 在IDE中新建AppCan空白页面，会生成xxx.html和xxx_content.html.
打开xxx_content.html,鼠标放在body区域，在IDE中找到 AppCan—插入控件—按钮—确定生成相应的html和js代码
//按钮的html
<div class="btn ub ub-ac bc-text-head ub-pc bc-btn" id="btn">
无图片按钮
</div>
//按钮所生成的
appcan.button(".btn", "ani-act", function() {
})- 在按钮生成的js里面添加打开窗口的方法。
appcan.button(".btn", "ani-act", function() {
//appcan.window.open("自定义窗口名称","页面url");
appcan.window.open("details","details.html");
})这样就可以打开一个新的窗口了，这个只是最基本的打开窗口的方法，其中的参数是最简单的配置，除此之外，还可以自定义其他参数，例如动画参数，窗口类型，打开窗口的宽高，动画执行时间等等参数，具体请查看文档。
打开一个页面（Frame）
- 按钮自己添加，咱们直接写语法:
//appcan.frame.open("自定义Frame窗口名称", "Frameurl", 左边据屏幕距离, 上边距屏幕距离);
appcan.frame.open("content", "index_content.html", 0, 0);基本和appcan.window.open（）格式差不多一样.
Appcan window 和 AppCan Frame 组合创建多窗口
- 在讲多窗口之前，我们先做一下准备工作：新建一个AppCan空白页（两个html页面），在xxx.html中Header结束的后面加上这段代码:
<!--header开始-->
<div id="header" class="uh bc-text-head ub bc-head">
<div class="nav-btn" id="nav-left"></div>
<h1 class="ut ub-f1 ulev-3 ut-s tx-c" tabindex="0">AppCan</h1>
<div class="nav-btn" id="nav-right">
<!--按钮开始-->
<!--按钮结束-->
</div>
</div>
//我们要加的代码
<div class="ub-f1" id="tabView">
</div>
<!--header结束-->- 之后我们在id=tabView的div中添加tab标签，生成相应的html和js.这里不多说了。
下面我们来改动相应的js，在index.html中的有这样的一段js
appcan.ready(function() {
var titHeight = $('#header').offset().height;
//appcan.frame.open("content", "index_content.html", 0, titHeight);
window.onorientationchange = window.onresize = function() {
appcan.frame.resize("content", 0, titHeight);
}
});- 我们首先要把appcan.frame.open方法注释掉，之后我们要添加下面的相应的方法。
appcan.ready(function() {
//获得标题栏的高和tabview的高度。
var titHeight = $('#header').offset().height;
var tabHeight=$('#tabview').offset().height;
//appcan.frame.open("content", "index_content.html", 0, titHeight);
appcan.frame.open({
id : "content",
url : [{
"inPageName" : "baidu",
"inUrl" : "http://www.baidu.com"
}, {
"inPageName" : "appcan",
"inUrl" : "http://www.appcan.cn"
}, {
"inPageName" : "sina",
"inUrl" : "http://www.sina.com.cn"
}],
top : titHeight+tabHeight,
left : 0,
index : 0,
change : function(err,res) {
tabview.moveTo(res.multiPopSelectedIndex);
}
})
window.onorientationchange = window.onresize = function() {
appcan.frame.resize("content", 0, titHeight);
}
});
//tab点击事件
tabview.on("click", function(obj, index) {
//设置多页面浮动窗口跳转到的子页面窗口的索引,文档有详细解释！
appcan.window.selectMultiPopover("content",index);
})通过上面的设置，我们就可以实现一个多窗口了。
AppCan之界面通讯
在上面我们讲了都是关于窗口的一些知识，但是窗口之间并不都是孤立的。他们之间也是需要通讯的。AppCan窗口通讯主要是一下两种方式，一种是本地存储（locStorage）,一种是窗口事件驱动。
AppCan界面通讯之本地存储
本地存储在html5中是一个新的js API，使用它我们可以已键值对的形式在用户的浏览器中保存数据。他和cookies非常相似。但又不尽相同：
- Cookies可以过期消失并且可以通过清理软件被清除，但是localStorage不会，除非你自己设置清除。放到webapp中就是除非你卸载软件或者手动设置清除。否则不会被清除。
locStorage不会发送http请求。
locStorage可以储存比Cookies更加多的数据。
locStorage语法简单。
Appcan的本地存储是对JS原生本地存储的封装。使用起来仍然简单灵活。使用本地存储就可以实现我们界面之间参数的传递和处理。应用场景举例：
- 用户首次进入app需要登陆，第二次进入app不需要跳转到登陆界面，而是直接跳转到首页。
界面直接参数的传递。
用户登录demo，首先要先建2个AppCan页面.在一个页面的Frame(xxx_content.html)中添加登录表单。登录表单IDE已经封装好了，这里不再展示。注意：把登录表单生成的js删除，添加下面的js代码
//给提交按钮要给点击事件。
appcan.button("#submit","ani-act",function(){
})- 之后的代码就是获得用户输入的值，验证登录信息跳转。
//在本地存一个值1，表示还没有登录
var loginflat=appcan.locStorage.val("loginflat",1);
var userName=$("#userName").val().trim();
var pwd=$("#pwd").val().trim();
if(userName=="tom"&&pwd=="123"){
//如果登录了，把这个值换成0
loginflat=appcan.locStorage.val("loginflat",0);
appcan.window.open("main","main.html");
}else{
alert("用户名和密码错误");
}
5. 在xxx.html中的ready方法中添加下面的代码：
//获得在本地的值
var login=appcan.locStorage.val("loginflat");
if(login==0){
//如果登录了几就直接打开首页
appcan.window.open("main","main.html");
}else{
//如果没有成功则打开登陆页
appcan.frame.open("content", "locStorage_content.html", 0, titHeight);
}- ok可以打包测试了。
AppCan页面通讯之窗口事件驱动
上面我们说了locStorage,locStorage可以一个页面设置，多个页面使用，除了这种方法之外我们还用一种两个窗口直接传递值的方法：appcan.window.subscrible,appcan.window.publish。怎么用呢？
- subscribe和publish只能在已经打开的窗口见进行通信。什么意思？大家知道，当我们用appcan.window.open打开的时候不是把当前页面给关闭了，而是在当前的页面上重新打开了一个新的页面。这个时候，隐藏的那个页面还是打开的。这个时候这两个窗口之间是可以进行使用这两个方法。无论是多少个窗口，都要遵循这个原则。
案例demo：建立两个页面之间的通讯：从publish.html向subscribe.html发消息。建立两个AppCan页面（4个html页面）。在第一个subscribe_content.html中添加一个按钮，在click事件写上打开另一个窗口的方法.
appcan.button("#btn", "ani-act", function() {
appcan.window.open("p", "publish.html");
}) //这样就可以有两个打开的窗口了。- 在subscribe.html中加上一下代码：
//给这个html定义一频道。
appcan.window.subscribe("index",function(msg){
alert(msg);
});- 在publish_content.html新建一个按钮，在按钮的事件中写下面的代码：
appcan.button(".btn", "ani-act", function() {
appcan.window.publish("index","Hello world");
})- 搞定，可以在模拟器上看看效果了。
AppCan之对话框
AppCan把在手机中常用的对话框，给进行了封装。
- appcan.window.alert;
appcan.window.alert({
title:"提示",
content:"测试内容",
buttons:['确定','取消','支持多个按钮']
});appcan.window.openToast
appcan.window.openToast("显示的文字",3000（显示文字的时间，以毫秒为单位）,8显示的位置);
appcan.window.prompt:
appcan.window.prompt({
title:"提示",
content:"请输入名字",
buttons:['确定','取消'],
callback:function(err,defaultVale,data,dataType,optid){
alert(typeof defaultVale);
console.log(defaultVale);
}
});AppCan拖拽刷新
上面我们讲了window，frame,对话框,通过这些我们可以自己做一个好看的界面，但是，当你做列表页的时候是你会发现需要用到分页了，怎么办？AppCan对也进行了相关的处理。
实现分页
首选明确一点，所有的数据都是在列表页里面的，而列表页往往都是一个个的Frame，所以下面的代码都是放在Frame页面的ready方法里面的
appcan.ready(function() {
//在这里我主要说一下setBounce的几个参数，这里仅仅是个人意见，
//首先地一个参数，设置的是谈动的类型，如果上下都有弹动的话就写一个数组
//如果上下都有弹动的话那么只需要写一个就方法就好了，具体原理我还不清楚。
//以后补上吧。如果设置单个弹动的话只需要留空相应的方法就行了，
//当方法执行完毕之后别忘了回复默认弹动。
appcan.frame.setBounce([0, 1], null, null, function(type) {
alert("ss");
appcan.frame.resetBounce(type);
})
});这样就可以实现上，下拉刷新。
以上就是JS SDK的随手笔记。以后会有按时更新。敬请留意！
版权声明：本文为博主原创文章，未经博主允许不得转载。
