景象形容
在快利用中弹出一个弹窗,冀望成果是该弹窗在用户确认后再退出,然而应用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 = this24. 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