Uni-app中Vebview监听系统返回键,返回上一层webview

1,147 阅读1分钟

首先在uniapp中创建webview

<template>
    <view>
        <web-view :src="url" @message="handleMessage"></web-view>
    </view>
</template>

然后监听返回事件,单击返回上一页,双击退出app

let webView;
data() {
    return {
        url: '',
        backNum: 0, 
    }
},
onReady() {
    // 在uni-app里vue页面直接使用plus.webview.currentWebview()无效
    let currentWebview = this.$scope.$getAppWebview()
    setTimeout(function() {
        webView = currentWebview.children()[0];
  }, 1000);
},
//监听返回按键点击事件
onBackPress() {
    var that = this;
    that.backNum++;
        if (that.backNum > 1) {
            // 双击退出
            plus.runtime.quit();
        } else {
            // evalJS 执行JS脚本
          webView.evalJS('window.history.back()')
        }
        setTimeout(function() {
            that.backNum = 0;
        }, 600);
        return true;
},

使用plus.key.addEventListener一直没起作用!

试了好多次监听backbutton事件,但是e.canBack一直为false,始终无法返回webview上一条记录,有大佬知道原因望告知一下

plus.key.addEventListener('backbutton', function() {//调用H5+API监听返回事件
        webview.canBack(function(e) {
            //这里我试了好几次,e.canBack在uniapp中一直为false,无法对webview进行back操作
            if (e.canBack) {
                webview.back(); //返回上一页  
            } else {
                webview.close(); //关闭应用  
            }
        })
 })

H5+API链接:www.html5plus.org/doc/zh_cn/w…