uniapp web-view传参方式

一. 什么是web-view

web-view 是一个web 浏览器组件，可以用来承载网页的容器，会自动铺满整个页面（nvue 使用需要手动指定宽高）。

二. web-view更多介绍

三. web-view 和 vue页面 监听传参

1. vue 页面传参给 uniapp 页面

vue项目 public文件夹下面的index.html中添加这行代码

<script type="text/javascript" src="https://unpkg.com/@dcloudio/uni-webview-js@0.0.3/index.js"></script>

vue传参给 uniapp

<template>
    <div class="index">
        <button @click="clickVal">点击传参</button>
    </div>
</template>
<script>
export default {
    data() {
        return {}
    },
    methods: {
        // 点击 传参
        clickVal() {
            uni.postMessage({
                data: {
                    text: '我传参怎么了，我传参怎么了，我传参怎么了。',
                }
            })
        }
    }
}
</script>

uniapp 接收 vue 参数

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

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

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

<style>
</style>

image.png

2. uniapp 传参给 vue页面

mounted() {
    let currentWebview = this.$scope.$getAppWebview();
    let wv = currentWebview.children()[0];
    let data = {
        text:'uniapp传参给vue'
    }
    wv.evalJS(`getVueMessage(${JSON.stringify(data)})`);
}

vue页面接收参数

mounted() {
   this.$nextTick(() => {
     window.getVueMessage = (data) => {
       this.text = data.text
      // console.log(data.text)
    }
 })
 }

四. 完整示例代码

uniapp 页面

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

<script>
    export default {
        data() {
            return {
                title: 'Hello'
            }
        },
        onLoad() {

        },
        mounted() {
            let currentWebview = this.$scope.$getAppWebview();
            let wv = currentWebview.children()[0];
            let data = {
                text:'uniapp传参给vue'
            }
            wv.evalJS(`getVueMessage(${JSON.stringify(data)})`);
        },
        methods: {
            // 监听的参数
            messageData(e) {
                console.log(JSON.stringify(e.detail)) // 接收的参数
            },
            
        }
    }
</script>

<style>

</style>

vue 页面

<template>
    <div class="index">
        <button @click="clickVal">点击传参</button>{{ text }}
    </div>
</template>

<script>
export default {
    data() {
        return {
            text:''
        }
    },
    mounted() {
        this.$nextTick(() => {
            window.getVueMessage = (data) => {
                this.text = data.text
            // console.log(data.text)
        }
        })
    },
    methods: {
        // 点击 传参
        clickVal() {
            uni.postMessage({
                data: {
                    text: '我传参怎么了，我传参怎么了，我传参怎么了。',
                }
            })
        }
    }
}
</script>
<style scoped lang="less"></style>

五. 坑人 .nvue web-view传参方式

1. nvue 获取不到 window。
   let currentWebview = this.$scope.$getAppWebview();
let wv = currentWebview.children()[0]; 为null;
   wv.evalJS() 报错
2. @message 换成 @onPostMessage 监听参数
3. web-view 上使用 evalJS

完整unapp nvue 代码

<template>
    <view class="content">
        <web-view style="width: 600px; height: 500px;" @onPostMessage="messageData" src="http://192.168.65.8:8080/#/" ref="webView"></web-view>
        <button @click="clickButton">uniapp点击传参</button>{{title}}
    </view>
</template>

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

        },
        mounted() {
            
        },
        methods: {
            // 点击 传参
            clickButton() {
                let data = {
                    text:'uniapp传参给vue'
                }
                console.log(this.$refs.webView)
               //`web-view` 上使用 `evalJS`
                this.$refs.webView.evalJS(`getVueMessage(${JSON.stringify(data)})`);
            },
            // 监听的参数
            messageData(e) {
                // console.log(JSON.stringify(e.detail)) // 接收的参数
                this.title = e.detail.data;
            },
            
        }
    }
</script>

<style>
</style>