uniapp 在app和小程序端使用webview进行数据交互

风花一世月

发布于 2024-03-19 14:10:07

1610

发布于 2024-03-19 14:10:07

文章被收录于专栏：前端前端

结论：app端支持比较好可以做到实时传递，微信小程序支持比较差，小程序向url传参只能通过url，url向app传参需要特定时机（后退、组件销毁、分享、复制链接）触发才能收到消息。

以下是代码

app端（需要使用nvue）

<template>  
    <view class="webview-box">  
            <button style="z-index: 999;" @click="handlePostMessage('app向url传值')">点击向url传值</button>
            <web-view ref="webview" class="webview" src="http://192.168.18.103:8080/index?os=wx" @onPostMessage="PostMessage"></web-view>  
        </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                                url:'http://192.168.18.103:8080/index?os=wx'
            }  
        },  
        onLoad() {  
                    this.url += '&t=' + new Date().getTime()
        },  
        methods: {  
            // 接收h5页面发来的键值判断需要执行的操作  
            PostMessage(evt) {  
                console.log("postMessage: ", evt)
                                uni.showModal({
                                    title:"提示",
                                    content:evt.detail.data[0].msg
                                })
            },  
            // 获取到对应webview(关键)通过evalJs(注意大小写，如果不知道evalJ是什么，可自行百度) 执行网页的函数，可对其进行传参，完成与网页的通讯  
            handlePostMessage(res) {  
                            console.log("22")
                this.$refs.webview.evalJs(`handleMessage('${res}')`);  
            }  
        }  
    }  
</script>  

<style>  
    .webview-box {  
        position: absolute;  
        left: 0px;  
        right: 0px;  
        top: 0px;  
        bottom: 0px;  
    }  

    .webview {  
        flex: 1; 
                 height: 300rpx;
    }  
</style>

微信小程序端（正常vue格式）

<template>  
    <view class="webview-box">  
            <web-view ref="webview" class="webview" :src="url" @onPostMessage="PostMessage" @message="PostMessage"></web-view>  
        </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                                url:'http://192.168.18.103:8080/index?os=wx'
            }  
        },  
        onLoad() {  
                    this.url += '&t=' + new Date().getTime()
        },  
        methods: {  
            // 接收h5页面发来的键值判断需要执行的操作  
            PostMessage(evt) {  
                console.log("postMessage1: ", evt)  
            },  
            // 获取到对应webview(关键)通过evalJs(注意大小写，如果不知道evalJ是什么，可自行百度) 执行网页的函数，可对其进行传参，完成与网页的通讯  
            handlePostMessage(res) {  
                            console.log("22")
            }  
        }  
    }  
</script>  

<style>  
    .webview-box {  
        position: absolute;  
        left: 0px;  
        right: 0px;  
        top: 0px;  
        bottom: 0px;  
    }  

    .webview {  
        flex: 1; 
                 height: 300rpx;
    }  
</style>

3、html端

<template>  
    <view class="webview-box">  
            <web-view ref="webview" class="webview" :src="url" @onPostMessage="PostMessage" @message="PostMessage"></web-view>  
        </view>  
</template>  
<script>  
    export default {  
        data() {  
            return {  
                                url:'http://192.168.18.103:8080/index?os=wx'
            }  
        },  
        onLoad() {  
                    this.url += '&t=' + new Date().getTime()
        },  
        methods: {  
            // 接收h5页面发来的键值判断需要执行的操作  
            PostMessage(evt) {  
                console.log("postMessage1: ", evt)  
            },  
            // 获取到对应webview(关键)通过evalJs(注意大小写，如果不知道evalJ是什么，可自行百度) 执行网页的函数，可对其进行传参，完成与网页的通讯  
            handlePostMessage(res) {  
                            console.log("22")
            }  
        }  
    }  
</script>  

<style>  
    .webview-box {  
        position: absolute;  
        left: 0px;  
        right: 0px;  
        top: 0px;  
        bottom: 0px;  
    }  

    .webview {  
        flex: 1; 
                 height: 300rpx;
    }  
</style>

本文参与腾讯云自媒体分享计划，分享自作者个人站点/博客。

原始发表：2023-07-13，如有侵权请联系 cloudcommunity@tencent.com 删除

小程序