uniapp小程序与webview通信（二）

前面**uniapp小程序与webview通信（一）**说到了uniapp给webview的传参，本篇说说webview如何给uniapp传参

1.同样地，webview的页面也要引入uniapp的SDK：

<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.2.js">
</script>

1
2
3

2.在vue页面给触发给uniapp传参的方法

<template>
    <div class="index">
        <button @click="clickVal">点击传参</button>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    },
    methods: {
        // 点击 传参
        clickVal() {
            uni.postMessage({
                data: {
                    text: '我在传参',
                }
            })
        }
    }
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

3.uniapp端增加数据监听方法@message

<template>
    <view class="content">
        <web-view @message="messageData" src="http://xxx"></web-view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
            }
        },
        onLoad() {

        },
        methods: {
            // 监听的参数
            messageData(e) {
                console.log(JSON.stringify(e.detail)) // 接收的参数
            },
        }
    }
</script>

<style>
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

此时就会打印出

{"data":[{"text":"我在传参"}]}
1