一个QAP应用包含一个或者多个页面,这些页面会被放到该应用的页面栈中进行管理。
在页面栈的基础上,QAP提供了丰富的API来支持开发者灵活地管理页面之间的跳转。
这是两个最基础的页面栈管理的API,用来打开一个新页面和关闭当前页面。
callPush = (url) => { QN.navigator.push({url:url}); } callPop = () => { QN.navigator.pop(); }
效果如下图所示:
这里的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会根据路径到对应的应用目录下寻找文件。
同时,这也是一个保留特性,请开发者务必遵循。
除了基本的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 }); }
除此之外,QAP的页面栈还支持在push一个新页面进栈时,先清空现有页面栈,将新页面作为应用的第一个页面(即栈底)展示:
QN.navigator.push({ url:url, title:title, query:query, settings:{animated:true, clearTop:true} });
通过在settings参数中设置clearTop的值可以实现该效果。
和push携带clearTop参数类似,pop也可以携带一些参数来回退到指定页面,不过需要在比较高的版本上。
通过制定要出栈的页面数目来返回:
popN = (n) => { QN.navigator.pop({query:{pages:n}}); }
popToN = (n) => { QN.navigator.popTo({query:{index:n}}); } popToUrl = (url) => { QN.navigator.popTo({query:{url:url}}); }
通过在query中设置index或者url参数可以返回到指定页面,其中index从0开始,并且优先级高于url。
前面提到可以监听back
、close
和reload
等事件来实现自定义的交互,比如在重要操作场景让用户确认是否真的要执行退出或者关闭操作。
当用户确认要继续执行时,开发者应该提供相应的功能来完成用户操作:
监听的事件 | 相应的API |
---|---|
back |
QN.navigator.pop(); |
close |
QN.navigator.close(); |
reload |
QN.navigator.reload(); |
这里稍微拓展下页面栈管理范围之外的功能,比如使用QN.navigator.push()
功能还可以拨打电话、发短信、打开手机淘宝等其它应用:
QN.navigator.push({url:'tel:13888888888'}); QN.navigator.push({url:'sms:13888888888'}); QN.navigator.push({url:'taobao://'});
为了确保用户隐私,在拨打电话之前会需要用户确认。
另外,在尝试打开其它应用时,如果用户设备上没有安装该应用,则会返回失败。