遇到如下需求:需要在一个流程中的每一步点击返回时回到主页,主页点击进入流程时进入上一次流程中的步骤页,每步骤页点击下一页去到下一个步骤页,有另外的按钮可以回到上一页。
首先封装了跳转页面函数:
function JumpWithDefalutAni(url, id, extra){
mui.openWindow({
url:url,
id:id,
show:{
autoShow:true,
aniShow:'pop-in'
},
extras:extra
});
}
然后在主页设置ajax对接口进行操作:
mui.ajax( server + 'login/api/certi-comp',{
data:{
user_token: token,
mark: 6,
},
type : 'post',
dataType : 'json',
timeout : 10000,
success : function(data){
// console.log(JSON.stringify(data));
/*验证成功*/
if(data.code==1){
if(data.msg==0){
JumpWithDefalutAni('../certification/cert-type.html','cert-type',{});
}else if(data.msg==1){
JumpWithDefalutAni('../certification/corp-cert2.html','corp-cert2',{corp_name:data.comp_name});
}else if(data.msg==2){
JumpWithDefalutAni('../certification/corp-cert3.html','corp-cert3',{time:data.time});
}
}
else{
openConfirm('../../confirm.html',{type:"alert",main:data.msg});
}
},
error : function(xh, type, errorThrown){
mui.toast("请求错误!错误描述:" + type,{ duration: 'long'});
}
});
每一页的跳转下一页方法中的接口返回成功里加上跳转:
JumpWithDefalutAni('corp-cert2.html','corp-cert2',{corp_name:corp_name.value});
回到上一页由于需要做成弹窗效果,所以就用mui.fire和触发器实现,触发器里接口返回成功里加挑战即可,就不贴出来了。
然后难点是如何直接返回到主页,考虑到流程页有可能是上一页打开的,也有可能是主页直接打开的,所以必须对已打开的页面做判断,才能确定需要关掉哪些页面,一开始我是这么写的:
function exitCert(){
plus.webview.getWebviewById('mine.html').reload();
var wvs=plus.webview.all();
for(var i=0;i<wvs.length;i++){
if(wvs[i].id=='corp'){
plus.webview.getWebviewById('corp').close();
}else if(wvs[i].id=='cert-type'){
plus.webview.getWebviewById('cert-type').close();
}
}
plus.webview.getWebviewById('corp-cert2').close();
}
用all得到所有打开的窗口,然后判断是否有之前的步骤页,有就关掉。
后来觉得很麻烦,就想每个步骤执行后就关掉当前页,于是在跳转函数里加上了:
JumpWithDefalutAni('corp-cert2.html','corp-cert2',{corp_name:corp_name.value});
setTimeout("plus.webview.currentWebview.close();",500);
但是他会出现很奇怪的跳转动画,前辈告诉我不要在当前页面关掉自己,在跳转的新页面关闭原页面,于是就改成了:
function plusReady() {
if(plus.webview.currentWebview().opener().id != 'mine.html'){
setTimeout("plus.webview.currentWebview().opener().close('none');",300);
}
}
在页面加载的plusReady函数里判断打开页面id是否为主页id,如果不是就将它关掉,这样每次进入一个新的步骤打开的页面就只剩当前页面和主页,那么返回也就不需要exitCert()函数,直接返回到上一页就可以了。