apicloud----1、apicloud怎样监听手机返回键以及按下返回键关闭frame

说起这个问题,就不得不说一下在apicloud上面页面的组成部分。在使用apicloud开发移动App时,一个页面会由两个(或以上)html组成。

其中

一个window(win)页面

一个或多个frame(frm)页面

使用apicloud所提供的api.openframe或api.openframegroup来在window中加载frame。

今天我想要分享的就是怎样使用keyback方法监听手机返回键按下并且关闭指定的frame页面,而不是整个window。

话不多说我们开始:

今天在做项目的时候遇到一个页面,大概的样子就是在win中的一个frame中点击一个按钮,需要弹出一个新的frame(以下称弹窗),在弹窗打开以后,当我按下手机返回按钮时需要关闭这个新打开的弹窗,但是在默认情况下关闭的是整个window,在写好这个功能后心血来潮在这里分享一下(虽然技术含量不是很高!@。@)

在入手去写的时候,我首先想到了apicloud官方所提供的api接口-----keyback 这个api就是用来监听手机返回键的。

想到了用什么就该开始写代码

api.addEventListener({
name: 'keyback'
}, function(ret, err) {
api.closeFrame({
name: '弹窗'
});
});

开始的时候我只写了这一段,意思就是在win中按下了返回键,就关掉弹窗页面(为了阅读方便name中我使用的汉字)。

写好之后呢,第一个问题来了,指定的frame可以关掉,但是关掉frame之后再次按下返回键的时候没有反应,正常是该关掉win的,显然这样不行。

这回我想到通过判断来实现按下返回键时不同的需求。那该判断什么呢,当然是判断弹窗是否已打开,如果打开,返回键按下则关闭弹窗,否则关闭win。但是apicloud中并没有给我提供用来判断frame打开状态的方法,这里我们使用提供的数据存储 -- $api.setStorage和getStorage。

例如,在frame中有一个button 上有一个方法叫做 open(),点击button弹出弹窗

function open()}{

api.openframe({

name: '弹窗',
url: '弹窗.html',
bounces: false,
bgColor: 'widget://image/login_bg.png',
rect: {
x: 0,
y: 0,
w: 'auto',
h: 'auto'
}

})

$api.setStorage('flag',1);//标记

}

在点击按钮的同时,使用setStorage存储一个标记,值为1

在win中获取这个标记,var flag = getStorage('flag');

然后通过flag来判断弹窗是否打开

var flag = $api.getStorage('flag');

api.addEventListener({
name: 'keyback'
}, function(ret, err) {
if(flag == 1){
api.closeFrame({
name: '弹窗'
});
flag = 0;
}else if(flag == 0){
api.closeWin({
});
}
});

如果弹窗frame已经打开,我们之前设置的flag已经生效,值为1。

如果flag值为1,按下返回键关闭弹窗,并且将flag值设置为0,当我们关闭弹窗之后再次点击返回键时,flag已经为0,所以关闭win。

至此,我以为功能已经实现,正要欢呼雀跃(其实没这么严重啦)时,bug来了。。。以上方法表面上已经实现了功能,但是问题是只有在弹窗第一次打开时,功能是可以实现的,但是关掉弹窗之后再次打开弹窗,按下返回键又把整个window关掉了,也就是我设置的标记只有弹窗第一次打开生效,关掉弹窗之后标记就失效了。

再次思索中。。。有了

在apicloud中有一个方法 ----- api.execScript 在制定的win或者frame中执行js方法。

终级代码(中间又出现一个小bug,已解决,避免啰嗦就直接上成型的了)

win页面:

var flag;
function change(){
flag = 1;
}

apiready = function(){

flag = $api.getStorage('flag');

api.addEventListener({
name: 'keyback'
}, function(ret, err) {
if(flag == 1){
api.closeFrame({
name: '弹窗'
});
flag = 0;
}else if(flag == 0){
api.closeWin({
});
}
});
};

弹窗按钮所在的frame(不是弹窗frame):

apiready = function(){
api.parseTapmode();
};
var flag = $api.setStorage('flag', 0);

function open(){
api.openFrame({
name: '弹窗',
url: '弹窗.html',
rect: {
x: 0,
y: 0,
w: 'auto',
h: 'auto'
},
pageParam: {
name: 'test'
},
bounces: false,
vScrollBarEnabled: false,
hScrollBarEnabled: false
});
flag = 1;
api.execScript({
script: 'change();'
});
}

相关推荐