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