APICloud进行窗口和页面操作

0. 官方文档

官方文档https://docs.apicloud.com/Client-API/api#33

​​​​​​​1. 方式一windows窗口

1.1 介绍

• window是APICloud提供的最顶级的页面单位.一个APP至少会存在一个以上的window窗口,在用户打开APP应用，应用在初始化的时候，默认就会创建了一个name=root 的顶级window窗口，显示当前APP配置的首页。
• 新建window窗口。
• 注意: 如果之前已经存在同名的窗口,则APP不会再次创建新窗口,而是显示对应名称的窗口。

1.2 代码示例

 <li><img class="module4" @click="login" src="../static/images/image4.png"></li>


methods:{
        login(){
          // 跳转到登录页面[通过新建窗口的方式跳转]
          // api.openWin({
          //     name: 'login',
          //     bounces: true,       // 窗口是否上下拉动
          //     reload: true,         // 如果页面已经在之前被打开了,是否要重新加载当前窗口中的页面
          //     url: './login.html',
          //     animation:{           // 打开新建窗口时的过渡动画效果【转场动画】
          //     	type:"push",                //动画类型（详见动画类型常量）
          //     	subType:"from_right",       //动画子类型（详见动画子类型常量）
          //     	duration:400                //动画过渡时间，默认300毫秒
          //     },
          //     pageParam: {
          //
          //     }
          // });
        }

1.3 关闭指定名称的窗口

• 如果当前APP中只有剩下一个顶级窗口root,则无法通过当前方法关闭! 也有部分手机直接退出APP了

//关闭当前window，使用默认动画
api.closeWin();

//关闭指定window，若待关闭的window不在最上面，则无动画
api.closeWin({
    name: 'page1'
});

2. 方式二frame 帧页面

2.1 介绍

• 如果APP中所有的页面全部通过window窗口进行展开,则APP需要耗费大量的内存来维护这个窗口列表,从而导致, 用户操作APP时,APP响应缓慢甚至卡顿的现象.所以APP中除了通过新建窗口的方式展开页面以外, 还提供了帧的方式来展开页面.
• 帧,代表的就是一个窗口下开打的某个页面记录.所谓的帧就有点类似于浏览器中窗口通过地址栏新建的一个页面一样.
• 使用的时候注意: 
•     1. APP每一个window窗口都可以打开1到多个帧.新建窗口的时候,系统会默认顺便创建第一帧出来.
•     2. 每一帧代表的都是一个html页面,
•     3. 默认情况下, APP的window的窗口会自动默认满屏展示.而帧可以设置矩形的宽高.如果顶层的帧页面没有满屏显示,则用户可以看到当前这一帧下的其他帧的内容.

2.2 代码示例

api.openFrame({
    name: 'page2',        // 帧页面的名称
    url: './page2.html',  // 帧页面打开的url地址
    data: '',             // 可选参数,如果填写了data,则不要使用url, data表示页面数据,可以是html代码
    bounces:false,        // 页面是否可以下拉拖动
    reload: true,         // 帧页面如果已经存在,是否重新刷新加载
    useWKWebView:true,
    historyGestureEnabled:true,
    animation:{
        type:"push",             //动画类型（详见动画类型常量）
    	subType:"from_right",    //动画子类型（详见动画子类型常量）
    	duration:300             //动画过渡时间，默认300毫秒
    },
    rect: {               // 当前帧的宽高范围
        // 方式1,设置矩形大小宽高
        x: 0,             // 左上角x轴坐标
        y: 0,             // 左上角y轴坐标
        w: 'auto',        // 当前帧页面的宽度, auto表示满屏
        h: 'auto'         // 当前帧页面的高度, auto表示满屏
    },
    pageParam: {          // 要传递新建帧页面的参数,在新页面可通过 api.pageParam.name 获取
        name: 'test'      // name只是举例, 可以传递任意自定义参数
    }
});

2.3 关闭帧页面

// 关闭当前 frame页面
api.closeFrame();

// 关闭指定名称的frame页面
api.closeFrame({
    name: 'page2'
});

3. framegroup 帧页面组

3.1 介绍

• framegroup实际上是基于frame操作的优化方案。
• 主要原因是，frame在每次打开页面的时候都需要加载页面数据，所以APICloud提供了帧页面组，允许我们在打开一个frame页面时可以预先加载其后续或相关的其他frame页面。

3.2 代码示例

api.openFrameGroup({
    name: 'group1',   // 组名
    rect: {           // 帧页面组的显示矩形范围
        // 方式1:
        x:,             //左上角x坐标，数字类型
        y:,             //左上角y坐标，数字类型
        w:,             //宽度，若传'auto'，页面从x位置开始自动充满父页面宽度，数字或固定值'auto'
        h:,             //高度，若传'auto'，页面从y位置开始自动充满父页面高度，数字或固定值'auto'
        
        // 方式2: 
        marginLeft:,    //相对父页面左外边距的距离，数字类型
    	marginTop:,     //相对父页面上外边距的距离，数字类型
    	marginBottom:,  //相对父页面下外边距的距离，数字类型
    	marginRight:    //相对父页面右外边距的距离，数字类型
    },
    frames: [{
        name:'',         //frame名字，字符串类型，不能为空字符串
        url:'',          // 页面地址
		useWKWebView:true,
        historyGestureEnabled:false,  //（可选项）是否可以通过手势来进行历史记录前进后退。
        pageParam:{},    // 页面参数
        bounces:true,    // 是否能下拉拖动
    }, {
        name:'',         //frame名字，字符串类型，不能为空字符串
        url:'',          // 页面地址
		useWKWebView:true,
        historyGestureEnabled:false,  //（可选项）是否可以通过手势来进行历史记录前进后退。
        pageParam:{},    // 页面参数
        bounces:true,    // 是否能下拉拖动
    },{
        ...
      
    },...
    ]
}, function(ret, err) {
    // 当前帧页面发生页面显示变化时,当前帧的索引.
    var index = ret.index;
});

3.3 关闭帧页面组

api.closeFrameGroup({
    name: 'group1' // 组名
});

3.4 切换当前帧页面组显示的帧页面

api.setFrameGroupIndex({
    name: 'group1', // 组名
    index: 2        // 索引,从0开始
});