Fork me on GitHub

解决 apicloud 下关闭 Win 页面失效问题

#场景

🌈 在使用 apicloud 开发相关应用的时候,经常会遇到打开一个新的 Window 页面,
同时需要把其他 Window 或 Frame 页面关闭的情况。
以下是官网 api 文档的描述:

closeWin 方法可以关闭 Window,但注意,若当前正在进行 openWin、closeWin 等带动画过渡的 Window 操作,调用此方法会失效。

#探索

根据官方文档说明,想到的解决办法就是:
当触发 openWin 方法打开新页面时,利用 setTimeout 方法延迟执行关闭旧页面的 Window 和 Frame,或者直接把 openWin 的切换动画禁掉,按理说这两种解决方法是可行的,但是,当操作频繁且快速切换的时候,往往就会出现失灵的情况。
🍰 以退出登录功能为例,代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
function logout(){
api.openWin({
name: 'login',
animation: {
type: 'fade',
duration: 300
}
})
setTimeout(function(){
api.closeWin({
name: 'moreInfo',
animation: {
type: 'none'
}
})
},300)
setTimeout(function(){
api.closeWin({
name: 'teacherIndex',
animation: {
type: 'none'
}
})
},400)
setTimeout(function(){
api.closeFrameGroup({
name: 'group'
});
},500)
}

以上方法,实践证明,无法解决打开新的 Win 页面后关闭旧的 Win 页面的问题。
后面经过探索后,最终找到了解决方案。

#方案

🚀 apicloud 官方文档有提供一个 viewappear 事件:

viewappear 是 Window 显示到屏幕的事件,标志当前 Window 已经动画结束,并且完全显示到屏幕上。
viewappear 事件作用对象只是 Window,Frame 的显示不会收到事件。

所以,回到问题上,我们在新 Window 页面里进行事件监听,然后在回调函数里执行页面关闭操作即可。
还是以退出登录功能为例,新页面为登录页面 login。
🍰 login 页面代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
//事件代表当前 Window 已经动画结束,并且完全显示到屏幕上
api.addEventListener({
name: 'viewappear'
}, function(ret, err){
setTimeout(function() {
api.closeWin({
name: 'moreInfo',
animation: {
type: 'none'
}
});
}, 200)
setTimeout(function(){
api.closeWin({
name: 'myInfo',
animation: {
type: 'none'
}
});
},400)
setTimeout(function(){
api.closeWin({
name: 'teacherIndex',
animation: {
type: 'none'
}
});
},600)
setTimeout(function(){
api.closeFrameGroup({
name: 'group'
});
},800)
});

🍭 这样的话,就能在新的 Window 页面打开动画结束之后,精确执行关闭其他 Window 页面和 Frame 页面的方法啦 ~

