uni-app App端webview与nvue通信
<template> <view> <web-view ref="webview" class="webview" @onPostMessage="handlePostMessage"></web-view> <button class="button" @click="evalJs">evalJs(改变webview背景颜色)</text> </view> </template> <script> module.exports = { data: { }, methods: { // webview向外部发送消息 handlePostMessage: function(data) { console.log("接收到消息:" + JSON.stringify(data.detail)); }, // 调用 webview 内部逻辑 evalJs: function() { this.$refs.webview.evalJs("document.body.style.background ='#00FF00'"); } } } </script>
nvue内部onPostMessage是用来接收消息的
vue的webview是通过Message来接收消息(vue2的版本中消息只有在用户特定的操作下才会接收成功,v3的版本中是实时接收的)