uniapp中webview支持history.back的方法

发表于：2022-02-15 13:35:11浏览：2720次TAG： #Vue #uniapp

在uni-app中使用了webview之后, 由于项目完全由app内嵌h5完成, 所以无法控制app的物理返回键；要实现这个功能，最主要的是完成应用与H5 的通讯问题。

<template>  
  <view></view>  
</template>  

<script>  
  export default {  
    data () {  
        return {  
            wv: null
        }  
    },  
    onLoad() {
        // #ifdef APP-PLUS  
        const url = '网址';
        const wv = plus.webview.create("", "custom-webview", {  
            plusrequire: "none", //禁止远程网页使用plus的API，  
            'uni-app': 'none', //不加载uni-app渲染层框架  
        })
        wv.loadURL(url);
        const currentWebview = this.$scope.$getAppWebview();  
        currentWebview.append(wv);   
        this.wv = wv  
        // #endif  
    },  
    onBackPress() {  
        var _this = this;
        _this.wv.canBack(function(e){
            console.log(e);
            if(e.canBack)
            {
                _this.wv.back()
            }
            else
            {
                uni.showModal({
                    'title':'确定要退出应用吗？',
                    success:function(e){
                        if(e.confirm)
                        {
                            plus.runtime.quit();                            
                        }
                    }                    
                })
            }
        })
        return true;
    },  
    onNavigationBarButtonTap (e) {  
        uni.navigateBack()  
    }  
  }  
</script>

栏目分类全部>