uni-app 与 web-view内嵌网页双向通信

这里的通信主要测试环境是打包APP端和web-view内嵌网页的双向通信。

一、内嵌网页向uni-app通信
参考文章：uniapp web-view

内嵌网页向uni-app发消息
在web-view访问的网页内引入uni.webview.1.5.3.js,待sdk加载完毕后就可以调用方法postMessage。如下：

// index.html
<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script type="text/javascript" src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.3.js">
        </script>
    </head>
    <body>
        <script>
            // 等待sdk加载
            document.addEventListener('UniAppJSBridgeReady', function() {
                // 向应用发送消息
                uni.postMessage({
                    data: {
                        order: 'playRecord'
                    }
                });
            });
        </script>
    </body>
</html>

uni-app接收消息
在web-view存在的组件内写监听message的方法。如下：

<template>
    <web-view @message="message" src="/hybrid/html/index.html"></web-view>
</template>

<script>
    export default {
        data() {
            return {};
        },
        methods: {
            message(arg) {
                console.loh(arg)
            },
        }
    };
</script>

效果图

二、 uni-app向内嵌网页通信

uni-app向内嵌网页发消息

const
  _funName='msgFromUniapp',
  _data = {
    msg:'msg from uniapp'
  };
const currentWebview = this.$scope.$getAppWebview().children()[0];
currentWebview.evalJS(`${_funName}(${JSON.stringify(_data)})`);

内嵌网页接收消息

window.msgFromUniapp= function(arg) {
  console.log(arg);
  console.log(JSON.stringify(arg));
}

效果图

三、实现案例

内嵌网页代码

<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <script type="text/javascript" src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.3.js">
        </script>
    </head>

    <body>
        <script>
            // 等待sdk加载
            document.addEventListener('UniAppJSBridgeReady', function() {
                // 向应用发送消息
                uni.postMessage({
                    data: {
                        order: 'playRecord'
                    }
                });
            });
            window.msgFromUniapp = function(arg) {
                console.log(JSON.stringify(arg));
            }
        </script>
    </body>
</html>

uniapp组件代码

<template>
    <web-view @message='message' src="/hybrid/html/index.html"></web-view>
</template>

<script>
    export default {
        methods: {
            message(arg) {
                console.log(JSON.stringify(arg))
                this.sendMsgToWebview()
            },
            sendMsgToWebview() {
                const
                    _funName = 'msgFromUniapp',
                    _data = {
                        msg: 'msg from uniapp'
                    };
                const currentWebview = this.$scope.$getAppWebview().children()[0];
                currentWebview.evalJS(`${_funName}(${JSON.stringify(_data)})`);
            }
        }
    };
</script>

有勇气并不表示恐惧不存在，而是敢面对恐惧、克服恐惧。

最后编辑于：2022.04.28 14:17:09

uni-app 与 web-view内嵌网页 双向通信

uni-app 与 web-view内嵌网页双向通信