JS SDK 随手笔记

来源：互联网发布：微信推广淘宝优惠券编辑：程序博客网时间：2024/05/13 11:08

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的随手笔记。以后会有按时更新。敬请留意！

0 0