页面栈管理

更新时间:2017/08/23 访问次数:3660

一个QAP应用包含一个或者多个页面,这些页面会被放到该应用的页面栈中进行管理。
在页面栈的基础上,QAP提供了丰富的API来支持开发者灵活地管理页面之间的跳转。

1. push和pop

这是两个最基础的页面栈管理的API,用来打开一个新页面和关闭当前页面。

callPush = (url) => {
        QN.navigator.push({url:url});
    }

    callPop = () => {
        QN.navigator.pop();
    }

效果如下图所示:

image

这里的url可以是如下几种格式,对应qap.json配置文件的pages字段中的每个元素的url字段:

页面地址 本地/远程 页面类型
qap:///index.js 本地 Native
https://m.taobao.com/ 远程 H5
https://host/index.js 远程 Native,后缀也可以是wx
https://host/?_wx_tpl=http://host/index.js 远程 Native
https://host/?wh_weex=true 远程 由服务端返回的Content-Type决定

需要注意的是在第一个页面地址示例中,qap协议后面跟着三个斜杠、无需填写host字段信息,因为QAP会根据路径到对应的应用目录下寻找文件。
同时,这也是一个保留特性,请开发者务必遵循。

2. push进阶

2.1 携带标题和页面参数

除了基本的url参数外,push这个API还提供了其它扩展参数,比如支持在push时直接设置下一个页面的标题,并且传递一些参数:

<Button style={styles.testButton} onPress={() => {this.pushWithTitleAndQuery('./navigator.js', 'pushwithTitle', {a:'1'})}}>pushWithTitle</Button>
    ...
    pushWithTitleAndQuery = (url, title, query) => {
        QN.navigator.push({
            url:url,
            title:title,
            query:query
        });
    }

2.2 clearTop

除此之外,QAP的页面栈还支持在push一个新页面进栈时,先清空现有页面栈,将新页面作为应用的第一个页面(即栈底)展示:

QN.navigator.push({
            url:url,
            title:title,
            query:query,
            settings:{animated:true, clearTop:true}
        });

通过在settings参数中设置clearTop的值可以实现该效果。

3. pop进阶

和push携带clearTop参数类似,pop也可以携带一些参数来回退到指定页面,不过需要在比较高的版本上。

3.1 pop(n)

通过制定要出栈的页面数目来返回:

popN = (n) => {
        QN.navigator.pop({query:{pages:n}});
    }

3.2 popTo

popToN = (n) => {
        QN.navigator.popTo({query:{index:n}});
    }

    popToUrl = (url) => {
        QN.navigator.popTo({query:{url:url}});
    }

通过在query中设置index或者url参数可以返回到指定页面,其中index从0开始,并且优先级高于url。

4. 关闭和刷新

前面提到可以监听backclosereload等事件来实现自定义的交互,比如在重要操作场景让用户确认是否真的要执行退出或者关闭操作。
当用户确认要继续执行时,开发者应该提供相应的功能来完成用户操作:

监听的事件 相应的API
back QN.navigator.pop();
close QN.navigator.close();
reload QN.navigator.reload();

5. 打开其它应用

这里稍微拓展下页面栈管理范围之外的功能,比如使用QN.navigator.push()功能还可以拨打电话、发短信、打开手机淘宝等其它应用:

QN.navigator.push({url:'tel:13888888888'});
QN.navigator.push({url:'sms:13888888888'});
QN.navigator.push({url:'taobao://'});

为了确保用户隐私,在拨打电话之前会需要用户确认。
另外,在尝试打开其它应用时,如果用户设备上没有安装该应用,则会返回失败。

FAQ

关于此文档暂时还没有FAQ
文档标签:
QAP
返回
顶部