Android开发中,Vue 3处理回退按键事件

2 篇文章 1 订阅

vue3有一些变化,按照网上有些文章的方法,发现行不通,通过一段时间的打印、尝试后,发现以下方法可行。

第一步)首先定义一个处理回退事件的js函数,一定是vue.methods中的函数,否则找不到this,或者找不到router,其次,在mounted事件中将它映射成全局js函数;在此函数中判断是router.back还是退出Activity,通过返回值告诉Activity。

const app = Vue.createApp({
provide:{tags:tags, service:service},
created(){
    this.$router.push('/home').catch(err => {err})
},
mounted() {

    window.sys_go_back = this.sysGoBack;//声明全局函数,在Activity中调用
},
methods:{
sysGoBack() {
    //实现按回退按钮回退历史页面,如果无历史,则退出activity或应用

    //注意这里有变化,不能用this.$router.currentRoute.path
    if(this.$router.currentRoute.value.path==="/home") {
        return false;
    }
    this.$router.back();
    return true;
}
}
});

第二步)在用了Webview的Activity中处理onBackPressed事件,调用全局的sys_go_back函数,如果返回true,则不做什么事情,否则执行Activity的回退。

    @Override
    public void onBackPressed () {
        LOG.debug("onBackPressed");
        if(webview == null) {
            super.onBackPressed();
            return;
        }

        //注意这里使用了CompletableFuture,所以至少需要用java 8

        //使用CompletableFuture,可以解决很多Android中调用跟回调分离十万八千里的问题
        jsGoBack().whenCompleteAsync((hasHistory, e) -> {
            LOG.debug("sys_go_back return {}", hasHistory);
            if(hasHistory) {
                return;
            }
            runOnUiThread(super::onBackPressed);
        });
    }

    /**
     * 先判断vue中是否有历史可回退,如果有则执行vue的back,并返回true,否则直接返回false
     * @return 是否存在可回退的历史页面
     */
    private CompletableFuture<Boolean> jsGoBack() {
        LOG.debug("Call vueGoBack");
        CompletableFuture<Boolean> result = new CompletableFuture<>();
        webview.evaluateJavascript("javascript:sys_go_back()", value -> {
            LOG.debug("sys_go_back() return {}", value);
            result.complete(ValParser.parseBool(value, false));
        });

        return result;
    }

  • 3
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值