0%
            [00:06.59]呼んでいる 胸のどこか奥で
            [00:12.06]いつも心踊る 夢を見たい
            [00:18.09]かなしみは 数えきれないけれど
            [00:23.87]その向こうできっと あなたに会える
            [00:29.40]
            [00:31.81]繰り返すあやまちの そのたび ひとは
            [00:38.20]ただ青い空の 青さを知る
            [00:43.33]果てしなく 道は続いて見えるけれど
            [00:50.92]この両手は 光を抱ける
            [00:54.89]
            [00:57.26]さよならのときの 静かな胸
            [01:02.80]ゼロになるからだが 耳をすませる
            [01:08.60]生きている不思議 死んでいく不思議
            [01:14.53]花も風も街も みんなおなじ
            [01:20.50]
            [01:22.40]nananan lalala lululu
            [01:47.63]呼んでいる 胸のどこか奥で
            [01:53.56]いつも何度でも 夢を描こう
            [01:59.14]かなしみの数を 言い尽くすより
            [02:05.16]同じくちびるで そっとうたおう
            [02:11.48]
            [02:12.96]閉じていく思い出の そのなかにいつも
            [02:19.31]忘れたくない ささやきを聞く
            [02:24.47]こなごなに砕かれた 鏡の上にも
            [02:31.12]新しい景色が 映される
            [02:35.89]
            [02:38.27]はじまりの朝の静かな窓
            [02:43.72]ゼロになるからだ 充たされてゆけ
            [02:49.70]海の彼方には もう探さない
            [02:55.66]輝くものは いつもここに
            [03:01.66]わたしのなかに 見つけられたから
            [03:08.20]
            [03:14.13]nananan lalala lululu
        
            [by:嘶哑音符]
            [00:00.12]二人の間 通り過ぎた風は
            [00:07.15]どこから寂しさを運んできたの
            [00:13.66]泣いたりしたそのあとの空は
            [00:19.82]やけに透き通っていたりしたんだ
            [00:26.02]music
            [00:37.03]いつもは尖ってた父の言葉が
            [00:42.82]今日は暖かく感じました
            [00:48.47]優しさも笑顔も夢の語り方も
            [00:54.07]知らなくて全部 君を真似たよ
            [00:59.48]もう少しだけでいい あと少しだけでいい
            [01:05.39]もう少しだけでいいから
            [01:11.20]もう少しだけでいい あと少しだけでいい
            [01:16.97]もう少しだけ くっついていようか
            [01:21.11]music
            [01:25.69]僕らタイムフライヤー 時を駆け上がるクライマー
            [01:30.74]時のかくれんぼ はぐれっこはもういやなんだ
            [01:37.51]嬉しくて泣くのは 悲しくて笑うのは
            [01:41.74]君の心が 君を追い越したんだよ
            [01:46.78]music
            [02:08.22]星にまで願って 手にいれたオモチャも
            [02:14.10]部屋の隅っこに今 転がってる
            [02:19.83]叶えたい夢も 今日で100個できたよ
            [02:25.53]たった一つといつか 交換こしよう
            [02:31.26]music
            [02:37.14]いつもは喋らないあの子に今日は
            [02:42.95]放課後「また明日」と声をかけた
            [02:48.50]慣れないこともたまにならいいね
            [02:54.25]特にあなたが 隣にいたら
            [02:59.69]もう少しだけでいい あと少しだけでいい
            [03:05.39]もう少しだけでいいから
            [03:11.09]もう少しだけでいい あと少しだけでいい
            [03:16.69]もう少しだけくっついていようよ
            [03:21.02]music
            [03:25.75]僕らタイムフライヤー 君を知っていたんだ
            [03:30.42]僕が 僕の名前を 覚えるよりずっと前に
            [03:43.62]君のいない 世界にも 何かの意味はきっとあって
            [03:49.00]でも君のいない 世界など 夏休みのない 八月のよう
            [03:55.15]君のいない 世界など 笑うことない サンタのよう
            [04:00.60]君のいない 世界など
            [04:08.70]music
            [04:34.00]僕らタイムフライヤー 時を駆け上がるクライマー
            [04:39.32]時のかくれんぼ はぐれっこはもういやなんだ
            [04:46.03]なんでもないや やっぱりなんでもないや
            [04:50.46]今から行くよ
            [04:55.00]僕らタイムフライヤー 時を駆け上がるクライマー
            [04:59.98]時のかくれんぼ はぐれっこ はもういいよ
            [05:06.45]君は派手なクライヤー その涙 止めてみたいな
            [05:11.34]だけど 君は拒んだ 零れるままの涙を見てわかった
            [05:18.08]嬉しくて泣くのは 悲しくて 笑うのは
            [05:22.51]僕の心が 僕を追い越したんだよ
            [05:27.55]end
        
            [ti:Down by the salley gardens]
            [ar:藤田惠美]
            [al:挪威甘菊]
            [by:]
            [00:12.00]Down by the salley gardens my love and I did meet
            [00:25.00]She passed the salley gardens with little snow-white feet
            [00:38.00]She did me take love easy, as the leaves grow on the tree
            [00:50.00]But I, being young and foolish, with her would not agree
            [01:04.00]
            [01:15.00]In a filed by the river my love and I did stand
            [01:28.00]And on my leaning shoulder she laid her snows-white hand
            [01:40.00]She bid me take life easy, as the grass grows on the weirs
            [01:52.00]But I was young and foolish, and now I am full of tears
            [02:06.00]
            [02:54.00]Down by the salley gardens my love and I did meet
            [03:05.00]She passed the salley gardens with little snow-white feet
            [03:18.00]She did me take love easy, as the leaves grow on the tree
            [03:30.00]But I, being young and foolish, with her would not agree
        
            [00:11.860]夜明けまであと一時間 もうそろそろ行こう
            [00:23.120]聞こえるのは眠る君のかすかな寝息だけ
            [00:34.240]
            [00:37.710]目を閉じた君の横顔 とてもきれいだよ
            [00:49.440]さよなら 君の耳元にそっと囁いた
            [01:00.790]
            [01:01.480]ああ、僕は君を置いて 今ここを出て行く
            [01:12.970]外は雨 音もなく 僕の頬を濡らす
            [01:24.330]
            [01:36.410]君と出会ったのはたった半年前のこと
            [01:48.080]もうずいぶん前のことのような気がする
            [01:59.460]
            [01:59.900]今思えば僕らろくに話もしなかった
            [02:11.220]时间はいつも余るほどあったはずなのに
            [02:22.640]
            [02:23.090]ああ、僕は君を置いて 今ここを出て行く
            [02:34.740]外の雨は僕の涙、静かに降り続く
            [02:46.870]外の雨は僕の涙、静かに降り続く
            [02:59.480]
        
            [00:07.694]灯りを消したまま話を続けたら
            [00:19.901]ガラスの向こう側で星がひとつ消えた
            [00:26.559]からまわりしながら通りを駆け抜けて
            [00:37.816]砕けるその時は君の名前だけ呼ぶよ
            [00:45.374]広すぎる霊園のそばの このアパートは薄ぐもり
            [00:56.155]暖かい幻を見てた
            [01:04.441]猫になりたい 君の腕の中
            [01:13.254]寂しい夜が終わるまでここにいたいよ
            [01:22.621]猫になりたい 言葉ははかない
            [01:31.369]消えないようにキズつけてあげるよ
            [01:47.999]目を閉じて浮かべた密やかな逃げ場所は
            [01:57.880]シチリアの浜辺の絵ハガキとよく似てた
            [02:05.646]砂ぼこりにまみれて歩く 街は季節を嫌ってる
            [02:15.629]つくられた安らぎを捨てて
            [02:23.888]猫になりたい 君の腕の中
            [02:32.579]寂しい夜が終わるまでここにいたいよ
            [02:41.912]猫になりたい 言葉ははかない
            [02:50.362]消えないようにキズつけてあげるよ
        
            [by:最短距離]
            [00:08.40]落し物をしたのね そんな曇りの日に
            [00:15.78]プラネタリュウムに行って 重いドアを閉じましょうよ
            [00:23.28]いつのまに落としたの それさえわからなくて
            [00:30.55]涙をもう落とせない なら星見上げましょうよ
            [00:38.12]何がほんと作り事 答えは欲しくないけど
            [00:46.23]あなたが言う言葉は本当に したいよ
            [00:57.77]落し物をしたのね そんな曇りの日に
            [01:05.20]プラネタリュウムに行って 重いドアを閉じましょうよ
            [01:12.71]魔法信じれないけど 魔法みたいな力を
            [01:19.74]信じたくってこうして こんな星を見上げるんだ
            [01:26.89]差しわされた あなたの手を
            [01:30.27]私は今 ほら 握れなくて
            [01:34.12]通り過ぎてく 遠い答えを
            [01:37.72]言いたくても ほら言い出せない
            [01:57.90]
            [01:57.96]落し物をしたのね あなたを信じたことを
            [02:05.25]プラネタリュウム出るから 私のドア開けましょうよ
            [02:11.69]私のドア開けましょうよ
            [02:15.29]私のドア開けましょうよ
            [02:19.60]
            [02:19.67]はい!
            [02:21.60]はい!
            [02:23.47]はい!
            [02:24.89]はい!
            [02:26.91]はい!
            [02:28.74]はいはい!
            [02:30.97]はい!
            [02:32.40]はい!