共计 1304 个字符,预计需要花费 4 分钟才能阅读完成。
景象形容
在快利用中弹出一个弹窗,冀望成果是该弹窗在用户确认后再退出,然而应用 onbackpress 管制确认弹窗后主动退出不失效。
问题剖析
快利用引擎实现机制决定了 onbackpress 不能有耗时的操作。当超过一段时间后,如果代码还没有解决完,就会按返回值为 false 解决,即默认敞开该页面。问题代码中通过 $watch 监听 showResult 的变动,若变动则执行 fetch 操作,而这些操作可能还没执行完,从而导致弹窗主动敞开。
问题代码如下:
1. onBackPress() {2. console.log("main onBackPress. status =" + this.showResult);
3. if (this.showResult) {4. this.$element('textarea').focus({focus: false});
5. this.content = '';
6. this.touchedIndex = -1;
7. // 解决因监听 showResult 变动后的事件处理过缓问题,导致系统返回键有时生效
8. this.showResult = false;
9. return true;10. }
11. return false;
12. },
13. initDataWatchConfig() {
14. let that = this;
15. this.$watch('showResult', (newV, oldv) => {16. if (!that.showResult) {17. audio.stop();
18. this.getphoto()// 此处是一个比拟耗时的操作,以 fetch 举例,只有革除数据后第一次关上能够复现
19. }
20. });
21. },
22. getphoto: function () {
23. var that = this
24. fetch.fetch({
25. url: '
26. success: function (ret) {27.},
28. fail: function (msg, code) {29.}
30. })}
解决办法
给耗时比拟长的操作减少延时。为 this.showResult = false 减少一个延时,优化后的代码如下:
1. onBackPress() {2. console.log("main onBackPress. status =" + this.showResult);
3. if (this.showResult) {4. this.$element('textarea').focus({focus: false});
5. this.content = '';
6. this.touchedIndex = -1;
7. // 减少延时,解决因监听 showResult 变动后的事件处理过缓问题,导致系统返回键有时生效
8. setTimeout(() => {
9. this.showResult=false;
10. }, 800);
11. return true;
12. }
13. return false;
14. }
原文链接:https://developer.huawei.com/consumer/cn/forum/topic/0204411119222660356?fid=18
原作者:Mayism
正文完