App端是Vue3+nvue
代码<view :key="pageUrl">
<web-view ref="webviewRef" :style="{height:${windowHeight}px}" :webview-styles="webviewStyles" v-if="pageUrl" @onPostMessage="onPostMessage" @message="onPostMessage" :src="pageUrl" class="webView"></web-view>
</view>
const webviewRef = ref(null)
onLoad((op) => {
uni.$off('ws');
uni.$on('ws', (data) => {
nextTick(() => {
webviewRef.value.evalJs(pushMessage('${data}'))
})
})
})
H5是uniapp的vue3项目
onLaunch: function() {
window.pushMessage= function(data){
uni.$emit('ws', JSON.parse(data))
}
},
现在已经实现了App和H5的双向通讯 但是在调试中好麻烦呀 可以实现H5向webview通讯吗?
在浏览器运行APP项目中webviewRef.value.evalJs(pushMessage('${data}'))报错Uncaught (in promise) TypeError: webviewRef.value.evalJs is not a function
at playerPk.nvue:41:24
2 个回复
www_inav_site (作者) - 时间就是金钱，而编程就是时间。
已经实现
app代码
uni.$off('ws');
uni.$on('ws', (data) => {
nextTick(() => {
// #ifdef APP-PLUS
webviewRef.value.evalJs(
pushMessage('${data}'))// #endif
// #ifdef H5
const iframe = window.frames['0']; // 替换成你的 WebView ID
iframe.postMessage(data, '*');
// #endif
})
})
webview代码
onLaunch: function() {
window.pushMessage= function(data){
uni.$emit('ws', JSON.parse(data))
}
window.addEventListener("message", function(event) {
uni.$emit('ws', JSON.parse(event.data))
}, false);
},
www_inav_site (作者) - 时间就是金钱，而编程就是时间。
const iframe = window.frames['0']; // 替换成你的 WebView ID 现在ID我写死成0了 有没有优雅的方案?