更新记录

1.3.0（2023-06-29）

本次主要更新： 1.优化获取webview方法： nvue_ref - nvue的web-view组件的ref, 获取：this.$refs.webview.ref vue_uuid - vue的web-view组件的uuid，获取：this.$scope.$getAppWebview().children()[0].uuid plusWebview_id - plus.webview.create的id 获取：create时的 第二个参数

1.2.0（2023-05-22）

本次主要更新：

  1. andorid 增加设置 媒体播放自动播放 方法 setSettings里的 isMediaPlaybackRequiresUserGesture

1.1.0（2022-11-14）

本次主要更新： 1.增加andorid版本 2.增加 WebView与原生双向通信、传值、js注入、设置获取UserAgent(桌面网站)、支持设置plus、vue、nvue里的WebView

查看更多

平台兼容性

Android Android CPU类型 iOS
适用版本区间：4.4 - 12.0 armeabi-v7a：支持，arm64-v8a：支持，x86：支持 适用版本区间：11 - 16

原生插件通用使用流程：

  1. 购买插件，选择该插件绑定的项目。
  2. 在HBuilderX里找到项目，在manifest的app原生插件配置中勾选模块，如需要填写参数则参考插件作者的文档添加。
  3. 根据插件作者的提供的文档开发代码，在代码中引用插件，调用插件功能。
  4. 打包自定义基座，选择插件，得到自定义基座，然后运行时选择自定义基座，进行log输出测试。
  5. 开发完毕后正式云打包

付费原生插件目前不支持离线打包。
Android 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/android
iOS 离线打包原生插件另见文档 https://nativesupport.dcloud.net.cn/NativePlugin/offline_package/ios

注意事项：使用HBuilderX2.7.14以下版本，如果同一插件且同一appid下购买并绑定了多个包名，提交云打包界面提示包名绑定不一致时，需要在HBuilderX项目中manifest.json->“App原生插件配置”->”云端插件“列表中删除该插件重新选择

KJ-WebView

WebView与原生双向通信、传值、js注入、设置获取UserAgent(桌面网站)、支持设置plus、vue、nvue里的WebView、原生侧滑返回、媒体播放自动播放

nvue 使用

<template>
    <view class="content">
        <web-view ref="webview" class="webView" :src="src"></web-view>
        <view class="btns">
            <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>
            <button type="primary" @click="setSettings">设置webview相关配置(andorid)</button>
        </view>
    </view>
</template>

