uni-app 官方WebView全能扩展、支持plus、vue、nvue里的WebView

uni-app 官方WebView全能扩展、支持plus、vue、nvue里的WebView：https://ext.dcloud.net.cn/plugin?id=9832

<template>
    <view class="content">
        <view class="title">我是web-view组件</view>
        <web-view ref="webview" class="webView" :src="src"></web-view>
        <view class="title title2">我是plus.webview组件</view>
        <view class="btns">
            <button type="primary" @click="search">搜索所有webview</button>
            <button type="primary" @click="init">初始化</button>
            <button type="primary" @click="evaluateJavascript">app调网页中方法</button>
            <button type="primary" @click="onH5SendDataCallBack">监听网页发送的数据</button>
            <button type="primary" @click="setUserAgent">设置UserAgent(桌面/电脑网站例子)</button>
            <button type="primary" @click="getUserAgent">获取UserAgent</button>
            <button type="primary" @click="reload">重新加载webview</button>
            <button type="primary" @click="setPrompt">setPrompt(ios)</button>
            <button type="primary" @click="setSwipeBack">是否开启侧滑返回(ios)</button>
        </view>
    </view>
</template>

<script>
    const KJWebView = uni.requireNativePlugin('KJ-WebView');
    export default {
        data() {
            return {
                src: '/hybrid/html/index.html',
                wv: null,
                search_result: null
            }
        },
        onLoad() {
            this.onH5SendDataCallBack();
        },
        onBackPress() {
            plus.webview.close(this.wv);
        },
        onReady() {
            var currentWebview = this.$scope
                .$getAppWebview() //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
            setTimeout(function() {
                var wv = currentWebview.children()[0]
                wv.setStyle({
                    top: uni.getSystemInfoSync().statusBarHeight + 44 + 30,
                    height: 200
                })
            }, 1000); //如果是页面初始化调用时，需要延时一下

            setTimeout((res) => {
                this.wv = plus.webview.create("/hybrid/html/index.html", "custom-webview", {
                    top: uni.getSystemInfoSync().statusBarHeight + 44 + 280,
                    height: 200
                })
                this.wv.show(); // 显示窗口
                this.search()
            }, 100)
        },
        methods: {
            search() {
                KJWebView.search({
                    "noKeywords": ["__uniappview.html"] //不需要捕获的url关键字的webview
                }, (res) => {
                    console.log("search:" + JSON.stringify(res));
                    this.search_result = res.result;
                    this.init();
                })
            },
            init() {
                for (var i = 0; i < this.search_result.length; i++) {
                    var result_dic = this.search_result[i];
                    var dic = {
                        "tag": result_dic.tag
                    }
                    KJWebView.init(dic, (res) => {
                        console.log("init:" + JSON.stringify(res));
                    })
                }
            },
            evaluateJavascript() {
                for (var i = 0; i < this.search_result.length; i++) {
                    var result_dic = this.search_result[i];
                    var jsonStr = JSON.stringify({
                        "key": 1
                    })
                    var dic = {
                        "tag": result_dic.tag,
                        "js": "('" + jsonStr + "')"
                    }
                    KJWebView.evaluateJavascript(dic, (res) => {
                        console.log("evaluateJavascript:" + JSON.stringify(res));
                    });
                }
            },
            setUserAgent() {
                this.src = "https://www.baidu.com/";
                for (var i = 0; i < this.search_result.length; i++) {
                    var result_dic = this.search_result[i];
                    var dic = {
                        "tag": result_dic.tag,
                        "ua": "Mozilla/5.0 (Macintosh; Intel Mac OS X 13_0_0) AppleWebKit/537.36 (KHTML, like Gecko) QtWebEngine/5.12.10 Chrome/69.0.3497.128 Safari/537.36"
                    }
                    //"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.75.14 (KHTML, like Gecko) Version/7.0.3 Safari/7046A194A"
                    //"Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/20100101 Firefox/4.0"
                    KJWebView.setUserAgent(dic, (res) => {
                        console.log("setUserAgent:" + JSON.stringify(res));
                    });
                }
            },
            getUserAgent() {
                for (var i = 0; i < this.search_result.length; i++) {
                    var result_dic = this.search_result[i];
                    var dic = {
                        "tag": result_dic.tag,
                        "js": "navigator.userAgent"
                    }
                    KJWebView.evaluateJavascript(dic, (res) => {
                        console.log("getUserAgent:" + JSON.stringify(res));
                        //Mozilla/5.0 (iPhone; CPU iPhone OS 16_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148 Html5Plus/1.0 (Immersed/47) uni-app
                        uni.showModal({
                            title: "获取UserAgent",
                            content: JSON.stringify(res)
                        })
                    });
                }
            },
            reload() {
                for (var i = 0; i < this.search_result.length; i++) {
                    var result_dic = this.search_result[i];
                    var dic = {
                        "tag": result_dic.tag,
                    }
                    KJWebView.reload(dic, (res) => {
                        console.log("reload:" + JSON.stringify(res));
                    });
                }
            },
            onH5SendDataCallBack() {
                KJWebView.onH5SendDataCallBack((res) => {
                    console.log("onH5SendDataCallBack:" + JSON.stringify(res));
                    uni.showModal({
                        title: "监听网页发送的数据",
                        content: JSON.stringify(res)
                    })
                })
            },
            setPrompt() {
                var dic = [{
                    "promptName": "getData",
                    "returnStr": "test"
                }];
                KJWebView.setPrompt(dic, (res) => {
                    console.log("setPrompt:" + JSON.stringify(res));
                })
            },
            setSwipeBack() {
                this.src = "https://www.baidu.com/";
                for (var i = 0; i < this.search_result.length; i++) {
                    var result_dic = this.search_result[i];
                    var dic = {
                        "tag": result_dic.tag,
                        "is": true
                    }
                    KJWebView.setSwipeBack(dic, (res) => {
                        console.log("setSwipeBack:" + JSON.stringify(res));
                    });
                }
            }
        }
    }
</script>

<style>
    .title {
        text-align: center;
        color: red;
    }

    .title2 {
        width: 750rpx;
        position: absolute;
        top: 240px;
    }

    .btns {
        width: 750rpx;
        position: fixed;
        bottom: 20px;
        display: flex;
        flex-wrap: wrap;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
    }

    .btns>button {
        font-size: 14px;
    }
</style>