AppCan开源之道：分享技术价值连接企业和App开发者 - AppCan 移动应用开发平台

一般情况在主窗口打开多页面浮动窗口，需要调用的方法是appcan.window.openMultiPopover(popName,content,dataType, left, top, width, height,change, fontSize, flag, indexSelected)

参数:

popName:打开新窗口的名称

content:要传入的数据，一个json对象，或者json字符串，

结构必须为{content:[{“inPageName“:“p1“, “inUrl“:“xxx1.html“,“inData“:““}]} 其中：inPageName:所包含的单页面窗口的名字，inUrl：url类型数据，inData：窗口的内容的二进制数据，可为空

dataType:窗口载入的数据的类型

0：url方式载入；

1：html内容 方式载入；

2：既有url方式，又有html内容方式

left:距离左边界的距离

top:距离上边界的距离

width:窗口的宽

height:窗口的高

change(err,data):当浮动窗口的当前显示的值发生改变是触发的回调.

err:如果出错这个就是一个错误对象，否则为空.

data:{“multiPopName“:“name“,“multiPopSelectedIndex“:“index“}

fontSize:字体的大小

flag:窗口类型

0: 普通窗口

1: OAuth 窗口

2: 加密页面窗口

4: 强制刷新

8: url用系统浏览器打开

16: view不透明

32: 隐藏的winwdow

64: 等待popOver加载完毕后显示

128: 支持手势

256: 标记opn的window上一个window不隐藏

512: 标记open的浮动窗口用友打开wabapp

indexSelected:默认显示的索引项，默认显示第一项

具体步骤如下：

第一步：

在index页面头部插入一个tab控件,代码如下：

        <div id=“tabview“ class=“uf sc-bg“ id=““>

        </div>

        <!--header结束-->

JS代码中完善tab控件参数，如下

var tabview = appcan.tab({

        selector : “#tabview“,

        hasIcon : true,

        hasAnim : true,

        hasLabel : false,

        hasBadge : false,

        data : [{

            label : “QQ“,

            “icon“:“fa-qq“

        }, {

            label : “微软“,

            “icon“:“fa-windows“

        }, {

            label : “微信“,

            “icon“:“fa-weixin“,

            badge:1

        }]

    });

第二步：

给tab控件添加点击事件，并设置多页面浮动窗口跳转到的子页面窗口的索引，调用appcan.window.selectMultiPopover(popName,index)

popName:要设置的多页面浮动窗口的名称

index:要设置的多页面浮动窗口页面的索引

具体代码如下：

tabview.on(“click“,function(obj, index){

        appcan.window.selectMultiPopover(“content“,index);

    })

第三步：

在appcan.ready方法中去调用打开多窗口的方法，这里用的是appcan.window.openMultiPopover(popName,content,dataType, left, top, width, height,change, fontSize, flag, indexSelected)，也可以调用appcan.frame.open方法，具体实现代码如下：

    appcan.ready(function() {

           //打开多窗口

  var top = $(`#header`).offset().height + $(`#tabview`).offset().height;

          //获取主窗口头部的高度

        appcan.frame.open({

            id : “content“,

            url : [{

                “inPageName“ : “OpenWin_content“,//窗口1名称

                “inUrl“ : “OpenWin_content.html“,//窗口1路径

            }, {

                “inPageName“ : “baidu“, //窗口2名称

                “inUrl“ : “http://m.baidu.com“, //窗口2路径

            }, {

                “inPageName“ : “appcan“,  //窗口3名称

                “inUrl“ : “http://www.appcan.cn“,//窗口3路径

            }],

            top : top,

            left : 0,

            index : 0,

            change:function(err,res){

                tabview.moveTo(res.multiPopSelectedIndex);

//移动到所选中的索引窗口

            }

        });