<script>
    const KJWebView = uni.requireNativePlugin('KJ-WebView');
    export default {
        data() {
            return {
                src: '/hybrid/html/index.html'
            }
        },
        onLoad() {
            this.onH5SendDataCallBack();
        },
        onReady() {
            setTimeout((res) => {
                this.init();
            }, 100)
        },
        methods: {
            init() {
                /**
                 * nvue_ref - nvue的web-view组件的ref, 获取：this.$refs.webview.ref
                 * vue_uuid - vue的web-view组件的__uuid__，获取：this.$scope.$getAppWebview().children()[0].__uuid__
                 * plusWebview_id - plus.webview.create的id 获取：create时的 第二个参数
                 * * */
                var dic = {
                    "nvue_ref": this.$refs.webview.ref,
                    //"vue_uuid": this.__uuid__,
                    //"plusWebview_id": "custom-webview",
                }
                KJWebView.init(dic, (res) => {
                    console.log("init:" + JSON.stringify(res));
                })
            },
            evaluateJavascript() {
                var jsonStr = JSON.stringify({
                    "key": 1
                })
                var dic = {
                    "nvue_ref": this.$refs.webview.ref,
                    //"vue_uuid": this.__uuid__,
                    //"plusWebview_id": "custom-webview",
                    "js": "('" + jsonStr + "')"
                }
                KJWebView.evaluateJavascript(dic, (res) => {
                    console.log("evaluateJavascript:" + JSON.stringify(res));
                });
            },
            setUserAgent() {
                this.src = "https://www.baidu.com/";
                var dic = {
                    "nvue_ref": this.$refs.webview.ref,
                    //"vue_uuid": this.__uuid__,
                    //"plusWebview_id": "custom-webview",
                    "ua": "Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/20100101 Firefox/4.0"
                }
                //"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() {
                var dic = {
                    "nvue_ref": this.$refs.webview.ref,
                    //"vue_uuid": this.__uuid__,
                    //"plusWebview_id": "custom-webview",
                    "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() {
                var dic = {
                    "nvue_ref": this.$refs.webview.ref,
                    //"vue_uuid": this.__uuid__,
                    //"plusWebview_id": "custom-webview",
                }
                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/";
                var dic = {
                    "nvue_ref": this.$refs.webview.ref,
                    //"vue_uuid": this.__uuid__,
                    //"plusWebview_id": "custom-webview",
                    "is": true
                }
                KJWebView.setSwipeBack(dic, (res) => {
                    console.log("setSwipeBack:" + JSON.stringify(res));
                });
            },
            setSettings() {
                var dic = {
                    "nvue_ref": this.$refs.webview.ref,
                    //"vue_uuid": this.__uuid__,
                    //"plusWebview_id": "custom-webview",
                    "isMediaPlaybackRequiresUserGesture": false //设置媒体播放是否需要用户手势，false-可以媒体播放自动播放
                }
                KJWebView.setSettings(dic, (res) => {
                    console.log("setSettings:" + JSON.stringify(res));
                });
            }
        }

    }
</script>

<style>
    .webView {
        width: 750rpx;
        height: 200px;
    }

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

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

vue 使用

<template>
    <view class="content">
        <web-view :id="id" ref="webview" class="webView" :src="src"></web-view>
        <view class="btns">
            <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>
            <button type="primary" @click="setSettings">设置webview相关配置(andorid)</button>
        </view>
    </view>
</template>

<script>
    const KJWebView = uni.requireNativePlugin('KJ-WebView');
    export default {
        data() {
            return {
                src: '/hybrid/html/index.html',
                __uuid__: ""
            }
        },
        onLoad() {
            this.onH5SendDataCallBack();
        },
        onReady() {
            var currentWebview = this.$scope.$getAppWebview()
            setTimeout(() => {
                var arr = currentWebview.children();
                console.log("arr:" + JSON.stringify(arr));
                for (var i = 0; i < arr.length; i++) {
                    var wv = arr[i];
                    this.__uuid__ = wv.__uuid__;
                    console.log("id:" + wv.__uuid__);
                    wv.setStyle({
                        top: uni.getSystemInfoSync().statusBarHeight + 44 + 30,
                        height: 200
                    })
                }
                this.init();
            }, 1000); //如果是页面初始化调用时，需要延时一下
        },
        methods: {
            init() {
                /**
                 * nvue_ref - nvue的web-view组件的ref, 获取：this.$refs.webview.ref
                 * vue_uuid - vue的web-view组件的__uuid__，获取：this.$scope.$getAppWebview().children()[0].__uuid__
                 * plusWebview_id - plus.webview.create的id 获取：create时的 第二个参数
                 * * */
                var dic = {
                    //"nvue_ref": this.$refs.webview.ref,
                    "vue_uuid": this.__uuid__,
                    //"plusWebview_id": "custom-webview",
                }
                KJWebView.init(dic, (res) => {
                    console.log("init:" + JSON.stringify(res));
                })
                var dic = {
                    //"nvue_ref": this.$refs.webview.ref,
                    "vue_uuid": this.__uuid__,
                    //"plusWebview_id": "custom-webview",
                }
                KJWebView.init(dic, (res) => {
                    console.log("init:" + JSON.stringify(res));
                })
            },
            evaluateJavascript() {
                var jsonStr = JSON.stringify({
                    "key": 1
                })
                var dic = {
                    //"nvue_ref": this.$refs.webview.ref,
                    "vue_uuid": this.__uuid__,
                    //"plusWebview_id": "custom-webview",
                    "js": "('" + jsonStr + "')"
                }
                KJWebView.evaluateJavascript(dic, (res) => {
                    console.log("evaluateJavascript:" + JSON.stringify(res));
                });
            },
            setUserAgent() {
                this.src = "https://www.baidu.com/";
                var dic = {
                    //"nvue_ref": this.$refs.webview.ref,
                    "vue_uuid": this.__uuid__,
                    //"plusWebview_id": "custom-webview",
                    "ua": "Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/20100101 Firefox/4.0"
                }
                //"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() {
                var dic = {
                    //"nvue_ref": this.$refs.webview.ref,
                    "vue_uuid": this.__uuid__,
                    //"plusWebview_id": "custom-webview",
                    "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() {
                var dic = {
                    //"nvue_ref": this.$refs.webview.ref,
                    "vue_uuid": this.__uuid__,
                    //"plusWebview_id": "custom-webview",
                }
                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/";
                var dic = {
                    //"nvue_ref": this.$refs.webview.ref,
                    "vue_uuid": this.__uuid__,
                    //"plusWebview_id": "custom-webview",
                    "is": true
                }
                KJWebView.setSwipeBack(dic, (res) => {
                    console.log("setSwipeBack:" + JSON.stringify(res));
                });
            },
            setSettings() {
                var dic = {
                    //"nvue_ref": this.$refs.webview.ref,
                    "vue_uuid": this.__uuid__,
                    //"plusWebview_id": "custom-webview",
                    "isMediaPlaybackRequiresUserGesture": false //设置媒体播放是否需要用户手势，false-可以媒体播放自动播放
                }
                KJWebView.setSettings(dic, (res) => {
                    console.log("setSettings:" + JSON.stringify(res));
                });
            }
        }

    }
</script>

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

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

plus.webview 使用

<template>
    <view class="content">
        <view class="btns">
            <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>
            <button type="primary" @click="setSettings">设置webview相关配置(andorid)</button>
        </view>
    </view>
</template>

<script>
    const KJWebView = uni.requireNativePlugin('KJ-WebView');
    export default {
        data() {
            return {
                src: '/hybrid/html/index.html',
                wv: null
            }
        },
        onLoad() {
            this.onH5SendDataCallBack();
        },
        onReady() {
            setTimeout((res) => {
                this.wv = plus.webview.create("/hybrid/html/index.html", "custom-webview", {
                    top: uni.getSystemInfoSync().statusBarHeight + 44 + 260,
                    height: 200
                })
                this.wv.show();
                this.init();
            }, 100)
        },
        methods: {
            init() {
                /**
                 * nvue_ref - nvue的web-view组件的ref, 获取：this.$refs.webview.ref
                 * vue_uuid - vue的web-view组件的__uuid__，获取：this.$scope.$getAppWebview().children()[0].__uuid__
                 * plusWebview_id - plus.webview.create的id 获取：create时的 第二个参数
                 * * */
                var dic = {
                    //"nvue_ref": this.$refs.webview.ref,
                    //"vue_uuid": this.__uuid__,
                    "plusWebview_id": "custom-webview",
                }
                KJWebView.init(dic, (res) => {
                    console.log("init:" + JSON.stringify(res));
                })
            },
            evaluateJavascript() {
                var jsonStr = JSON.stringify({
                    "key": 1
                })
                var dic = {
                    //"nvue_ref": this.$refs.webview.ref,
                    //"vue_uuid": this.__uuid__,
                    "plusWebview_id": "custom-webview",
                    "js": "('" + jsonStr + "')"
                }
                KJWebView.evaluateJavascript(dic, (res) => {
                    console.log("evaluateJavascript:" + JSON.stringify(res));
                });
            },
            setUserAgent() {
                var dic = {
                    ///"nvue_ref": this.$refs.webview.ref,
                    //"vue_uuid": this.__uuid__,
                    "plusWebview_id": "custom-webview",
                    "ua": "Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.0.4) Gecko/20100101 Firefox/4.0"
                }
                //"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() {
                var dic = {
                    //"nvue_ref": this.$refs.webview.ref,
                    //"vue_uuid": this.__uuid__,
                    "plusWebview_id": "custom-webview",
                    "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() {
                var dic = {
                    //"nvue_ref": this.$refs.webview.ref,
                    //"vue_uuid": this.__uuid__,
                    "plusWebview_id": "custom-webview",
                }
                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() {
                var dic = {
                    //"nvue_ref": this.$refs.webview.ref,
                    //"vue_uuid": this.__uuid__,
                    "plusWebview_id": "custom-webview",
                    "is": true
                }
                KJWebView.setSwipeBack(dic, (res) => {
                    console.log("setSwipeBack:" + JSON.stringify(res));
                });
            },
            setSettings() {
                var dic = {
                    //"nvue_ref": this.$refs.webview.ref,
                    //"vue_uuid": this.__uuid__,
                    "plusWebview_id": "custom-webview",
                    "isMediaPlaybackRequiresUserGesture": false //设置媒体播放是否需要用户手势，false-可以媒体播放自动播放
                }
                KJWebView.setSettings(dic, (res) => {
                    console.log("setSettings:" + JSON.stringify(res));
                });
            }
        }

    }
</script>

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

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

H5 html

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta name="viewport"
            content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
        <title>vue</title>
        <link href="css/mui.min.css" rel="stylesheet" />
        <style>
            .content>div {
                padding: 8px;
            }
        </style>
    </head>

    <body>
        <div class="content">
            <div>接受到app的消息：<label id="label"></label></div>
            <div>
                <button id="btn" type="button" class="mui-btn-blue">发送消息给app</button>
            </div>
            <div>
                <button id="btn2" type="button" class="mui-btn-blue">获取app设置的prompt值</button>
            </div>
            <div>
                <input type="file" name="upload" multiple="multiple">
            </div>
        </div>

        <script type="text/javascript">
            document.getElementById("btn").addEventListener("click", function(res) {
                var dic = {
                    "key": 1
                }
                var jsonStr = JSON.stringify(dic)
                try {
                    window.webkit.messageHandlers.sendData.postMessage(jsonStr); //ios
                } catch (e) {}
                try {
                    window.Android.sendData(jsonStr); //andorid
                } catch (e) {}
            })

            document.getElementById("btn2").addEventListener("click", function(res) {
                var dic = {
                    "key": 1
                }
                var jsonStr = JSON.stringify(dic)
                var result = prompt("getData");
                alert("demo " + result);
            })

            function app_evaluateJavascript_test(res) {
                document.getElementById("label").innerText = res
                var dic = {
                    "key": 1
                }
                var jsonStr = JSON.stringify(dic)
                return jsonStr;
            }
        </script>
    </body>

</html>

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

插件不采集任何数据

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

评论列表 撰写评论
加载更多...
插件问答 我要提问

使用中有什么不明白的地方，就向插件作者提问吧~ 我要提问

加载更多...